|
|
|
@ -1,25 +1,26 @@ |
|
|
|
|
|
|
|
import './style.less' |
|
|
|
import { Col, Progress, Row } from 'antd'; |
|
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
|
import React, { useEffect, useRef, useState } from 'react'; |
|
|
|
// import ReactEcharts from 'echarts-for-react';
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
function Rightbottom (props) { |
|
|
|
const { width, height, total, data, text } = props |
|
|
|
const chartRef = useRef(null); |
|
|
|
const [shuzu, setShuzu] = useState() |
|
|
|
let colorList = [ |
|
|
|
"rgba(7,185,254,1)", |
|
|
|
// "rgba(7,185,254,1)",
|
|
|
|
"rgba(28,96,254,1)", |
|
|
|
"rgba(4,251,240,1)", |
|
|
|
"rgba(255,194,20,1)", |
|
|
|
'rgba(255,255,255,1)' |
|
|
|
// "rgba(255,194,20,1)",
|
|
|
|
// 'rgba(255,255,255,1)'
|
|
|
|
] |
|
|
|
let underColorList = [ |
|
|
|
"rgba(7,185,254,0.5)", |
|
|
|
// "rgba(7,185,254,0.5)",
|
|
|
|
"rgba(28,96,254,0.5)", |
|
|
|
"rgba(4,251,240,0.5)", |
|
|
|
"rgba(255,194,20,0.5)", |
|
|
|
'rgba(255,255,255,0.5)', |
|
|
|
// "rgba(255,194,20,0.5)",
|
|
|
|
// 'rgba(255,255,255,0.5)',
|
|
|
|
] |
|
|
|
let name = [], emptyName = [] |
|
|
|
// const name = data?.map(d)
|
|
|
|
@ -34,7 +35,6 @@ function Rightbottom (props) { |
|
|
|
// ]
|
|
|
|
|
|
|
|
const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路'] |
|
|
|
// const rightLegend = ['三级及以上','四级']
|
|
|
|
// let data=[
|
|
|
|
// {name: "四级公路", value: 2969},
|
|
|
|
// {name: "等外公路", value: 171},
|
|
|
|
@ -63,6 +63,19 @@ function Rightbottom (props) { |
|
|
|
value: d.value |
|
|
|
}) |
|
|
|
}) |
|
|
|
let siji = dataq.map((item, index) => { |
|
|
|
if (item.name == "四级公路" || item.name == "等外公路") { |
|
|
|
return item.value |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
let sanji = dataq.map((item, index) => { |
|
|
|
if (item.name == "三级公路" || item.name == "二级公路" || item.name == "一级公路") { |
|
|
|
return item.value |
|
|
|
} |
|
|
|
}) |
|
|
|
let dataAll = [{ name: '四级', value: siji[0] + siji[1] }, { name: '三级及以上', value: sanji[2] + sanji[3] + sanji[4] }] |
|
|
|
console.log(dataAll); |
|
|
|
const chartTitle = '道路总公里'; |
|
|
|
const title = '基础设施安全监测版块'; |
|
|
|
// const number = 2738;
|
|
|
|
@ -149,7 +162,7 @@ function Rightbottom (props) { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: dataq, |
|
|
|
data: dataAll, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
@ -186,7 +199,7 @@ function Rightbottom (props) { |
|
|
|
// myChart.onChartReady = (instance) => {
|
|
|
|
// chartRef.current.safetyChart = instance;
|
|
|
|
// }
|
|
|
|
// myChart.setOption(option);
|
|
|
|
myChart.setOption(option); |
|
|
|
return () => { |
|
|
|
// clearInterval(changePieInterval)
|
|
|
|
} |
|
|
|
@ -194,18 +207,36 @@ function Rightbottom (props) { |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='build-right-bottom'> |
|
|
|
<div className='build-right-bottom-item1'> |
|
|
|
<div> |
|
|
|
|
|
|
|
<span /> |
|
|
|
<span className='sanji'><i style={{color: 'rgba(28,96,254,1)'}}>►</i> 三级及以上</span> |
|
|
|
</div> |
|
|
|
<div>{sanji[2] + sanji[3] + sanji[4]}</div> |
|
|
|
</div> |
|
|
|
{/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> */} |
|
|
|
<div className='build-right-bottom-title'> |
|
|
|
<h2>{total || 0}</h2> |
|
|
|
<span>道路总公里</span> |
|
|
|
<h2>{siji[0] + siji[1]+sanji[2] + sanji[3] + sanji[4] || 0}</h2> |
|
|
|
<span>路段总数</span> |
|
|
|
</div> |
|
|
|
<div className='img1'> |
|
|
|
{/* <div className='img1'> |
|
|
|
<img src='/assets/images/quanju/all.png' /> |
|
|
|
</div> |
|
|
|
<div className='img2'> |
|
|
|
</div> */} |
|
|
|
<div className='img'> |
|
|
|
<img src='/assets/images/quanju/chart-circle.png' /> |
|
|
|
</div> |
|
|
|
<div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div> |
|
|
|
<div /* ref={chartRef} */ style={{ width: width || "70%", height: height || "90%"}} /* id="ech" */> |
|
|
|
<div ref={chartRef} style={{ width: "65%", height: "90%"}} id="ech"></div> |
|
|
|
<div className='build-right-bottom-item2'> |
|
|
|
<div> |
|
|
|
|
|
|
|
<span /> |
|
|
|
<span className='siji'><i style={{color:"rgba(4,251,240,1)"}}>►</i> 四级</span> |
|
|
|
</div> |
|
|
|
<div>{siji[0] + siji[1]}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
yangsen