echarts仪表盘指针颜色根据数值区间变化

echarts yekong

echarts渲染仪表盘的时候,需要让仪表盘的指针颜色根据数值区间动态变化。

drawEcharts() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts)

      var color;
      if (this.heduanSum >= 90 && this.heduanSum <= 100) {
        color = '#00b4ff'; // RHI 在 90 到 100 之间
      } else if (this.heduanSum >= 75 && this.heduanSum < 90) {
        color = '#95c751'; // RHI 在 75 到 90 之间
      } else if (this.heduanSum >= 60 && this.heduanSum < 75) {
        color = '#fffa04'; // RHI 在 60 到 75 之间
      } else if (this.heduanSum >= 40 && this.heduanSum < 60) {
        color = '#ffa400'; // RHI 在 40 到 60 之间
      } else if (this.heduanSum < 40) {
        color = '#ff0101'; // RHI 小于 40
      }
      
      var option = {
        series: [
          {
            name: '内层数据刻度',
            type: 'gauge',
            radius: '120%',
            min: 0,
            max: 100,
            startAngle: 220, //开始刻度的角度
            endAngle: -40, //结束刻度的角度
            splitNumber: 5,
            center: ['50%', '58%'],
            axisLine: {
              lineStyle: {
                width: 0,
                color: [
                  [20, "rgba(0, 132, 255, 1.00)"],
                  [40, "rgba(21, 253, 250, 1.00)"],
                  [60, "rgba(47, 233, 146, 1.00)"],
                  [80, "rgba(222, 116, 30, 1.00)"],
                  [100, "rgba(218, 57, 95, 1.00)"],
                ],
              }
            },
            splitLine: {
              length: 0,
              lineStyle: {
                width: 0,
                color: '#ffffff'
              }
            },
            axisTick: {
              lineStyle: {
                width: 0,
                color: '#ffffff'
              }
            },
            axisLabel: {
              color: 'rgb(0,191,255)',
              distance: 10,
              fontSize: 10,
              show: false
            },
            detail: {
              show: false,
              formatter: "{value}%",
              offsetCenter: ['0', '50%'],
              fontSize: 16,
              color: color
            },
            itemStyle: {
              normal: {
                color: color
              }
            },
            pointer: {
              width: 3,
              length: '90%',
              itemStyle: {
                color: color // 设置指针颜色为 #3ce6fd
              }
            },
            data: [{
              value: this.heduanSum
            }],
            silent: false
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢