使用echarts做堆叠柱状图，顶部显示总数值的技巧

话不多说，直接进入正题。

比如下图，就是我们要做的结果图：

看到图之后首先想到的是，在拉完接口处理完数据后，肯定需要自己计算一份合计的数值push到series中的最后一条，然后为了防止点击隐藏legend的时候合计数值能准确实时的显示，还需要添加个legendselectchanged事件，事件触发时就处理重新计算合计值的方法。

以上是整体思路，具体怎样实现效果图上的样式，有两种方法：

• 给push的合计对象中添加同样的type: 'bar'，stack: '总量'，设置数值显示在合计柱状图的底部，即position: 'insideBottom'，合计的柱状图设为透明背景
• 设置不同的strack或者strack直接设为空字符串，type同样为bar, 此时合计的柱状图是无法堆叠到最上方的，此时只需要设置barGap: '-100%'即可，但是还要设置合计的柱状图层级z: 0，否则合计的柱状图会覆盖实际的树状图，具体参见echarts官方api

注意：方法一的话会导致y轴数值范围过大，是原来的两倍，图表就会出现上半部分空着的状态，见下图：

因此还要对Y轴的最大值进行动态的控制，比较麻烦。

方法二就比较简单了，一段关键的实现代码如下：

//series中push合计的数据
{
    name: '总计',
    type: 'bar',
    stack: '',
    label: {
        normal: {
            show: true,
            position: 'top',
            color: '#000'
        }
    },
    z: -1,
    //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
    barGap: '-100%',  
    data: totalData
}

下图就是我实际项目中实现的效果图：

以上，个人推荐第二种方法，有什么不对的地方，欢迎指正~