338 lines
6.2 KiB
JavaScript
338 lines
6.2 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 = ({tab}) => {
|
|||
|
|
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"
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
let y = []
|
|||
|
|
|
|||
|
|
const y1 = [
|
|||
|
|
134.15,
|
|||
|
|
134.14,
|
|||
|
|
134.23,
|
|||
|
|
134.23,
|
|||
|
|
134.22,
|
|||
|
|
134.32,
|
|||
|
|
134.32,
|
|||
|
|
134,
|
|||
|
|
133.99,
|
|||
|
|
133.79,
|
|||
|
|
133.77,
|
|||
|
|
133.77,
|
|||
|
|
133.67,
|
|||
|
|
133.78,
|
|||
|
|
133.67,
|
|||
|
|
133.67
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const y2 = [
|
|||
|
|
134.23,
|
|||
|
|
134.23,
|
|||
|
|
134.22,
|
|||
|
|
134.32,
|
|||
|
|
134.32,
|
|||
|
|
134,
|
|||
|
|
133.99,
|
|||
|
|
133.79,
|
|||
|
|
134.15,
|
|||
|
|
134.14,
|
|||
|
|
133.77,
|
|||
|
|
133.77,
|
|||
|
|
133.67,
|
|||
|
|
133.78,
|
|||
|
|
133.67,
|
|||
|
|
133.67
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const y3 = [
|
|||
|
|
|
|||
|
|
133.77,
|
|||
|
|
133.67,
|
|||
|
|
133.78,
|
|||
|
|
133.67,
|
|||
|
|
133.67,
|
|||
|
|
134.15,
|
|||
|
|
134.14,
|
|||
|
|
134.23,
|
|||
|
|
134.23,
|
|||
|
|
134.22,
|
|||
|
|
134.32,
|
|||
|
|
134.32,
|
|||
|
|
134,
|
|||
|
|
133.99,
|
|||
|
|
133.79,
|
|||
|
|
133.77,
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const y4 = [
|
|||
|
|
134.15,
|
|||
|
|
134.14,
|
|||
|
|
134.23,
|
|||
|
|
133.67,
|
|||
|
|
133.67,
|
|||
|
|
134.23,
|
|||
|
|
134.22,
|
|||
|
|
134.32,
|
|||
|
|
134.32,
|
|||
|
|
134,
|
|||
|
|
133.99,
|
|||
|
|
133.79,
|
|||
|
|
133.77,
|
|||
|
|
133.77,
|
|||
|
|
133.67,
|
|||
|
|
133.78,
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
if(tab==='生态'){
|
|||
|
|
y = y1
|
|||
|
|
}else if(tab==='灌溉'){
|
|||
|
|
y = y2
|
|||
|
|
}else if(tab==='发电'){
|
|||
|
|
y = y3
|
|||
|
|
}else{
|
|||
|
|
y = y4
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// valueFormatter: (value) => value + ' 万m³'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: 42,
|
|||
|
|
left: 50,
|
|||
|
|
right: 20,
|
|||
|
|
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: '流量m³/s',
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
min: 133,
|
|||
|
|
max: 135,
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// type: 'value',
|
|||
|
|
// position: 'right',
|
|||
|
|
// name: '流量m³/s',
|
|||
|
|
// 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,
|
|||
|
|
// },
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 30,
|
|||
|
|
// }
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '流量',
|
|||
|
|
type: 'line',
|
|||
|
|
barWidth: 10,
|
|||
|
|
data: y,
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#32e1b5'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// position: 'top',
|
|||
|
|
// color: '#bbb',
|
|||
|
|
// fontSize: 12,
|
|||
|
|
// textShadowBlur: 4,
|
|||
|
|
// textShadowColor: '#6ab',
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// yAxisIndex: 1,
|
|||
|
|
// name: '入库流量',
|
|||
|
|
// type: 'line',
|
|||
|
|
// barWidth: 10,
|
|||
|
|
// showSymbol: false,
|
|||
|
|
// data: y1,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// color: '#f19932'
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// // label: {
|
|||
|
|
// // show: true,
|
|||
|
|
// // position: 'top',
|
|||
|
|
// // color: '#bbb',
|
|||
|
|
// // fontSize: 12,
|
|||
|
|
// // textShadowBlur: 4,
|
|||
|
|
// // textShadowColor: '#6ab',
|
|||
|
|
// // },
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// yAxisIndex: 1,
|
|||
|
|
// name: '出库流量',
|
|||
|
|
// type: 'line',
|
|||
|
|
// barWidth: 10,
|
|||
|
|
// showSymbol: false,
|
|||
|
|
// data: y2,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// color: '#e1554e'
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// // 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);
|