|
|
|
@ -1,27 +1,219 @@ |
|
|
|
import { Col, Row } from 'antd' |
|
|
|
import React from 'react' |
|
|
|
import { useEffect } from 'react' |
|
|
|
import { useEffect, useRef } from 'react' |
|
|
|
import Module from '../../../public/module' |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
const LeftCenter = () => { |
|
|
|
const style = { height: "31%", marginTop: "3%" } |
|
|
|
|
|
|
|
const chartRef = useRef(null); |
|
|
|
useEffect(() => { |
|
|
|
let chartInstance = echarts.init(chartRef.current); |
|
|
|
let colorArray = [ |
|
|
|
{ |
|
|
|
top: "#07B9FE", |
|
|
|
bottom: "#10274B", |
|
|
|
}, |
|
|
|
{ |
|
|
|
top: "#1978E5", |
|
|
|
bottom: " #10274B", |
|
|
|
}, |
|
|
|
{ |
|
|
|
top: "#1978E5", |
|
|
|
bottom: "#10274B", |
|
|
|
}, |
|
|
|
]; |
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
show: true, |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
type: "none", |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: "5%", |
|
|
|
top: "12%", |
|
|
|
right: "1%", |
|
|
|
bottom: "8%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
|
|
|
|
xAxis: { |
|
|
|
type: "value", |
|
|
|
show: true, |
|
|
|
position: "bottom", |
|
|
|
axisTick: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: "rgba(176,215,255,0.25)", |
|
|
|
// type: "dashed",
|
|
|
|
}, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: "rgba(216,240,255,0.8000)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: "rgba(176,215,255,0.25)", |
|
|
|
type: "dashed", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: "category", |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
alignWithLabel: false, |
|
|
|
length: 5, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
//网格线
|
|
|
|
show: false, |
|
|
|
}, |
|
|
|
inverse: true, //排序
|
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: "rgba(176,215,255,0.8)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
zlevel: 100, |
|
|
|
data: ["县级可绿化里程", "乡级可绿化里程", "村级可绿化里程"], |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "category", |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
alignWithLabel: false, |
|
|
|
length: 5, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
//网格线
|
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
backgroundColor: { |
|
|
|
image: 'assets/images/quanju/kelvhua_bdbg.png', |
|
|
|
}, |
|
|
|
width: 50, |
|
|
|
height: 20, |
|
|
|
color: '#D8F0FF', |
|
|
|
margin:40, |
|
|
|
verticalAlign: 'middle', |
|
|
|
align: 'center' |
|
|
|
// formatter:(f) =>{console.log('f:',f);}
|
|
|
|
}, |
|
|
|
inverse: true, //排序
|
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: "rgba(176,215,255,0.8)", |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
data: [60, 132, 89], |
|
|
|
}, |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '背景', |
|
|
|
type: "bar", |
|
|
|
barWidth: 3, |
|
|
|
barGap: "100%", |
|
|
|
barCategoryGap: "50%", |
|
|
|
color: "#15356E", |
|
|
|
data: [150, 150, 150, 150], |
|
|
|
tooltip: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "", |
|
|
|
type: "bar", |
|
|
|
zlevel: 1, |
|
|
|
barWidth: 3, |
|
|
|
barGap: "-100%", |
|
|
|
barCategoryGap: "50%", |
|
|
|
data: [60, 132, 89], |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'right', // 位置
|
|
|
|
fontSize: 12, |
|
|
|
lineHeight: 13, |
|
|
|
distance: -2, |
|
|
|
verticalAlign: "middle", |
|
|
|
formatter: [ |
|
|
|
'{a| }', |
|
|
|
].join(''), // 这里是数据展示的时候显示的数据
|
|
|
|
rich: { |
|
|
|
a: { |
|
|
|
backgroundColor: { |
|
|
|
image: 'assets/images/quanju/circle2.png' |
|
|
|
}, |
|
|
|
width: 15, |
|
|
|
height: 15, |
|
|
|
align: 'left', |
|
|
|
verticalAlign: "center", |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
show: true, |
|
|
|
color: function (params) { |
|
|
|
return { |
|
|
|
type: "linear", |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: colorArray[params.dataIndex].bottom, |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: colorArray[params.dataIndex].top, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
], |
|
|
|
// globalCoord: false,
|
|
|
|
}; |
|
|
|
}, |
|
|
|
barBorderRadius: 70, |
|
|
|
borderWidth: 0, |
|
|
|
borderColor: "#333", |
|
|
|
}, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
disabled: true //禁止移入柱子改变颜色
|
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
chartInstance.setOption(option); |
|
|
|
window.onresize = function () { |
|
|
|
chartInstance.resize(); |
|
|
|
} |
|
|
|
}, []); |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Module style={style} title={"可绿化里程统计"}> |
|
|
|
|
|
|
|
<Row align='middle' style={{ padding: 10 }}> |
|
|
|
<Row align='middle' style={{ padding: '10px 3% 0px 15px' }}> |
|
|
|
<Col span={15}> |
|
|
|
<img src='assets/images/quanju/kelvhua_icon.png' alt='icon' /> |
|
|
|
<span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span> |
|
|
|
</Col> |
|
|
|
<Col span={9} style={{ fontSize: 28, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234.123</Col> |
|
|
|
</Row> |
|
|
|
<div>图表</div> |
|
|
|
<div ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div> |
|
|
|
|
|
|
|
</Module> |
|
|
|
</> |
|
|
|
|
