echarts 仪表盘刻度线随进度条改变颜色

示例图

option = {
          series: [
              // 最小
              {
                  type: 'gauge',
                  radius: '15%', // 位置
                  center: ['50%', '60%'],
                  min: 0,
                  max: 100,
                  startAngle: 180,
                  endAngle: 0,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          // 轴线样式
                          width: 120, // 宽度
                          opacity: 0.4,
                          color: [
                              [1, 
                              new echarts.graphic.RadialGradient(0.5, 1, 1, [
                                      {
                                          offset: 0.8,
                                          color: 'rgba(106, 205, 255, 0.2600)',
                                      },
                                      {
                                          offset: 0.3,
                                          color: 'rgba(106, 205, 255, 0)',
                                      },
                                  ])],
                          ], // 颜色
                      },
                  },
                  axisTick: {
                      // 刻度
                      show: false,
                  },
                  splitLine: {
                      // 分割线
                      show: false,
                  },
                  axisLabel: {
                      // 刻度标签
                      show: false,
                  },
                  pointer: {
                      // 仪表盘指针
                      show: false,
                  },
                  detail: {
                      // 仪表盘详情
                      show: false,
                  },
            },
            // 双刻度 数字
            {
              type: 'gauge',
              center: ['50%', '60%'],
              radius: "30%",
              startAngle: 210,
              endAngle: -30,
              min: 0,
              max: 100,
              splitNumber: 10,
              itemStyle: {
                color: 'rgba(107, 205, 255, 0.2)'
              },
              progress: {
                show: true,
                width: 9
              },
              pointer: {
                show: true,
                width: 3,
                length: '70%',
                itemStyle: {
                  // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                  color: new echarts.graphic.LinearGradient(
                      0, 1, 0, 0,
                      [
                        {offset: 1, color: 'rgba(106, 205, 255, 1)'},
                        {offset: 0, color: 'rgba(106, 205, 255, 0)'}
                      ]
                  )
                }
              },
              axisLine: {
                lineStyle: {
                  width: 0,
                  opacity: 0,
                  color: [
                    [0.26, 'rgba(107, 205, 255, 1)'], // 进度色
                    [1, 'rgba(216, 216, 216, 1)'], // 背景色
                  ]
                }
              },
              axisTick: {
                distance: -11,
                splitNumber: 5,
                lineStyle: {
                  width: 1,
                  color: 'auto'
                }
              },
              splitLine: {
                distance: -9,
                length: 6,
                lineStyle: {
                  width: 1,
                  color: 'auto'
                }
              },
              axisLabel: {
                distance: -24,
                color: 'rgba(187, 235, 255, 1)',
                fontSize: 12
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 20,
                borderRadius: 8,
                fontSize: 15,
                fontWeight: 'bolder',
                formatter: '{value} 次',
                color: 'rgba(167, 229, 255, 1)'
              },
              data: [
                {
                  value: 26
                }
              ]
            }, 
            // 细线背景板
            {
              type: 'gauge',
              center: ['50%', '60%'],
              radius: "30%",
              startAngle: 210,
              endAngle: -30,
              min: 0,
              max: 100,
              progress: {
                show: false,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [
                    [0.1, '#2E3756'], // 0~10% 红轴
                    
                    [1, '#2E3756'], // 20~30% 蓝轴
                  ]
                }
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                show: false
              },
              data: [
                {
                  value: 26
                }
              ]
            },
            // 细线
            {
              type: 'gauge',
              center: ['50%', '60%'],
              radius: "30%",
              startAngle: 210,
              endAngle: -30,
              min: 0,
              max: 100,
              itemStyle: {
                color: '#6FCDFF'
              },
              progress: {
                show: true,
                width: 3
              },
              pointer: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              detail: {
                show: false
              },
              data: [
                {
                  value: 26
                }
              ]
            }
          ]
};