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