15 changed files with 461 additions and 227 deletions
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 373 B |
@ -1,30 +1,222 @@ |
|||||
import { Col, Row } from 'antd' |
import { Col, Row } from 'antd' |
||||
import React from 'react' |
import React from 'react' |
||||
import { useEffect } from 'react' |
import { useEffect, useRef } from 'react' |
||||
import Module from '../../../public/module' |
import Module from '../../../public/module' |
||||
|
import * as echarts from 'echarts'; |
||||
|
|
||||
const LeftCenter = () => { |
const LeftCenter = () => { |
||||
const style = { height: "31%", marginTop: "3%" } |
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, |
||||
|
}, |
||||
|
|
||||
useEffect(() => { |
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, |
||||
|
}, |
||||
|
|
||||
return ( |
|
||||
<> |
|
||||
<Module style={style} title={"可绿化里程统计"}> |
|
||||
|
|
||||
<Row align='middle' style={{ padding: 10 }}> |
], |
||||
<Col span={15}> |
// globalCoord: false,
|
||||
<img src='assets/images/quanju/kelvhua_icon.png' alt='icon' /> |
}; |
||||
<span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span> |
}, |
||||
</Col> |
barBorderRadius: 70, |
||||
<Col span={9} style={{ fontSize: 28, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234.123</Col> |
borderWidth: 0, |
||||
</Row> |
borderColor: "#333", |
||||
<div>图表</div> |
}, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
disabled: true //禁止移入柱子改变颜色
|
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
chartInstance.setOption(option); |
||||
|
window.onresize = function () { |
||||
|
chartInstance.resize(); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
</Module> |
return ( |
||||
</> |
<> |
||||
) |
<Module style={style} title={"可绿化里程统计"}> |
||||
|
|
||||
|
<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 ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
} |
} |
||||
export default LeftCenter |
export default LeftCenter |
||||
Loading…
Reference in new issue