echarts 堆叠柱状图 在顶部显示数据总数

项目需求：

        在堆叠柱状图顶部显示该柱条所有数据的总和。

效果图：

代码实现：

//原有堆叠柱状图数据
let series = [
    {
        name: '优秀',
        type: 'bar',
        stack: 'x',
        data: [5,6,10,2],
    },
    {
        name: '良好',
        type: 'bar',
        stack: 'x',
        data: [5,3,6,5],
    },
    {
        name: '及格',
        type: 'bar',
        stack: 'x',
        data: [20,30,40,20],
    },
]

//追加一个series对象
series.push({
    name: '总和',
    type: 'bar',
    stack: 'y',    //注意与前面的stack属性不同！！！！
    data: [30,39,56,27],   //为前面对应数据的总和
    label:{
        normal:{
            show:true,
            position:'top',
            color:'#000'
        }
    },
    barGap:'-100%',  //与堆叠柱条重合
})

 关键点：

（1）新追加的series系列stack属性与前面的数据系列不相同！！（如，前面的系列为x，新追加的为y）

（2）data数组的数据值为前面对应系列数据的总和

（3）lable属性将标签显示在柱条顶部（position：top）

（4）barGap属性：将柱条与堆叠柱条合并（barGap：-100%），隐藏在背后（因为第（1）步骤中的设置会将新系列的柱条单独显示在堆叠柱条的右侧，我们将它左移合并到堆叠柱条的背后）

参考文章