如何在Apache ECharts柱状图中简洁实现百分比展示？

你当前通过双堆叠系列实现了50%半填充、25%四分之一填充的柱状图效果，但完全可以用单系列+基础配置优化来简化实现，不需要额外的透明堆叠系列。

核心优化逻辑 #

把y轴最大值固定为1（对应100%），利用ECharts内置的showBackground属性实现黑色背景柱，单个系列的value直接对应百分比占比，无需额外补全透明柱子。

优化后代码 #

option = {
  xAxis: {
    type: 'category',
    data: ['项1', '项2', '项3'] // 替换为你的实际分类数据
  },
  yAxis: {
    type: 'value',
    max: 1, // 强制y轴范围为0-1，对应0%-100%
    axisLabel: {
      formatter: '{value}%' // 可选：将数值转为百分比显示
    }
  },
  series: [
    {
      type: 'bar',
      barCategoryGap: 15,
      data: [
        { value: 0.05, itemStyle: { color: 'red', borderRadius: 3 } },
        { value: 0.25, itemStyle: { color: 'gray', borderRadius: 3 } },
        { value: 0.5, itemStyle: { color: theme.colors.ups, borderRadius: 3 } }
      ],
      showBackground: true,
      backgroundStyle: {
        color: 'black',
        borderRadius: 3
      }
    }
  ]
};

移除原第二个系列后失效的原因 #

你之前删掉第二个堆叠系列后效果不对，本质是没固定y轴最大值。默认情况下ECharts会根据数据自动计算y轴范围，此时柱子高度只反映自身value的相对大小，而非相对于100%的占比。设置yAxis.max: 1后，柱子高度会直接映射为百分比占比，配合背景柱就能完美实现部分填充效果。

可选优化：样式复用 #

如果需要统一前景柱和背景柱的样式（比如圆角），可以抽离公共配置减少冗余：

const commonBarStyle = { borderRadius: 3 };

// 在series中引用
showBackground: true,
backgroundStyle: {
  color: 'black',
  ...commonBarStyle
},
itemStyle: commonBarStyle

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