echarts 堆叠柱状图顶部显示总和

方法一：

series: [{

        name: "one",    //完成,

        type: 'bar',

        barMaxWidth: 50,    //最大宽度

        stack: 'sum',

        itemStyle: {

            normal: {

                color: '#15c7bd'

            }

        },

        data: data1

    },

    {

        name: "two",    //未完成

        type: 'bar',

        stack: 'sum',

        itemStyle: {

            normal: {

                color: '#999999'

            }

        },

        data: data2

    },

    {

        name: '总数',    // 总数显示，生成一个总数的柱状图，将颜色设为透明，        

        type: 'bar',     // label将位置设备内部底部，造成一个总数显示在

        stack: 'sum',    // 柱状图上方的假象

        label: {

            normal: {

                offset: ['50', '80'],

                show: true,

                position: 'insideBottom',

                formatter: '{c}',         // 显示的总数

                textStyle: { color: '#000' }

            }

        },

        itemStyle: {

            normal: {

                color: 'rgba(128, 128, 128, 0)'      // 柱状图颜色设为透明

            }

        },

        data: data3

    }]

效果如下：

 

 

 

有个问题，虽然实现了效果，但是柱状图只是透明，而实际上还在，导致了y轴自适应的坐标为最大值的2倍，不是很好

网上找了优化的方法，试了一下，有一定效果但是不知道是不是我的问题，还是有问题，写出来大家参考一下

优化方法一：该方法会把原先的坐标给拉长两倍，即会有一半的区域是空白的没有图像的。比如，原先的总和是100，现在再加上一个100，就是一共200的刻度了。可以使用缩进，使图表整体向上（横向则是向右）缩进50%。对应的设置项是

 

 

 效果如下：

 

 

 

方法二：

　原理：在原本堆叠的柱状图的旁边，再起一个总和的柱形，显然这个柱形和原本的柱形的高度是相同的，然后我们将其平移（barGap: '-100%'），使其与原本的柱形重合，这样，最终的效果就是一个柱形了，高度也不会加倍。

　　优化：对于echarts的渲染，我们知道，是根据配置项绘制的canvas，而绘制的顺序就是我们代码书写的顺序。也就是说，如果我们将总和放在后边，那么就会是总和的柱形覆盖原本的柱形，原本柱形的颜色就看不到了。解决办法有2个：

　　1.将总和放在前边绘制，使用堆叠来覆盖总和的柱形；

　　2.总和在后边，设置总和的柱形的颜色为透明（同第一种方法中的设置）。

　　除此之外，对于总和文字的显示，如果我们设置显示在外部，那么就可能会出现超出可见区域的现象，处理方法同第一种方案中，调整grid。另外，对于总和的label和原始数据的label，要设置不同的position来避免重叠。如果想要总和看起来明显一些，可以给　　　　      总和的柱形添加一个border。对于数据个数比较多又容易出现0导致重叠的问题，可以采用下边的0不显示或者如果position已经没办法比较重叠时，可以使用拼接换行符、值先按比例放大以扩大图形争取到空间，在显示文字的时候再按同比例缩小以争取现在来解决。

series: [{
        name: "one",//完成,
        type: 'bar',
        barMaxWidth: 50,//最大宽度
        stack: 'sum',
        itemStyle: {
            normal: {
                color: '#15c7bd'
            }
        },
        data: data1
    },
    {
        name: "two",//未完成
        type: 'bar',
        stack: 'sum',
        itemStyle: {
            normal: {
                color: '#999999'
            }
        },
        data: data2
    },
    {
        name: '总数',
        type: 'bar',
        barGap: '-100%',         // 左移100%，stack不再与上面两个在一列
        label: {
            normal: {
                show: true,
                position: 'top',       //  位置设为top
                formatter: '{c}',
                textStyle: { color: '#000' }
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(128, 128, 128, 0)'    // 仍为透明
            }
        },
        data: data3
    }]

就是新增一总数列，上面放一个label显示总数，position设为top,再左移，由于颜色为透明，因此不会覆盖原有的，当然如果放在完成，已完成的前面，颜色可以不为透明

效果图如下：

 

 可以·看到，有效果，但是有个问题是我的x轴不是固定的，柱状图宽度会随着数量多少进行改变，所以需要把柱状图设为固定宽度，所以这种方法也不适合我，当然由于是找的方法，所以我也没仔细研究，应该可以优化

方法三：

series: [{
        name: "one",//完成,
        type: 'bar',
        barMaxWidth: 50,//最大宽度
        stack: 'sum',
        itemStyle: {
            normal: {
                color: '#15c7bd'
            }
        },
        data: data1
    },
    {
        name: "two",//未完成
        type: 'bar',
        stack: 'sum',
        itemStyle: {
            normal: {
                color: '#999999'
            }
        },
        data: data2
    },
    {
        name: '总数',
        type: 'bar',
        stack: 'sum',    // 与上面为一列
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: '{c}',
                textStyle: { color: '#000' }
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(128, 128, 128, 0)'
            }
        },
        data: [["1", 0], ["2", 0], ["3", 0], ["4", 0], ["5", 0], ["6", 0], ["7", 0], ["8", 0], ["9", 0], ["10", 0], ["11", 0], ["12", 0]]          // 数据默认值为0
    }
    ]
    // 使用刚指定的配置项和数据显示图表。
    var series = option["series"];
    var fun = function (params) {
        var data4 = 0;
        for (var i = 0, l = series.length; i < l; i++) {
            data4 += series[i].data[params.dataIndex]
        }
        return data4
    }
    //加载页面时候替换最后一个series的formatter
    series[series.length - 1]["label"]["normal"]["formatter"] = fun

解释一下，将总数一列所有数据设为0（根据x轴参数，这里只是举例，写死了各项数据），然后采用function给每一项赋值，替换fomatter

 

 这里的数据由于项目上的数据是字符串，转一下就好了，同时我的数据中已经有了总数，所以数据有些对不上，但是方法是可行的

方法四

由方法三启示得来的，既然可以方法四重新赋值，那么干脆直接给未完成重新赋值一个label为总数，去掉总数这一列

用echarts中label的formatter属性就可以实现了，formatter采用回调函数的格式，有一个参数是params，这是个对象，有一个指向当前数据索引的dataIndex属性，根据这个属性可以找到堆积柱状图中的数据

series: [{
        name: "one",//完成,
        type: 'bar',
        barMaxWidth: 50,//最大宽度
        stack: 'sum',
        itemStyle: {
            normal: {
                color: '#15c7bd'
            }
        },
        data: data1
    },
    {
        name: "two",//未完成 
        type: 'bar',
        stack: 'sum',
        label: {
            normal: {       // 重写未完成label，通过计算属性重新给formatter赋值，返回
                show: true,   // 计算的总数
                position: 'top',
                formatter: function (params) {
                    return params.value + data1[params.dataIndex]
                },
                textStyle: { color: '#000' }
            }
        },
        itemStyle: {
            normal: {
                color: '#999999'
            }
        },
        data: data2
    }
    ]

 4个方法中，个人感觉第4中方法比较便捷，第三中方法比较实用。