‘lijianhao’
3 years ago
7 changed files with 261 additions and 34 deletions
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 373 B |
@ -1,30 +1,222 @@ |
|||
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 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}> |
|||
<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> |
|||
], |
|||
// globalCoord: false,
|
|||
}; |
|||
}, |
|||
barBorderRadius: 70, |
|||
borderWidth: 0, |
|||
borderColor: "#333", |
|||
}, |
|||
}, |
|||
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 |
|||
Loading…
Reference in new issue