|
|
|
@ -6,14 +6,18 @@ const Leftbottomecharts = (props) => { |
|
|
|
const { dispatch } = props |
|
|
|
const [list, setList] = useState([]) |
|
|
|
const [count, setCount] = useState([]) |
|
|
|
const [value, setValue] = useState([]) |
|
|
|
const [flag, setFlag] = useState(true) |
|
|
|
useEffect(() => { |
|
|
|
const res = dispatch(getdaolutongji()).then((res) => { |
|
|
|
console.log(res); |
|
|
|
setList(res.payload.data.construction.map((item, index) => { |
|
|
|
return item.year |
|
|
|
})); |
|
|
|
setCount(res.payload.data.construction.map((item, index) => { |
|
|
|
return item.count.toFixed(3) |
|
|
|
})) |
|
|
|
setValue() |
|
|
|
}); |
|
|
|
}, []) |
|
|
|
// console.log(list, count);
|
|
|
|
@ -134,7 +138,7 @@ const Leftbottomecharts = (props) => { |
|
|
|
shadowBlur: 10, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: count, |
|
|
|
data: flag ? count : value, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
@ -142,15 +146,21 @@ const Leftbottomecharts = (props) => { |
|
|
|
window.addEventListener('resize', function () { |
|
|
|
chartInstance.resize(); |
|
|
|
}) |
|
|
|
}, [list, count]); |
|
|
|
|
|
|
|
}, [count, flag, list]); |
|
|
|
console.log(flag); |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8000)", fontSize: "0.4vh", lineHeight: "20px" }}>公里</p></div> |
|
|
|
<div onClick={() => { |
|
|
|
setFlag(true) |
|
|
|
}} style={{ position: "absolute", top: "75%", left: "75%", width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", zIndex: 100, marginRight: "4%", borderLeft: "solid 2px #6E7A83" }} > |
|
|
|
<p style={{ color: flag == false ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "0.4vh", lineHeight: "20px" }}>已建</p></div> |
|
|
|
<div onClick={() => { |
|
|
|
setFlag(false) |
|
|
|
}} style={{ position: "absolute", width: "72px", left: "45%", top: "75%", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}> |
|
|
|
<p style={{ color: flag == true ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "0.4vh", lineHeight: "20px" }} >未建</p></div > |
|
|
|
<div ref={chartRef} style={{ |
|
|
|
height: "20vh", width: "100%" |
|
|
|
height: "18vh", width: "100%", position: "absolute", top: "77%" |
|
|
|
}}></div> |
|
|
|
</> |
|
|
|
); |
|
|
|
|
