echarts三段渐变色 折线图

更新---------2022.08.09---------

 根据数据本身的值来判断不同区域报警的颜色

drawLineChart1(dateList, lineData0, colorData) {
      var chartDom = document.getElementById("lineChart");
      var myChart = echarts.init(chartDom);
      var option;
      this.clearChart(myChart);
      myChart = echarts.init(document.getElementById("lineChart"));

    //根据数值判断颜色
      var max = Math.max.apply(null, lineData0);
      let colorStops = [];
      if (max >= colorData[2]) {
        colorStops = [
          { offset: 0, color: "#fc0725" },
          { offset: (max - colorData[2]) / max, color: "#fe8e43" },
          { offset: (max - colorData[1]) / max, color: "#e4bf44" },
          { offset: 1, color: "#fff" },
          { offset: 1, color: "transparent" },
        ];
      } else if (max >= colorData[1]) {
        colorStops = [
          { offset: 0, color: "#fe8e43" },
          { offset: (max - colorData[1]) / max, color: "#e4bf44" },
          { offset: 1, color: "#fff" },
          { offset: 1, color: "transparent" },
        ];
      } else if (max >= colorData[0]) {
        colorStops = [
          { offset: 0, color: "#e4bf44" },
          { offset: 1, color: "#fff" },
          { offset: 1, color: "transparent" },
        ];
      } else if (max < colorData[0]) {
        colorStops = [];
      }
      option = {
        grid: {
          x: "4%",
          y: "0",
          width: "84%",
          height: "80%",
          left: 30,
          top: 20,
        },

        legend: {
          top: "0%",
          right: "15%",
        },
        tooltip: {
          trigger: "axis",
          padding: [2, 10],
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: [
          {
            type: "category",
            show: true,
            data: dateList,
          },
        ],
        yAxis: [{ type: "value", z: 3, min: 0, scale: true, show: true }],
        /*
         * 将折线分3端。黄色、橙色、红色
         */
        visualMap: {
          show: false,
          dimension: 1,
          pieces: [
            { gte: 0, lte: colorData[0], color: "rgba(200, 200, 200,1)" },
            {
              gte: colorData[0],
              lte: colorData[1],
              color: "rgba( 228, 191, 68,1)",
            },
            {
              gte: colorData[1],
              lte: colorData[2],
              color: "rgba(254, 142, 67,1)",
            },
            { gte: colorData[2], lte: 100, color: "rgba(252, 7, 37,1)" },
          ],
        },