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

用echarts实现了一个堆叠图要求能够在每个柱状图上显示总数，参考了网上的一些办法，也踩了一些坑

方法一

代码

series: [{
                    name: n[0],    //完成,
                    type: 'bar',
                    barMaxWidth: 50,    //最大宽度
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],    //未完成
                    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%。对应的设置项是

效果如下

可以看到，问题就是虽然缩进了，但是y轴时不闭合的，实现了效果，但是不完美

方法二：

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

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

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

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

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

（参考了博客https://www.cnblogs.com/ljwsyt/p/9963473.html）

series: [{
                    name: n[0],//完成,
                    type: 'bar',
                    barMaxWidth: 50,//最大宽度
                    stack: 'sum', 
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],//未完成
                    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: n[0],//完成,
                    type: 'bar',
                    barMaxWidth: 50,//最大宽度
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],//未完成
                    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,参考博客https://blog.csdn.net/youyuliu/article/details/83017831，详细看原博客，试过，可行，另一个类似的博客

https://www.cnblogs.com/huaxiaguyuan/p/11097474.html 都可以借鉴

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

 

方法四

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

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

 series: [{
            name: n[0],//完成,
            type: 'bar',
            barMaxWidth: 50,//最大宽度
            stack: 'sum',
            itemStyle: {
                normal: {
                    color: '#15c7bd'
                }
            },
            data: data1
        },
        {
            name: n[1],//未完成 
            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
        }
        ]

效果如下

四种方法，仅供参考，个人感觉方法四较为便捷