‘lijianhao’
2 years ago
1 changed files with 167 additions and 6 deletions
@ -1,14 +1,175 @@ |
|||||
import React from 'react' |
import React, { useEffect, useRef } from 'react'; |
||||
import Module from '../../../public/module' |
import Module from '../../../public/module' |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
|
|
||||
const LeftTop = () => { |
const LeftTop = () => { |
||||
|
const seasonChartRef = useRef(null); |
||||
|
|
||||
|
const frequentlyChartRef = useRef(null); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
let chartInstance = echarts.init(seasonChartRef.current); |
||||
|
const seasonOption = { |
||||
|
title: [ |
||||
|
{ |
||||
|
text: "季节性", |
||||
|
x: "center", |
||||
|
top: "55%", |
||||
|
textStyle: { |
||||
|
color: "#E9F7FF", |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "2333", |
||||
|
x: "center", |
||||
|
y: "35%", |
||||
|
textStyle: { |
||||
|
fontSize: "30", |
||||
|
color: "#FFFFFF", |
||||
|
fontFamily: "YouSheBiaoTiHei", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
polar: { |
||||
|
radius: ["65%", "73%"], |
||||
|
center: ["50%", "50%"], |
||||
|
}, |
||||
|
angleAxis: { |
||||
|
max: 100, |
||||
|
show: false, |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
type: "category", |
||||
|
show: true, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
type: "bar", |
||||
|
roundCap: true, |
||||
|
barWidth: 30, |
||||
|
showBackground: true, |
||||
|
data: [40], |
||||
|
coordinateSystem: "polar", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#AAC8FF", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#0041BB", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(seasonOption); |
||||
|
|
||||
|
}, []) |
||||
|
useEffect(() => { |
||||
|
let chartInstance = echarts.init(frequentlyChartRef.current); |
||||
|
const frequentlyOption = { |
||||
|
title: [ |
||||
|
{ |
||||
|
text: "经常性", |
||||
|
x: "center", |
||||
|
top: "55%", |
||||
|
textStyle: { |
||||
|
color: "#E9F7FF", |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "2333", |
||||
|
x: "center", |
||||
|
y: "35%", |
||||
|
textStyle: { |
||||
|
fontSize: "30", |
||||
|
color: "#FFFFFF", |
||||
|
fontFamily: "YouSheBiaoTiHei", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
polar: { |
||||
|
radius: ["65%", "73%"], |
||||
|
center: ["50%", "50%"], |
||||
|
}, |
||||
|
angleAxis: { |
||||
|
max: 100, |
||||
|
show: false, |
||||
|
}, |
||||
|
radiusAxis: { |
||||
|
type: "category", |
||||
|
show: true, |
||||
|
axisLabel: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "", |
||||
|
type: "bar", |
||||
|
roundCap: true, |
||||
|
barWidth: 30, |
||||
|
showBackground: true, |
||||
|
backgroundStyle: { |
||||
|
color: "rgba(66, 66, 66, .3)", |
||||
|
}, |
||||
|
data: [40], |
||||
|
coordinateSystem: "polar", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: "#C5EFFF", |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: "#07B9FE", |
||||
|
}, |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(frequentlyOption); |
||||
|
|
||||
|
}, []) |
||||
const style = { height: "30%", marginTop: "5%" } |
const style = { height: "30%", marginTop: "5%" } |
||||
return ( |
return ( |
||||
<> |
<> |
||||
<Module style={style} title={"道路养护周期统计"}> |
<Module style={style} title={"道路养护周期统计"}> |
||||
|
<div style={{ width: '100%', display: 'flex' }}> |
||||
</Module> |
<div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div> |
||||
</> |
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div> |
||||
|
</div> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
) |
) |
||||
} |
} |
||||
export default LeftTop |
export default LeftTop |
Loading…
Reference in new issue