断电开始时间
${params[0].data.offTime.split(' ')[0]}
${params[0].data.offTime.split(' ')[1]}

` : `

${params[0].data.name}

温度：${params[0].data.value}℃

湿度：${params[1].data.value}%

` } }, legend: { // 图例配置 left: "center", // 图例位置 top: "0%", textStyle: { color: '#fff', // 文字颜色 fontSize: 14, fontWeight: 600 }, data: ["湿度", "温度", "告警", "断电"] // 图例数据 }, grid: { // 网格配置 left: '2%', right: '3%', bottom: '10%', top: '10%', containLabel: true // 包含标签 }, xAxis: [{ type: 'category', // 类别型X轴 data: rq, // X轴数据 axisTick: { show: false // 不显示刻度 }, axisLine: { lineStyle: { color: '#bbdce0' // X轴线颜色 } }, axisLabel: { textStyle: { fontSize: 12, color: "#bbdce0", // 标签颜色 fontWeight: 600 } }, splitArea: { show: true, // 显示分割区域 areaStyle: { color: ["rgba(250,250,250,0.08)", "rgba(250,250,250,0)"] // 分割区域颜色 } } }, { type: 'category', boundaryGap: false, axisLabel: { show: false // 不显示标签 } }], yAxis: [{ name: "(%)", // Y轴名称 type: 'value', // 值轴 splitLine: { show: true, // 显示分割线 lineStyle: { type: "dashed", // 虚线样式 color: ['rgba(58, 129, 132,.6)'] // 分割线颜色 } }, axisTick: { show: false // 不显示刻度 }, axisLine: { show: true, lineStyle: { fontSize: 12, color: '#bbdce0', // 轴线颜色 } }, axisLabel: { textStyle: { fontSize: 12, color: "#bbdce0", // 标签颜色 fontWeight: 600 } }, max: 100 // 最大值 }, { name: "(℃)", // Y轴名称 type: 'value', // 值轴 splitLine: { show: false, lineStyle: { type: "dashed", // 虚线样式 color: ['#39868a'] // 分割线颜色 } }, axisTick: { show: false // 不显示刻度 }, axisLine: { show: true, lineStyle: { fontSize: 12, color: '#bbdce0', // 轴线颜色 } }, axisLabel: { textStyle: { fontSize: 12, color: "#bbdce0", // 标签颜色 fontWeight: 600 } }, max: 60 // 最大值 }], series: [...seriesArr, { // 合并温度和湿度数据系列 name: "告警", // 告警系列 type: 'line', // 图表类型为折线图 data: [], // 数据为空 smooth: false, // 关闭平滑效果 symbolSize: 15, // 数据点大小 symbol: 'circle', // 数据点形状为圆形 showAllSymbol: true, // 显示所有数据点 itemStyle: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: `rgb(240, 128, 19)`, // 告警系列中心颜色 }, { offset: 0.4, color: `rgb(240, 128, 19)`, }, { offset: 0.5, color: '#ffffff00', }, { offset: 1, color: '#ffffff00', }, ], }, borderColor: `rgb(240, 128, 19)`, // 边框颜色 borderWidth: 2, }, label: { show: false // 不显示标签 }, lineStyle: { type: "dashed", // 设置线样式为虚线 color: `rgb(240, 128, 19)`, // 告警系列线颜色 width: 2, } }, { name: "断电", // 断电系列 type: 'line', // 图表类型为折线图 data: [], // 数据为空 smooth: false, // 关闭平滑效果 symbolSize: 15, // 数据点大小 symbol: 'circle', // 数据点形状为圆形 showAllSymbol: true, // 显示所有数据点 itemStyle: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: `rgb(191, 53, 44)`, // 中心颜色 }, { offset: 0.4, color: `rgb(191, 53, 44)`, }, { offset: 0.5, color: '#ffffff00', }, { offset: 1, color: '#ffffff00', }, ], }, borderColor: `rgb(191, 53, 44)`, // 边框颜色 borderWidth: 2, }, label: { show: false // 不显示标签 }, lineStyle: { type: "dashed", // 设置线样式为虚线 color: `rgb(191, 53, 44)`, // 断电系列线颜色 width: 2, } }] };

温湿度趋势折线图