172 lines
3.5 KiB
JavaScript
172 lines
3.5 KiB
JavaScript
import React, { useMemo } from 'react';
|
||
import echarts from 'echarts/lib/echarts';
|
||
import ReactEcharts from 'echarts-for-react';
|
||
|
||
|
||
const pallete = [
|
||
['#177ab3', '#51c3e7'],
|
||
['#9976dc', '#c792ee'],
|
||
['#94a1eb', '#a7caf8'],
|
||
['#7ae5c3', '#c9f4ea'],
|
||
['#c7dca5', '#f5fcd5'],
|
||
['#7988d9', '#9dc6f1'],
|
||
['#d9ed8f', '#d3f89b'],
|
||
];
|
||
|
||
const palleteLen = pallete.length;
|
||
|
||
|
||
const AreaDrpChart = () => {
|
||
const x = ['清泉水厂','南湖水厂','东郊水厂','西山水厂']
|
||
const y1 = [612, 601, 630, 640]
|
||
const y2 = [624, 645, 665, 656]
|
||
|
||
|
||
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
valueFormatter: (value) => value + ' 万m³'
|
||
},
|
||
grid: {
|
||
top: 42,
|
||
left: 50,
|
||
right: 0,
|
||
bottom: 27,
|
||
},
|
||
legend: {
|
||
data: ['设计产能', '实际产水'],
|
||
top: '8',
|
||
left: 'center',
|
||
itemWidth: 11,//11,
|
||
itemHeight: 11,//11,
|
||
textStyle: {
|
||
color: '#B9BFC9',
|
||
fontSize: 12,//12
|
||
}
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: x,
|
||
splitLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.2)',
|
||
width: 0
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#B9BFC9' //X轴文字颜色
|
||
},
|
||
// rotate: 20, // 角度值：Number
|
||
fontSize: 10,//10
|
||
},
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.2)',
|
||
width: 0
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
position: 'left',
|
||
name: '产水量m³',
|
||
nameTextStyle: {
|
||
color: '#B9BFC9',
|
||
fontSize: 10,//10,
|
||
padding: [0, 0, 0, -30],//[0, 0, 0, -30]//控制y轴标题位置
|
||
},
|
||
nameGap: 17,
|
||
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: 'rgba(255,255,255,0.2)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#B9BFC9',
|
||
fontSize: 11,//11
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
min: 200,
|
||
max: 800,
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '设计产能',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
data: y1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#56b38b'
|
||
},
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#bbb',
|
||
// fontSize: 12,
|
||
// textShadowBlur: 4,
|
||
// textShadowColor: '#6ab',
|
||
// },
|
||
},
|
||
{
|
||
name: '实际产水',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
data: y2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#3860d0'
|
||
},
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#bbb',
|
||
// fontSize: 12,
|
||
// textShadowBlur: 4,
|
||
// textShadowColor: '#6ab',
|
||
// },
|
||
}
|
||
]
|
||
};
|
||
|
||
return (
|
||
<ReactEcharts
|
||
option={option}
|
||
style={{ height: '99%', width: '100%' }}
|
||
/>
|
||
)
|
||
}
|
||
|
||
export default React.memo(AreaDrpChart);
|