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

总和"/>

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已经没办法比较重叠时，可以使用拼接换行符、值先按比例放大以扩大图形争取到空间，在显示文字的时候再按同比例缩小以争取现在来解决。

（参考了博客.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',       //  位置设为topformatter: '{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的formatterseries[series.length - 1]["label"]["normal"]["formatter"] = fun

解释一下，将总数一列所有数据设为0（根据x轴参数，这里只是举例，写死了各项数据），然后采用function给每一项赋值，替换fomatter,参考博客，详细看原博客，试过，可行，另一个类似的博客

.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}]

效果如下

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