208 lines
4.0 KiB
JavaScript
208 lines
4.0 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 x = [
|
||
"2025-06-02 15:00:00",
|
||
"2025-06-02 16:00:00",
|
||
"2025-06-02 17:00:00",
|
||
"2025-06-02 18:00:00",
|
||
"2025-06-02 19:00:00",
|
||
"2025-06-02 20:00:00",
|
||
"2025-06-02 21:00:00",
|
||
"2025-06-03 01:00:00",
|
||
"2025-06-03 02:00:00",
|
||
"2025-06-03 04:00:00",
|
||
"2025-06-03 06:00:00",
|
||
"2025-06-03 08:00:00",
|
||
"2025-06-03 10:00:00",
|
||
"2025-06-03 12:00:00",
|
||
"2025-06-03 13:00:00",
|
||
"2025-06-03 14:00:00"
|
||
]
|
||
const y = [
|
||
100000,
|
||
90000,
|
||
110000,
|
||
100000,
|
||
90000,
|
||
70000,
|
||
90000,
|
||
100000,
|
||
120000,
|
||
110000,
|
||
100000,
|
||
110000,
|
||
120000,
|
||
110000,
|
||
130000,
|
||
140000
|
||
]
|
||
|
||
|
||
|
||
const AreaDrpChart = ({index}) => {
|
||
|
||
|
||
|
||
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',
|
||
icon:'circle',
|
||
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轴文字颜色
|
||
},
|
||
formatter: val => val.substr('2020-10-14 '.length, 5),
|
||
// 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: '实际产水',
|
||
nameTextStyle: {
|
||
color: '#B9BFC9',
|
||
fontSize: 10,//10,
|
||
padding: [0, 0, 0, -40],//[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,
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '实际产水',
|
||
type: 'line',
|
||
barWidth: 10,
|
||
data: y.map((item)=>item*index),
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#32e1b5'
|
||
},
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#bbb',
|
||
// fontSize: 12,
|
||
// textShadowBlur: 4,
|
||
// textShadowColor: '#6ab',
|
||
// },
|
||
},
|
||
{
|
||
name: '设计产能',
|
||
type: 'line',
|
||
barWidth: 10,
|
||
showSymbol: false,
|
||
data: y.map((item)=>100000),
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#f19932'
|
||
},
|
||
},
|
||
// 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);
|