如何修改Apache ECharts速度表（speedometer）图表的指针颜色

ECharts 仪表盘（gauge，即你说的速度表）的指针样式由series下的pointer配置项控制，你当前的代码没有显式声明该配置，因此指针使用默认样式，直接新增对应配置即可修改颜色。

配置方法 #

在你现有option.series[0]的配置层级（和progress、anchor、detail等属性同级），新增pointer字段，通过itemStyle.color指定你需要的指针颜色即可：

pointer: {
  itemStyle: {
    color: '#你需要的色值'
  }
}

可选扩展配置 #

你也可以在pointer字段下同时调整指针的尺寸、位置属性：

• length：指针长度，支持百分比（相对于仪表盘外半径）、像素值两种写法，默认值为'60%'
• width：指针根部的宽度，单位为像素
• offsetCenter：指针相对于仪表盘中心的偏移量，格式为[水平偏移, 垂直偏移]

修改后的配置示例 #

以你提供的代码为基础，新增指针配置后的核心代码片段如下（原有配置无需改动，仅新增pointer部分即可）：

option = {
  series: [
    {
      type: 'gauge',
      // 新增指针颜色配置
      pointer: {
        itemStyle: {
          color: '#8D7CDB' // 此处示例为和你现有主题匹配的紫色，可按需替换
        }
      },
      progress: {
        show: true,
        width: 18,
        itemStyle: {
          borderWidth: 10,
          color: '#8D7CDB'
        }
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 5,
        lineStyle: {
          width: 1,
          color: '#8D7CDB'
        }
      },
      axisLabel: {
        distance: 25,
        color: '#8D7CDB',
        fontSize: 9
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        color: '#8D7CDB',
        itemStyle: {
          borderWidth: 8,
          borderColor: '#8D7CDB'
        }
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        fontSize: 20,
        color: '#8D7CDB',
        formatter: "{value}%",
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: 5.85
        }
      ]
    }
  ]
};

如果需要针对单个数据点单独设置指针颜色，可以直接在data数组的对应项中配置pointer属性，该配置优先级高于series层级的全局指针配置：

data: [
  {
    value: 5.85,
    pointer: {
      itemStyle: {
        color: '#FF4D4F' // 单个数据点对应的指针颜色
      }
    }
  }
]

内容的提问来源于stack exchange，提问作者Carvel Russ Silvano