209 lines
4.3 KiB
JavaScript
209 lines
4.3 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import echarts from 'echarts/lib/echarts';
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import { hdyjColor } from '../../../../utils/renutils';
|
|
|
|
const Hd24H = ({ data, st}) => {
|
|
const option = useMemo(() => {
|
|
|
|
const serialData = [
|
|
[
|
|
"2025-05-21 15:00:00",
|
|
133.58
|
|
],
|
|
[
|
|
"2025-05-21 17:00:00",
|
|
133.58
|
|
],
|
|
[
|
|
"2025-05-21 18:00:00",
|
|
133.58
|
|
],
|
|
[
|
|
"2025-05-21 19:00:00",
|
|
133.56
|
|
],
|
|
[
|
|
"2025-05-21 20:00:00",
|
|
133.6
|
|
],
|
|
[
|
|
"2025-05-21 21:00:00",
|
|
133.59
|
|
],
|
|
[
|
|
"2025-05-21 22:00:00",
|
|
133.6
|
|
],
|
|
[
|
|
"2025-05-22 02:00:00",
|
|
133.63
|
|
],
|
|
[
|
|
"2025-05-22 03:00:00",
|
|
133.64
|
|
],
|
|
[
|
|
"2025-05-22 04:00:00",
|
|
133.65
|
|
],
|
|
[
|
|
"2025-05-22 05:00:00",
|
|
133.65
|
|
],
|
|
[
|
|
"2025-05-22 06:00:00",
|
|
133.66
|
|
],
|
|
[
|
|
"2025-05-22 07:00:00",
|
|
133.66
|
|
],
|
|
[
|
|
"2025-05-22 09:00:00",
|
|
133.67
|
|
],
|
|
[
|
|
"2025-05-22 11:00:00",
|
|
133.68
|
|
],
|
|
[
|
|
"2025-05-22 12:00:00",
|
|
133.68
|
|
]
|
|
];
|
|
|
|
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
x: 24,
|
|
y: 24,
|
|
x2: 38,
|
|
y2: 32,
|
|
borderWidth: 0
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'time',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#bbb',
|
|
fontSize: 9,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
// formatter: val => val.substr('2020-10-14 '.length, 2)
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.5,
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
position: 'right',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#07a6ff',
|
|
width: 0.25,
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#bbb',
|
|
fontSize: 10,
|
|
textShadowBlur: 4,
|
|
textShadowColor: '#6ab',
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
min: 133,
|
|
max: 134,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '供水量',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: serialData,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1,
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(3, 194, 236, 0.3)'
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(3, 194, 236, 0)'
|
|
}
|
|
], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#03C2EC'
|
|
}
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
|
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
|
|
]
|
|
},
|
|
// markLine: {
|
|
// silent: true,
|
|
// symbol: 'none',
|
|
// label: {
|
|
// position: 'start',
|
|
// formatter: (p) => p?.name + ' ' + p?.value,
|
|
// },
|
|
// data: markLine
|
|
// }
|
|
}
|
|
]
|
|
};
|
|
}, [data, st]);
|
|
|
|
return (
|
|
<ReactEcharts
|
|
option={option}
|
|
style={{ height: '100%', width: '100%', overflow: 'hidden' }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Hd24H);
|