/** * @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 ` ` } }, 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)

Echarts在线免费图表