如何在ECharts仪表盘图表中按条件改变部分进度条颜色

要实现数值超过200时，200到当前值的进度弧段显示为绿色，其余部分为灰色，你可以通过叠加两个仪表盘系列来分别控制不同区间的颜色——单个progress无法直接实现分段效果。以下是修改后的代码：

var value = 210;
option = {
  series: [
    // 灰色进度：0到200（或实际值，当值<=200时）
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 240,
      splitNumber: 12,
      progress: {
        show: true,
        width: 18,
        itemStyle: {
          color: "#999"
        }
      },
      pointer: {
        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
        length: '75%',
        width: 16,
        offsetCenter: [0, '5%'],
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        distance: 30,
        color: '#999',
        fontSize: 20
      },
      title: { show: false },
      detail: {
        rich: {
          value: {
            fontSize: 50,
            fontWeight: 'bolder',
            color: '#777'
          },
          unit: {
            fontSize: 20,
            color: '#999',
            padding: [0, 0, -20, 10]
          }
        }
      },
      data: [
        {
          value: value > 200 ? 200 : value
        }
      ]
    },
    // 绿色进度：200到当前值（仅当值>200时显示）
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 200,
      max: 240,
      splitNumber: 12,
      progress: {
        show: value > 200,
        width: 18,
        itemStyle: {
          color: "#23d935"
        }
      },
      pointer: { show: false }, // 隐藏指针，避免重复
      axisLine: { show: false }, // 隐藏轴线，使用第一个系列的轴线
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      title: { show: false },
      detail: { show: false },
      offsetCenter: [0, 0], // 和第一个系列重合
      data: [
        {
          value: value > 200 ? value : 200
        }
      ]
    }
  ]
};

关键修改说明 #

• 第一个系列：负责0到200（或实际值，当值≤200时）的灰色进度，当数值超过200时，其进度停在200位置。
• 第二个系列：仅在数值超过200时显示，负责200到当前值的绿色进度，隐藏了指针、刻度、轴线等元素，仅保留进度条，并且通过offsetCenter: [0, 0]与第一个系列完全重合。
• 两个系列的进度条宽度保持一致，确保视觉上无缝衔接。

内容的提问来源于stack exchange，提问作者Hawacodes