Vue3Echarts写关于温湿度统计的好看折线图

在项目统计界面，我们离不开对Echarts的使用，接下来是我在做项目过程中做的一个关于温湿度统计的好看折线图，统计的是温度蓝色和湿度绿色，它们还会有告警和断电，分别用橘黄色和红色区分，以下是示例：

下载Echarts

//npm
npm install echarts --save

//淘宝镜像cnpm(安装速度快)
cnpm install echarts --save

//yarn
yarn add echarts

代码案例

<template>
    <div id="echartsOne" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom = document.getElementById("echartsOne");
        let myChart = echarts.init(chartDom);
        let wsdList = [{
      	createTime: "10:20",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:21",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 1,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:22",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 1,
      	temperature: "28.8",
      }, {
      	createTime: "10:23",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:24",
      	humStatus: 1,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:25",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 1,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:26",
      	humStatus: 1,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      },]
      let rq = []
      rq = wsdList.map(val => {
      	return val.createTime
      })
      let seriesArr = []
      let list = [{
      		name: "温度",
      		children: wsdList.map(val => {
      			let temp0 = val.tempStatus == 0 ? `rgb(68, 247, 227)` : `rgb(240, 128, 19)`;
      			return {
      				name: val.createTime,
      				value: val.isOff == 1 ? 6 : val.temperature,
      				isOff: val.isOff,
      				offTime: val.offTime ? val.offTime : "",
      				itemStyle: {
      					color: {
      						type: 'radial',
      						x: 0.5,
      						y: 0.5,
      						r: 0.5,
      						colorS