echarts绘制条形图-添加总数

echarts绘制条形图-添加总数

提示：这里简述项目相关背景：

echarts绘制条形图遇到的添加总数的问题的笔记整理

echarts的官网实例和文档上都没有对于条形图如何添加总数的描述。

下图是常见的echarts绘制的条形图：

我们的目标是在每行的右侧添加总数，展示每行数值的和

最终效果：

解决方案：

在每个条形后面再加一组数据，值为前面一行堆叠的数据之和，再让此条的背景色透明。然后让文字靠【右】展示，再将数据之和这条数据向左移动与每行x轴为0的位置重合，覆盖掉其他条形，然而因为背景透明，只有文字会在右侧展示，看起来就像总量一样。将此条取消stack设置并barGap: ‘-100%’,此条与前面的条重叠，此时横坐标的长度和间距都会很正常。

{
          name: '总计',
          type: 'bar',
          barGap: '-100%',	//不同系列的柱间距离，'-100%'表示重叠
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter(v) {
                return v.value;
              },
              textStyle: { color: '#000' },
            },
          },
          itemStyle: {
            normal: {
              color: 'rgba(128, 128, 128, 0)',
            },
          },
          data: data4,
        },