效果图：
讯享网

核心代码：

<script type="text/javascript"> var myChart = echarts.init(document.getElementById('app')) function Rendering(lineColor,lsiltObject,lwaterObject,textObject,modes,tiems){ let lsiltList = [] //渲染含沙量过程线特征值max、min let lwaterList = [] //渲染水位过程线特征值max、min lsiltObject.markPoint.forEach(i => { lsiltList.push({ name: i.formatter, coord: [i.coordX, i.coordY], symbol: 'path://M255.872 512h597.V128H255.872v384zM256 597.v384H170.V42.h768v554.H256z', symbolSize: 40, symbolKeepAspect: true, }) }) lwaterObject.markPoint.forEach(i => { lwaterList.push({ name: i.formatter, coord: [i.coordX, i.coordY], symbol: 'path://M255.872 512h597.V128H255.872v384zM256 597.v384H170.V42.h768v554.H256z', symbolSize: 40, symbolKeepAspect: true, }) }) let grid = { left: 100, right: 100, } let yAxis = { type: 'value', onZero: false, axisTick: { // 隐藏刻度线 show: false }, axisLine: { //轴线 show: true, lineStyle: { color: '#666' } }, splitLine: { show: true, lineStyle: { color: '#666', width: 0.5, } }, minorTick: { splitNumber: 10 }, minorSplitLine: { show: true, lineStyle: { color: '#ccc', width: 0.5, type: 'solid' } } } let xAxis = { data: tiems, type: 'category', // 坐标轴类型 boundaryGap: false, axisTick: { show: false }, // 是否显示坐标轴刻度 axisLine: { //轴线 show: false, lineStyle: { color: '#666' } }, splitLine: { show: true, interval: 59, lineStyle: { while: 0.5, color: ['#666', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd' ], opacity: 1 } } } let xAxisAxisLabel = { interval: 0, rotate: 0, // 倾斜角度 fontSize: 12, formatter: function(val, index) { let vals = val.split("-")[1] if (tiems.length - 1 == index) { return 24 } if (vals % (60 * 6) == 0) { return vals / 60 } } } let graphicStyle = { fill: '#333', width: 20, overflow: 'break', fontSize: 24, textAlign: 'center' } let series = { type: 'line', smooth: false, // symbol: 'none', connectNulls: true, lineStyle: { width: 0.5 }, itemStyle: { borderWidth: 0 }, } var option = { color: lineColor, graphic: { elements: [{ type: 'text', z: 100, left: 10, top: '25%', style: { ...graphicStyle, text: '含沙量', fontSize: 22, } }, { type: 'text', z: 100, left: 10, top: '27.5%', style: { ...graphicStyle, textAlign: 'left', width: 100, text: '(kg/m³)', fontSize: 14, } }, { type: 'text', z: 100, left: 10, bottom: '25%', style: { ...graphicStyle, text: '水位', fontSize: 22, } }, { type: 'text', z: 100, left: 10, bottom: '24.5%', style: { ...graphicStyle, textAlign: 'left', width: 80, text: '(m)', fontSize: 14, } }, { type: 'text', z: 100, right: 45, top: '7%', style: { ...graphicStyle, text: `${textObject.bsnm} ${textObject.hnnm}` } }, { type: 'text', z: 100, right: 45, top: '33%', style: { ...graphicStyle, text: textObject.label } }, { type: 'text', z: 100, right: 45, top: '45%', style: { ...graphicStyle, text: textObject.date + '逐时水位含沙量过程线' } }, { type: 'text', z: 100, right: 60, top: '65%', style: { ...graphicStyle, fontSize: 18, text: '绘图 年 月 日' } }, { type: 'text', z: 100, right: 20, top: '65%', style: { ...graphicStyle, fontSize: 18, text: '校对 年 月 日' } }, { type: 'text', z: 100, right: 20, bottom: '4.5%', style: { ...graphicStyle, fontSize: 18, text: '共 页 第 页' } }, { type: 'text', z: 100, right: 60, bottom: '4.5%', style: { ...graphicStyle, fontSize: 18, text: '年 月 日' } }, { type: 'text', z: 100, right: 60, bottom: '20%', style: { ...graphicStyle, fontSize: 18, text: '翻阅' } }, ] }, tooltip: { show: false, trigger: 'axis', axisPointer: { animation: false }, formatter: function(params) { let name = params[0].name.split('-') let time = `${name[0]} ${String(name[1]/60).split(".")[0]}:${name[1]%60}<br/>` let arr = `${time}<br/>` params.forEach(i => { arr += `${i.marker} ${i.seriesName}：${i.data}<br/>` }) return arr } }, grid: [{ ...grid, top: '5%', height: '11.1%' }, { ...grid, top: '16.1%', height: '27.75%' }, { ...grid, top: '43.85%', height: '14.8%' }, { ...grid, top: '58.65%', height: '27.75%' }, { ...grid, top: '86.4%', height: '11.1%' }, ], axisPointer: { link: [{ xAxisIndex: [0, 2, 4, 5, 6] }] }, toolbox: { feature: { saveAsImage: { pixelRatio: 1, name: textObject.date+'逐时水位含沙量过程线', } } }, // x轴的数据 xAxis: [{ ...xAxis, gridIndex: 1, position: 'top', offset: 320, axisLabel: { show: true, ...xAxisAxisLabel }, }, { data: modes, gridIndex: 1, axisLabel: { interval: 0, fontSize: 14, color: '#333' }, position: 'top', offset: 340, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用 type: 'category', // 坐标轴类型 axisTick: { show: false }, // 是否显示坐标轴刻度 axisLine: { show: false, }, // 是否显示坐标轴轴线 }, { ...xAxis, gridIndex: 3, offset: 320, axisLabel: { show: true, ...xAxisAxisLabel }, }, { data: modes, gridIndex: 3, axisLabel: { interval: 0, fontSize: 14, color: '#333' }, position: 'bottom', offset: 340, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用 type: 'category', // 坐标轴类型 axisTick: { show: false }, // 是否显示坐标轴刻度 axisLine: { show: false, }, // 是否显示坐标轴轴线 }, { ...xAxis, gridIndex: 0, axisLabel: { show: true, ...xAxisAxisLabel, formatter: '' }, }, { ...xAxis, gridIndex: 2, axisLabel: { show: true, ...xAxisAxisLabel, formatter: '' }, }, { ...xAxis, gridIndex: 4, axisLabel: { show: true, ...xAxisAxisLabel, formatter: '' }, } ], yAxis: [{ gridIndex: 1, max: lsiltObject.max, min: lsiltObject.min, interval: (lsiltObject.max - lsiltObject.min) / 15, axisLabel: { formatter: function(value) { if (value >= 0) { if (value >= 100) { return Math.floor(value) } else if (value >= 10) { if (Number.isInteger(value)) { return value + '.0' } if (String(value).split(".")[1].length == 1) { return value } else { return Math.floor(value * 10) / 10 } } else if (value >= 1) { if (Number.isInteger(value)) { return value + '.00' } if (String(value).split(".")[1].length == 1) { return value + '0' } if (String(value).split(".")[1].length == 2) { return value } else { return Math.floor(value * 100) / 100 } } else { if (Number.isInteger(value)) { return value + '.000' } if (String(value).split(".")[1].length == 1) { return value + '00' } if (String(value).split(".")[1].length == 2) { return value + '0' } if (String(value).split(".")[1].length == 3) { return value } else { return Math.floor(value * 1000) / 1000 } } } else { return '' } } }, ...yAxis }, { gridIndex: 3, max: lwaterObject.max, min: lwaterObject.min, interval: (lwaterObject.max - lwaterObject.min) / 15, axisLabel: { formatter: function(value) { var value = Math.round(parseFloat(value) * 100) / 100; var s = value.toString().split("."); if (s.length == 1) { value = value.toString() + ".00"; return value; } if (s.length > 1) { if (s[1].length < 2) { value = value.toString() + "0"; } return value; } } }, ...yAxis }, { gridIndex: 0, max: 0, min: 6, interval: 1, axisLabel: { formatter: '' }, ...yAxis }, { gridIndex: 2, max: 0, min: 8, interval: 1, axisLabel: { formatter: '' }, ...yAxis }, { gridIndex: 4, max: 0, min: 6, interval: 1, axisLabel: { formatter: '' }, ...yAxis }, ], series: [{ name: '逐时含沙量过程线', data: lsiltObject.data, yAxisIndex: 0, xAxisIndex: 0, ...series, markPoint: { symbolKeepAspect: true, symbolOffset: [15, '-50%'], label: { formatter: function(params) { return params.data.name }, offset: [0, -7], color: '#000' }, data: [ ...lsiltList, ] } }, { name: '逐时水位过程线', data: lwaterObject.data, yAxisIndex: 1, xAxisIndex: 2, ...series, markPoint: { symbolKeepAspect: true, symbolOffset: [15, '-50%'], label: { formatter: function(params) { return params.data.name }, offset: [0, -7], color: '#000' }, data: [ ...lwaterList, ] } } ] } myChart.setOption(option); } //折线颜色 let color=['#00f', '#f00'] //含沙量月数据 let lsiltObject={ data:[],//集合 max:'15',//y轴最大值 min:'0',//y轴最小值 markPoint:[],//特征值数据 } //水位月数据 let lwaterObject={ data:[],//集合 max:'15',//y轴最大值 min:'0',//y轴最小值 markPoint:[],//特征值数据 } //右侧文本 let textObject={ bsnm:'流域',//流域名称 hnnm:'水系',//水系名称 label:'站点',//站点名称 date:'2023年1月',//当前报表的年月份 } //x轴日（统一默认31天） let modes = []; //x轴分钟（以小时展示） let tiems = []; for (let i = 0; i < 31; i++) { modes.push(i + 1) for (let j = 0; j < 60 * 24; j++) { tiems.push(`${i+1}-${j}`) } } tiems.push(`31-1440`) //模拟折线数据 function randomSum(){ return Math.round(Math.random()*15); } tiems.forEach((i,index)=>{ if(index%1000===0){ lwaterObject.data.push(randomSum()) lsiltObject.data.push(randomSum()) }else{ lwaterObject.data.push(null) lsiltObject.data.push(null) } }) lwaterObject.data.pop() lsiltObject.data.pop() lwaterObject.data.push(randomSum()) lsiltObject.data.push(randomSum()) Rendering(color,lsiltObject,lwaterObject,textObject,modes,tiems) </script>

北京云智乐动科技发展有限公司