/**
* @author: liuk
* @date: 2024/06/13
* @describe: 洪水预报结果图表
*/
// 最大值是否超出1w
let isWrank = {
value:false
}
// 保留两个小数点
const formatToFixed = (val, fractionDights = 2, emptyStr = '--') => {
switch (typeof val) {
case 'number':
return Number.isNaN(val) || !Number.isFinite(val) ? emptyStr : val.toFixed(fractionDights)
case 'string':
return Number.isNaN(Number(val)) ? emptyStr : Number(val).toFixed(fractionDights)
default:
return emptyStr
}
}
// chartDAta 数据源
const data =[
{
"time": "2024-06-24 10:00",
"historyFlow": 3444.58,
"rainfallValue": 0,
"ddrmflow": 1853.25,
"xajflow": 12225.64,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 11:00",
"historyFlow": 3930.34,
"rainfallValue": 0,
"ddrmflow": 1843.69,
"xajflow": 12225.63,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 12:00",
"historyFlow": 3362.74,
"rainfallValue": 0,
"ddrmflow": 1834.2,
"xajflow": 12225.62,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 13:00",
"historyFlow": 3360.61,
"rainfallValue": 0,
"ddrmflow": 1824.79,
"xajflow": 12225.62,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 14:00",
"historyFlow": 2830.55,
"rainfallValue": 0,
"ddrmflow": 1815.45,
"xajflow": 12225.61,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 15:00",
"historyFlow": 3082.74,
"rainfallValue": 0.636,
"ddrmflow": 1806.19,
"xajflow": 12225.6,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 16:00",
"historyFlow": 3080.86,
"rainfallValue": 2.909,
"ddrmflow": 1797.01,
"xajflow": 12225.59,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 17:00",
"historyFlow": 4720.7,
"rainfallValue": 0.455,
"ddrmflow": 1787.89,
"xajflow": 12225.58,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 18:00",
"historyFlow": 3635.24,
"rainfallValue": 0,
"ddrmflow": 1778.85,
"xajflow": 12225.57,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 19:00",
"historyFlow": 3079.54,
"rainfallValue": 0,
"ddrmflow": 1769.88,
"xajflow": 12225.56,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 20:00",
"historyFlow": 3080.43,
"rainfallValue": 0,
"ddrmflow": 1760.97,
"xajflow": 12225.55,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 21:00",
"historyFlow": 4718.47,
"rainfallValue": 0,
"ddrmflow": 1752.13,
"xajflow": 12225.54,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 22:00",
"historyFlow": 2352.52,
"rainfallValue": 0,
"ddrmflow": 1743.36,
"xajflow": 12225.53,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-24 23:00",
"historyFlow": 4811.8,
"rainfallValue": 0,
"ddrmflow": 1734.65,
"xajflow": 12225.52,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 00:00",
"historyFlow": 3201.2,
"rainfallValue": 0,
"ddrmflow": 1726.01,
"xajflow": 12225.52,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 01:00",
"historyFlow": 3730.35,
"rainfallValue": 0,
"ddrmflow": 1717.44,
"xajflow": 12225.51,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 02:00",
"historyFlow": 3453.15,
"rainfallValue": 0,
"ddrmflow": 1708.92,
"xajflow": 12225.5,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 03:00",
"historyFlow": 3453.29,
"rainfallValue": 0,
"ddrmflow": 1700.47,
"xajflow": 12225.49,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 04:00",
"historyFlow": 2843.81,
"rainfallValue": 0,
"ddrmflow": 1692.08,
"xajflow": 12225.48,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 05:00",
"historyFlow": 2553.9,
"rainfallValue": 0,
"ddrmflow": 1683.75,
"xajflow": 12225.48,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 06:00",
"historyFlow": 3081.99,
"rainfallValue": 0,
"ddrmflow": 1675.48,
"xajflow": 12225.47,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 07:00",
"historyFlow": 2553.98,
"rainfallValue": 0,
"ddrmflow": 1667.27,
"xajflow": 12225.46,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 08:00",
"historyFlow": 3084.67,
"rainfallValue": 0,
"ddrmflow": 1659.11,
"xajflow": 12225.45,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 09:00",
"historyFlow": 3365.2,
"rainfallValue": 0,
"ddrmflow": 1651.01,
"xajflow": 12225.45,
"lstmflow": null,
"siflow": null,
"hdlflow": null
},
{
"time": "2024-06-25 10:00",
"historyFlow": 4446.58,
"rainfallValue": 0,
"ddrmflow": 1642.97,
"xajflow": 12166.14,
"lstmflow": 11884.41,
"siflow": null,
"hdlflow": 12074.39
},
{
"time": "2024-06-25 11:00",
"historyFlow": 3362.15,
"rainfallValue": 0,
"ddrmflow": 1634.98,
"xajflow": 11943.91,
"lstmflow": 12062.49,
"siflow": null,
"hdlflow": 11390.06
},
{
"time": "2024-06-25 12:00",
"historyFlow": 3890.42,
"rainfallValue": 0,
"ddrmflow": 1627.05,
"xajflow": 11431.51,
"lstmflow": 12047.99,
"siflow": null,
"hdlflow": 9737.73
},
{
"time": "2024-06-25 13:00",
"historyFlow": 3917.75,
"rainfallValue": 0,
"ddrmflow": 1619.17,
"xajflow": 10738.36,
"lstmflow": 11865.11,
"siflow": null,
"hdlflow": 7712.81
},
{
"time": "2024-06-25 14:00",
"historyFlow": 3611.12,
"rainfallValue": 0.182,
"ddrmflow": 1611.34,
"xajflow": 10081.21,
"lstmflow": 11809.43,
"siflow": null,
"hdlflow": 6349.83
},
{
"time": "2024-06-25 15:00",
"historyFlow": 3636.52,
"rainfallValue": 0,
"ddrmflow": 1603.57,
"xajflow": 9432.44,
"lstmflow": 11782.19,
"siflow": null,
"hdlflow": 5503.51
},
{
"time": "2024-06-25 16:00",
"historyFlow": 3635.69,
"rainfallValue": 0,
"ddrmflow": 1595.85,
"xajflow": 8768.33,
"lstmflow": 11874.99,
"siflow": null,
"hdlflow": 4919.26
},
{
"time": "2024-06-25 17:00",
"historyFlow": 3883.58,
"rainfallValue": 0,
"ddrmflow": 1588.18,
"xajflow": 8098.2,
"lstmflow": 12365.96,
"siflow": null,
"hdlflow": 4461.01
},
{
"time": "2024-06-25 18:00",
"historyFlow": 3439.34,
"rainfallValue": 4.091,
"ddrmflow": 1580.57,
"xajflow": 7439.04,
"lstmflow": 13039.21,
"siflow": null,
"hdlflow": 4075.74
},
{
"time": "2024-06-25 19:00",
"historyFlow": 3924.95,
"rainfallValue": 3.182,
"ddrmflow": 1573,
"xajflow": 6802.81,
"lstmflow": 13721.37,
"siflow": null,
"hdlflow": 3745.52
},
{
"time": "2024-06-25 20:00",
"historyFlow": 4520.6,
"rainfallValue": 1.091,
"ddrmflow": 1565.49,
"xajflow": 6195.56,
"lstmflow": 14320.67,
"siflow": null,
"hdlflow": 3461.8
},
{
"time": "2024-06-25 21:00",
"historyFlow": 3050.67,
"rainfallValue": 1.636,
"ddrmflow": 1558.02,
"xajflow": 5619.94,
"lstmflow": 14869.67,
"siflow": null,
"hdlflow": 3216.69
},
{
"time": "2024-06-25 22:00",
"historyFlow": 5184.36,
"rainfallValue": 0.091,
"ddrmflow": 1550.61,
"xajflow": 5077.64,
"lstmflow": 15319.12,
"siflow": null,
"hdlflow": 3001.59
},
{
"time": "2024-06-25 23:00",
"historyFlow": 3603.4,
"rainfallValue": 1.727,
"ddrmflow": 1543.24,
"xajflow": 4570.59,
"lstmflow": 15715.34,
"siflow": null,
"hdlflow": 2808.72
},
{
"time": "2024-06-26 00:00",
"historyFlow": 3577.36,
"rainfallValue": 1.6,
"ddrmflow": 1535.92,
"xajflow": 4101.16,
"lstmflow": 15886.55,
"siflow": null,
"hdlflow": 2632.2
},
{
"time": "2024-06-26 01:00",
"historyFlow": 3887.42,
"rainfallValue": 0,
"ddrmflow": 1528.65,
"xajflow": 3671.82,
"lstmflow": 15869.02,
"siflow": null,
"hdlflow": 2466.34
},
{
"time": "2024-06-26 02:00",
"historyFlow": 3584.42,
"rainfallValue": 0,
"ddrmflow": 1521.42,
"xajflow": 3284.44,
"lstmflow": 15961.66,
"siflow": null,
"hdlflow": 2306.68
},
{
"time": "2024-06-26 03:00",
"historyFlow": 4764.15,
"rainfallValue": 0,
"ddrmflow": 1514.25,
"xajflow": 2939.82,
"lstmflow": 16281.06,
"siflow": null,
"hdlflow": 2150.2
},
{
"time": "2024-06-26 04:00",
"historyFlow": 3790.72,
"rainfallValue": 0,
"ddrmflow": 1507.12,
"xajflow": 2637.47,
"lstmflow": 16563.02,
"siflow": null,
"hdlflow": 1995.92
},
{
"time": "2024-06-26 05:00",
"historyFlow": 4346.55,
"rainfallValue": 0,
"ddrmflow": 1500.03,
"xajflow": 2375.7,
"lstmflow": 16941.51,
"siflow": null,
"hdlflow": 1845.13
},
{
"time": "2024-06-26 06:00",
"historyFlow": 4623.62,
"rainfallValue": 0,
"ddrmflow": 1493,
"xajflow": 2151.76,
"lstmflow": 17223.58,
"siflow": null,
"hdlflow": 1699.26
},
{
"time": "2024-06-26 07:00",
"historyFlow": 4624.6,
"rainfallValue": 0,
"ddrmflow": 1486.01,
"xajflow": 1962.22,
"lstmflow": 17209.76,
"siflow": null,
"hdlflow": 1560.36
},
{
"time": "2024-06-26 08:00",
"historyFlow": 4621.87,
"rainfallValue": 0,
"ddrmflow": 1479.07,
"xajflow": 1803.31,
"lstmflow": 16918.74,
"siflow": null,
"hdlflow": 1433.92
},
{
"time": "2024-06-26 09:00",
"historyFlow": 5150.49,
"rainfallValue": 0,
"ddrmflow": 1472.17,
"xajflow": 1671.17,
"lstmflow": 16404.4,
"siflow": null,
"hdlflow": 1322.28
}
]
// 渲染方法
const renderFn = (option, data) => {
const curForecastTime = '2024-06-25 09:00:00'
const len = data.length // 数据总长度
let curDivisionHourNum = Math.max(data.findIndex(item => +new Date(item.time) === +new Date(curForecastTime)), 0) // 分割线位置
option.legend[0].data = ['雨量1', '水利2', '水利3', '水利4', '水利5', '水利6', '水利7']
option.xAxis[0].data = data.map(item => item.time)
option.yAxis[0].name = isWrank.value ? '流量 万m³/s' : '流量 m³/s'
option.yAxis[1].max = Math.max.apply(null,data.map(item => formatToFixed(item.rainfallValue) || 0)) * 3
option.series[0].data = data.map(item => formatToFixed(item.rainfallValue) || 0)//雨量1
option.series[1].data = data.map(item => formatToFixed(item.historyFlow) || 0)//水利2
option.series[2].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.hdlflow) || 0))//水利3
option.series[3].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.ddrmflow) || 0))//DDRM
option.series[4].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.xajflow) || 0))//水利5
option.series[5].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.siflow) || 0))//水利6
option.series[6].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.lstmflow) || 0))//LSTM
// ------- 虚线
option.series[7].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.hdlflow) || 0)//水利3
option.series[8].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.ddrmflow) || 0)//DDRM
option.series[9].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.xajflow) || 0)//水利5
option.series[10].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.siflow) || 0)//水利6
option.series[11].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.lstmflow) || 0)//LSTM
// ----- 定位分割线
option.series[12].data = new Array(len).fill(0.1)
option.series[12].data[curDivisionHourNum] = 0
option.series[12].markPoint.symbolSize = [1.5, 515]
option.series[12].markPoint.symbolOffset = [0, -257]
// const curHeight = parseInt(window.getComputedStyle(chatDom.value).height)
// switch (true) {
// case curHeight >= 600:
// option.series[12].markPoint.symbolSize = [1.5, 515]
// option.series[12].markPoint.symbolOffset = [0, -257]
// break
// case curHeight > 460:
// option.series[12].markPoint.symbolSize = [1.5, 385]
// option.series[12].markPoint.symbolOffset = [0, -192]
// break
// default:
// option.series[12].markPoint.symbolSize = [1.5, 200]
// option.series[12].markPoint.symbolOffset = [0, -100]
// }
return option
}
console.log(111)
option = {
color: ['rgba(46, 165, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 207, 19, 1)', 'rgba(254, 254, 62, 1)', 'rgba(244, 106, 87, 1)', 'rgba(255, 162, 0, 1)', 'rgba(247, 0, 237, 1)'],
tooltip: {
trigger: 'axis',
padding: [0, 10, 10, 10],
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
formatter: function (param) {
let data = param.filter(item => item.data !== '-' && item.seriesName !== "定位分割线")
data = data.filter((item, i) => data.findIndex(x => x.seriesName === item.seriesName) === i)
return `
<div class="sectionalResultChart-popup">
<p class="top">
<span>${param[0]?.axisValue} </span>
</p>
${
data.map(item => {
let unit
switch (true) {
case ['雨量1'].includes(item.seriesName):
unit = 'mm';
break
default:
unit = 'm³/s'
break
}
return `
<p class="item">
<i class="icon" style="background-color:${item.color}"></i>
<span class="name">${item.seriesName}</span>
<span class="value"><b>${item.data || 0}</b>${item.data !== '--' ? unit : ''}</span>
</p>`
}).join("")
}
</div>
`
}
},
dataZoom: [
{
type: 'inside'
}
],
grid: {
left: 45,
top: 40,
right: 40,
bottom: 40,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(0, 0, 0, 0.1)',
type: 'dashed'
}
}
},
legend: [{
data: [],
top: 5,
icon: 'circle',
textStyle: {
color: '#000'
},
}],
xAxis: [{
type: 'category',
data: ['2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25',],
alignTicks: true,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
splitLine: {
show: false,
lineStyle: {
width: 1,
color: '#eee',
},
},
axisTick: {
alignWithLabel: true,
},
axisLabel: {
margin: 10,
textStyle: {
color: '#eee',
fontSize: 14,
},
formatter: (val) => new Date(val).getHours() +":"+ new Date(val).getMinutes()
},
}],
yAxis: [
{
type: 'value',
name: '流量 m³/s',
axisTick: {
show: false,
},
axisLine: {
show: false,
},
nameTextStyle: {
color: '#000'
},
splitLine: {
show: false
},
axisLabel: {
color: '#000',
formatter: (val) => isWrank.value ? formatToFixed(val / 1e4, 1) : val
},
},
{
type: 'value',
name: '雨量1 mm',
nameLocation: 'start',
inverse: true,
nameTextStyle: {
color: '#000'
},
splitLine: {
show: false
},
axisLabel: {
color: '#000',
},
}
],
series: [
{
name: '雨量1',
type: 'bar',
data: [],
yAxisIndex: 1,
itemStyle: {
borderRadius: [0, 0, 5, 5]
},
},
{
name: '水利2',
smooth: true,
type: 'line',
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
{
name: '水利3',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
{
name: '水利4',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
{
name: '水利5',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
{
name: '水利6',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
{
name: '水利7',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
yAxisIndex: 0,
},
// 虚线 -------------
{
name: '水利3',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
lineStyle: {
type: 'dashed'
},
yAxisIndex: 0,
},
{
name: '水利4',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
lineStyle: {
type: 'dashed'
},
yAxisIndex: 0,
},
{
name: '水利5',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
lineStyle: {
type: 'dashed'
},
yAxisIndex: 0,
},
{
name: '水利6',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
lineStyle: {
type: 'dashed'
},
yAxisIndex: 0,
},
{
name: '水利7',
type: 'line',
smooth: true,
showSymbol: false,
barWidth: '30%',
data: [],
lineStyle: {
type: 'dashed'
},
yAxisIndex: 0,
markLine: {
silent: true,
lineStyle: {
type: 'solid',
color: 'red',
},
data: 2
},
},
//定位分割线 ---------------
{
name: '定位分割线',
smooth: true,
type: 'line',
showSymbol: false,
barWidth: '30%',
color: 'transparent',
data: ['0.1', '0.1', 0.1, 0.1, 0.1, 0.1, 0.1, 0, 0.1],
yAxisIndex: 0,
markPoint: {
symbol: 'rect',
symbolSize: [1.5, 600],
symbolOffset: [0, -215],
data: [
{
type: 'min',
itemStyle: {
color: 'red'
},
label: {
show: true,
color: 'red',
position: 'top',
formatter: '分割时间',
fontSize: 12,
},
emphasis: {
disabled: true
}
},
],
},
},
],
};
renderFn(option,data)