echarts 根据自己的需求展示显示区域

项目中遇到一个问题，一个数量段显示一个颜色，指针也跟着变化，然后研究了一下，保存下来，方便以后使用，也给大家提供一个方案

<div style="width: 250px; height: 250px"  id="gaugeEchart"></div>


function auto(){
 let myChart = this.$echarts.init(document.getElementById("gaugeEchart"));
  let value = 1.354
    let colorList = ["#35a81e", "#50d866", "#eaea0c", "#ea970e", "#f03119"];
      let color = value;
      let color = colorList [0]
      if (value >= 1.3 && value < 1.6) {
        color = colorList [1];
      } else if (value >= 1.6 && value < 1.9) {
        color = colorList [2];
      } else if (value >= 1.9 && value < 2.2) {
        color = colorList [3];
      } else if (value >= 2.2) {
        color = colorList [4];
      }
      let option =  optionFn(value, color)
      myChart.setOption(option);
      myChart.resize();
   
    }

  function optionFn(val,color) {
      return {
        tooltip: {
          show: false
        },
        series: [
          {
            // name: '温度',
            type: "gauge",
            radius: "130%",
            center: ["50%", "70%"],
            startAngle: 180, //刻度起始
            endAngle: 0, //刻度结束
            min: 1,
            max: 2.5,
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [
                  [0.2, "#35a81e"],
                  [0.4, "#50d866"],
                  [0.6, "#eaea0c"],
                  [0.8, "#ea970e"],
                  [1, "#f03119"]
                ]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            pointer: {
              width: "6%",
              length: "60%",
              color: "red"
            },
            detail: {
              offsetCenter: ["-20%", "-50%"],
              textStyle: {
                fontWeight: "100",
                fontSize: 14,
                color: color
              }
            },

            data: val
          },
          {
            // name: '1212',
            type: "gauge",
            radius: "90%",
            center: ["50%", "70%"],
            startAngle: 180, //刻度起始
            endAngle: 0, //刻度结束
            min: 1,
            max: 2.5,
            z: -1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 10,
                shadowBlur: 20
              }
            },
            axisTick: {
              show: 0
            },
            splitLine: {
              show: 0
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                show: false
              }
            ]
          }
        ]
      };
    },