echarts平滑曲线配置

     chartExtend: {
        tooltip: {
          show: true,
          trigger: 'axis',
          extraCssText: 'z-index:99999',
          formatter: function (params) {
            params.sort((firstItem, secondItem) => secondItem.value - firstItem.value);
            let res = ``;
            params.forEach((item, index) => {
              res = item.axisValue
                ? res +
                `<span style="color:black;">${item.data.deviceNumber}|${item.data.deviceName}</span></br><span style="color:black;">${item.axisValue}</span><br/>
        <span style="color:black;">浓度值:</span><span style="color:${item.color
                };">${item.value ? item.value + `% LEL` : `0`}</br>${item.name
                }</span><br/>`
                : res + ``;
            });

            return res;
          },
          borderColor: `#70b603`,
          backgroundColor: 'rgba(250,250,250)',
          axisPointer: {
            type: 'cross',
            lineStyle: {
              // color: `${color}`,
              type: 'solid'
            },
            crossStyle: {
              // color: `${color}`,
              type: 'solid'
            }
          }
        },
        legend: {
          show: true,
          selectedMode: false,
          // right: 55,
          icon: 'none',
          textStyle: {
            fontSize: 14
          },
          data: [
            {
              name: '浓度值'
            }
          ],
          formatter: function (name) {
            return ``;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffff',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#081642'
              }
            },
            data: [
              // '2022年7月1日11:19:50',
              // '2022年7月1日11:16:12',
              // '2022年7月1日11:16:15',
              // '2022年7月1日11:16:19',
            ]
          },
        ],
        yAxis: {
          type: 'value',
          name: '浓度值（% LEL）',
          nameTextStyle: {
            color: '#ffff'
          },
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: '#ffff',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#081642'
            }
          },
        },

        // [        //   {        //     offset: 0,        //     name: '浓度值（% LEL）',        //     type: 'value'        //   }        // ],
        series: [
          // {
          //   name: '1',
          //   type: 'line',
          //   smooth: true,
          //   lineStyle: {
          //     width: 0
          //   },

          //   areaStyle: {
          //     // opacity: 0.8,
          //     // color: '#45abe3'
          //   },
          //   data: [
          //     {
          //       value: 0,
          //       itemStyle: {
          //         color: '#7f7f7f'
          //       },
          //       name: '设备离线'
          //     },
          //     {
          //       value: 220,
          //       name: '二级泄露',
          //       itemStyle: {
          //         color: '#f59a23'
          //       }
          //     },
          //     {
          //       value: 120,
          //       itemStyle: {
          //         color: '#70b603'
          //       },
          //       name: '正常'
          //     },
          //     {
          //       value: 320,
          //       itemStyle: {
          //         color: '#d9001b'
          //       },
          //       name: '一级泄露'
          //     }
          //   ]
          // },
          // {
          //   name: '2',
          //   type: 'line',
          //   smooth: true,
          //   lineStyle: {
          //     width: 0
          //   },
          //   areaStyle: {
          //     // opacity: 0.8,
          //     // color: 'rgba(242,178,178,1)'
          //   },
          //   data: [
          //     {
          //       value: 820,
          //       itemStyle: {
          //         color: '#d9001b'
          //       },
          //       name: '一级泄露'
          //     },
          //     {
          //       value: 11,
          //       name: '二级泄露',
          //       itemStyle: {
          //         color: '#f59a23'
          //       }
          //     },
          //     {
          //       value: 5,
          //       itemStyle: {
          //         color: '#70b603'
          //       },
          //       name: '正常'
          //     },
          //     {
          //       value: 33,
          //       itemStyle: {
          //         color: '#70b603'
          //       },
          //       name: '一级泄露'
          //     }
          //   ]
          // }
        ]
      },

请求函数

  const { data: { isSuccess, data } } = await monitoringCenterApi.queryReportWithinAnHour({ customerCode })
  if (!isSuccess || data.length === 0) {
    this.$nextTick(() => {
      let html =
        '<div><span  style="position: absolute;top: 40%;left:50%;transform: translateX(-50%);color:#ffff; font-size: 14px;">暂无数据</span></div>'
      this.$refs.chart.innerHTML = html
      this.$refs.chart.removeAttribute('_echarts_instance_')
    })
    return
  }