option = { title: { x: 'left', padding: [28, 0, 0, 10], text: '11-09', textStyle: {//设置主标题的文字风格 color: "rgba(165,166,166,1)", //字体颜色 fontSize: 13, //文字大小 opacity: 0.9 }, }, grid: [ { top: '17%', left: 90, right: 90, height: '36%' }, { top: '60%', left: 90, right: 90, height: '36%' } ], axisPointer: { type: 'shadow', link: { xAxisIndex: 'all' }, }, tooltip: { trigger: 'axis', axisPointer: { // 设置指示线 type: 'line', // 默认为直线，可选为：'line' | 'shadow' lineStyle: { color: '#8C8C8C', type: [4.5, 5], //设置折线类型 dashOffset: 5, width: 2, } }, transitionDuration: 0, confine: true, borderRadius: 2, borderWidth: 0, backgroundColor: 'rgba(149,149,149,0.15)', backdropFilter: 'brightness(80%) blur(4px)', borderColor: 'rgba(149,149,149,0.8)', textStyle: { fontSize: 14, color: 'blue' }, formatter: function (param) { let data = param.filter(item => item.data !== '-' && item.name) data = data.filter((item, i) => data.findIndex(x => x.seriesName === item.seriesName) === i) const dataIndex = param[0].dataIndex return ` ` } }, xAxis: [ { data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'], boundaryGap: false, min: 0, axisLine: { show: true, }, position: 'top', axisTick: { show: false, }, axisLabel: { margin: 80, show: true, textStyle: { color: 'rgba(165,166,166,1)', fontSize: '12', }, }, }, { gridIndex: 1, data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'], boundaryGap: false, min: 0, axisLabel: { show: false }, axisLine: { show: false, }, position: 'top', axisTick: { show: false, } } ], yAxis: [ { gridIndex: 0, name: '热耗：GJ/h', nameGap: '25', offset: 20, nameTextStyle: { padding: [0, 55, 5, 0], color: 'blue', fontSize: '14', opacity: 0.7, align: 'center' }, nameLocation: 'end', position: 'left', axisTick: { show: false }, splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(52,52,52,1)' } }, axisLine: { show: false, }, axisLabel: { show: true, showMinLabel: false, textStyle: { color: 'rgba(165,166,166,1)', fontSize: '14', } }, }, { gridIndex: 0, nameGap: '25', name: '流量：T/h', offset: 20, nameTextStyle: { padding: [0, 55, 5, 0], color: 'blue', fontSize: '14', opacity: 0.7, align: 'center' }, nameLocation: 'end', position: 'right', type: 'value', axisTick: { show: false }, splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(52,52,52,1)' } }, axisLine: { show: false, }, axisLabel: { show: true, showMinLabel: false, textStyle: { color: 'rgba(165,166,166,1)', fontSize: '14', } }, }, { gridIndex: 1, name: '室外温度/°C', nameGap: '25', offset: 20, nameTextStyle: { padding: [0, 55, 5, 0], color: 'blue', fontSize: '14', opacity: 0.7, align: 'center' }, nameLocation: 'end', position: 'left', axisTick: { show: false }, splitLine: { show: true, lineStyle: { type: 'dashed', color: 'rgba(52,52,52,1)' } }, axisLine: { show: false, }, axisLabel: { show: true, showMinLabel: true, textStyle: { color: 'rgba(165,166,166,1)', fontSize: '14', } }, }, ], series: [ { name: '实际热耗', type: 'line', showSymbol: false, data: [ 0, 0, 0, 319.22, 370.62, 368.28, 357.57, "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-" ], xAxisIndex: 0, yAxisIndex: 0, lineStyle: { normal: { "type": "solid", "width": 2 } }, color: 'red' }, { name: '实际热耗', type: 'line', showSymbol: false, data: [ "-", "-", "-", "-", "-", "-", 357.57, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null ], xAxisIndex: 0, yAxisIndex: 0, lineStyle: { normal: { "type": "dashed", "width": 2 } }, color: 'red' }, { name: '预测热需', type: 'line', showSymbol: false, data: [ 0, 0, 0, 1124.88, 1294.97, 1260.76, 1252.96, "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-" ], xAxisIndex: 0, yAxisIndex: 1, lineStyle: { "type": "solid", "width": 2 }, color: "rgba(255,191,0,1)" }, { name: '预测热需', type: 'line', showSymbol: false, data: [ "-", "-", "-", "-", "-", "-", 1252.96, 1269.05, 1270.77, 1270.77, 1270.77, 1270.77, 1270.77, 1270.77, 1270.77, 1310.73, 1314.98, 1314.98, 1314.98, 1314.98, 1314.98, 1314.98, 1314.98, 1182.6, 1168.52 ], xAxisIndex: 0, yAxisIndex: 1, lineStyle: { "type": "dashed", "width": 2 }, color: "rgba(255,191,0,1)", }, { name: '室外温度', type: 'line', showSymbol: false, "markPoint": { "symbol": "none", "symbolOffset": [ 0, 15 ], "label": { "color": "#aaa" }, "data": [ { "type": "min", "name": "最小值", "label": {}, "emphasis": { "label": {} } } ], "emphasis": { "label": {} } }, data: [ -14.4, -14.4, -14.4, -14.4, -14.4, -14.4, -14.4, "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-" ], xAxisIndex: 1, yAxisIndex: 2, color: "rgba(0,207,163,1)", }, { name: '室外温度', type: 'line', showSymbol: false, "markPoint": { "symbol": "image://", "symbolOffset": [ 0, 15 ], "label": { "color": "#aaa" }, "data": [ { "type": "min", "name": "最小值", "label": {}, "emphasis": { "label": {} } } ], "emphasis": { "label": {} } }, data: [ "-", "-", "-", "-", "-", "-", -14.4, -14.85, -14.9, -14.9, -14.9, -14.9, -14.9, -14.9, -14.9, -16.17, -16.3, -16.3, -16.3, -16.3, -16.3, -16.3, -16.3, -12.41, -12 ], xAxisIndex: 1, yAxisIndex: 2, color: 'rgba(0,207,163,1)', "lineStyle": { "width": 2, "type": "dashed" }, }, ] }

Echarts在线免费图表