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);
|