Echarts横向堆叠柱状右边显示合计内容

ECharts是一个非常强大的数据可视化库，用于创建交互式的图表。如果你想在横向堆叠的柱状图中，在每个柱子右侧显示累计值或者总计，你可以利用ECharts的组合系列（stacked bar series）以及工具箱（toolbox）的功能。

首先，你需要设置柱状图为横向堆叠模式，这可以通过`stack`属性来实现，例如：

option = {
  xAxis: { // 横坐标配置
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: { // 纵坐标配置
    type: 'value'
  },
  series: [{
    name: 'Series 1', // 列名
    type: 'bar', // 类型为柱状图
    stack: 'total', // 设置堆叠
    data: [5, 20, 36, 10, 10] // 数据数组
  }, {
    name: 'Series 2', // 另一列名
    stack: 'total',
    data: [2, 18, 9, 4, 8]
  }],
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  tooltip: { // 工具提示
    trigger: 'axis',
    axisPointer: { type: 'line' }
  }
};

然后，为了在每个柱子的右边展示总和，你可以自定义一个额外的数据项，并在`onAfterRender`回调里添加计算好的累计值。ECharts本身并没有直接提供这个功能，所以需要手动做一些处理。

function updateTotalSum(chart) {
  let sum = chart.series[0].data.reduce((a, b) => a + b, 0);
  let totalDataItem = { value: sum };
  chart.setOption({
    series: [
      ...chart.getOption().series,
      { // 新增的数据项
        name: '累计值',
        type: 'bar',
        stack: 'total',
        data: [totalDataItem],
        silent: true, // 避免绘制到图上
        itemStyle: { normal: { color: '#ccc' } } // 设置颜色
      }
    ]
  });
}

chart.on('afterrender', updateTotalSum);

以上代码会在每次渲染后更新累积值。不过需要注意的是，ECharts并不支持在同一个柱状图实例中动态修改系列数据，所以在实际应用中，你可能需要维护一个外部的数据结构并定期同步到图表上。