|
|
@ -1,6 +1,7 @@ |
|
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
|
import Module from '../../../public/module' |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import { Badge } from 'antd'; |
|
|
|
|
|
|
|
|
|
|
|
const LeftTop = () => { |
|
|
@ -134,9 +135,6 @@ const LeftTop = () => { |
|
|
|
roundCap: true, |
|
|
|
barWidth: 30, |
|
|
|
showBackground: true, |
|
|
|
backgroundStyle: { |
|
|
|
color: "rgba(66, 66, 66, .3)", |
|
|
|
}, |
|
|
|
data: [40], |
|
|
|
coordinateSystem: "polar", |
|
|
|
itemStyle: { |
|
|
@ -154,6 +152,8 @@ const LeftTop = () => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
], |
|
|
|
}; |
|
|
|
chartInstance.setOption(frequentlyOption); |
|
|
@ -163,11 +163,27 @@ const LeftTop = () => { |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Module style={style} title={"道路养护周期统计"}> |
|
|
|
<div style={{ position: 'relative' }}> |
|
|
|
<div style={{ width: '100%', display: 'flex' }}> |
|
|
|
<div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}></div> |
|
|
|
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div> |
|
|
|
<div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div> |
|
|
|
</div> |
|
|
|
<img src='assets/images/quanju/circle.png' style={{ |
|
|
|
position: 'absolute', |
|
|
|
left: '19%', |
|
|
|
top: '70%', |
|
|
|
zIndex: 999 |
|
|
|
}} /> |
|
|
|
<img src='assets/images/quanju/circle.png' style={{ |
|
|
|
position: 'absolute', |
|
|
|
right: '27%', |
|
|
|
top: '70%', |
|
|
|
zIndex: 999 |
|
|
|
}} /> |
|
|
|
</div> |
|
|
|
</Module> |
|
|
|
</> |
|
|
|
) |
|
|
|