如何在ECharts Gauge中实现类似堆叠柱状图的双数值堆叠效果？

完全可以用ECharts纯实现你要的堆叠式数值展示效果，这里提供两种适配你需求的方案：

方案一：基于Gauge组件的分段进度实现 #

利用Gauge组件的axisLine.color配置，直接将进度条分为已完成、已计划两段，视觉上模拟堆叠效果，同时支持自定义最大值为21：

// 示例参数：已完成10，已计划8，最大值21
const completed = 10;
const scheduled = 8;

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180, // 配置为半圆仪表盘，可按需调整角度范围
      endAngle: 0,
      min: 0,
      max: 21,
      radius: '75%',
      axisLine: {
        lineStyle: {
          width: 20,
          // 按数值占比定义分段颜色：已完成→已计划→剩余空白
          color: [
            [completed / 21, '#5470c6'],
            [(completed + scheduled) / 21, '#91cc75'],
            [1, '#f0f0f0']
          ]
        }
      },
      pointer: { show: false }, // 隐藏指针，仅保留进度条
      progress: {
        show: true,
        width: 20,
        clip: true
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        fontSize: 12,
        distance: 5
      },
      title: {
        fontSize: 16,
        offsetCenter: [0, '30%'],
        name: '任务进度'
      },
      detail: {
        fontSize: 24,
        offsetCenter: [0, '10%'],
        formatter: `${completed}+${scheduled}`
      },
      data: [{ value: completed + scheduled }]
    }
  ]
};

这种方案复用Gauge组件的原生仪表盘样式，适合需要保留刻度、标题等元素的场景。

方案二：基于径向柱状图的堆叠配置 #

你之前尝试的径向柱状图并非只能做360度，通过设置polar的角度范围，可实现半圆的堆叠径向柱状，完全匹配堆叠逻辑：

// 示例参数：已完成10，已计划8，最大值21
const completed = 10;
const scheduled = 8;

option = {
  polar: {
    radius: ['40%', '70%'], // 控制柱状图的内外半径
    startAngle: 180, // 起始角度设为180，实现从左向右的半圆
    endAngle: 0
  },
  angleAxis: {
    max: 21,
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: true } // 显示刻度数值
  },
  radiusAxis: {
    type: 'category',
    data: [''], // 仅需一个分类项
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false }
  },
  series: [
    {
      type: 'bar',
      data: [completed],
      stack: 'total', // 开启堆叠模式
      coordinateSystem: 'polar',
      itemStyle: { color: '#5470c6' }
    },
    {
      type: 'bar',
      data: [scheduled],
      stack: 'total',
      coordinateSystem: 'polar',
      itemStyle: { color: '#91cc75' }
    }
  ]
};

这个方案更贴近堆叠柱状图的原生逻辑，两段进度完全独立，适合需要灵活控制每段样式的场景。

两种方案都不需要依赖其他库，纯ECharts即可实现你要的效果。

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