如何在Apache ECharts堆叠柱状图实现正负总和分置顶/底显示

问题分析 #

直接通过判断总和正负修改label的position静态属性无效，是因为ECharts静态配置无法针对每个柱子的动态值调整位置，必须使用回调函数实现动态配置。

解决方案 #

核心思路 #

针对堆叠柱状图的总和标签，通过label的position回调函数，根据当前柱子的总和正负动态返回top或bottom，同时可配合offset优化显示位置。

代码修改示例 #

假设你已实现总和计算逻辑（getTotalByIndex为自定义函数，根据数据索引返回对应柱子的总和），修改series的label配置如下：

// 假设你的系列数组为seriesList
const processedSeries = seriesList.map((series, idx) => {
  // 仅在最后一个堆叠系列显示总和（根据你的需求调整）
  if (idx === seriesList.length - 1) {
    return {
      ...series,
      label: {
        show: true,
        // 动态设置标签位置
        position: (params: any) => {
          const total = getTotalByIndex(params.dataIndex);
          return total >= 0 ? 'top' : 'bottom';
        },
        // 调整偏移量，优化标签与柱子的间距
        offset: (params: any) => {
          const total = getTotalByIndex(params.dataIndex);
          return [0, total >= 0 ? -6 : 6];
        },
        formatter: (params: any) => {
          const total = getTotalByIndex(params.dataIndex);
          return total.toString();
        }
      }
    };
  }
  return series;
});

// 将processedSeries传入ECharts的option中
this.chartOption = {
  // 其他配置...
  series: processedSeries
};

备选方案（Rich文本格式） #

如果需要更灵活的样式控制，可使用ECharts的富文本格式，通过自定义样式调整标签位置：

label: {
  show: true,
  position: 'center',
  formatter: (params: any) => {
    const total = getTotalByIndex(params.dataIndex);
    return total >= 0 
      ? `{topLabel|${total}}` 
      : `{bottomLabel|${total}}`;
  },
  rich: {
    topLabel: {
      align: 'center',
      offset: [0, -12]
    },
    bottomLabel: {
      align: 'center',
      offset: [0, 12]
    }
  }
}

关键注意点 #

• 确保getTotalByIndex函数能准确返回每个数据索引对应的堆叠总和值
• 若仅需在特定系列显示总和，需针对性配置该系列的label，避免所有系列都显示重复总和

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