用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
}
]
效果如下
四种方法，仅供参考，个人感觉方法四较为便捷
————————————————
版权声明：本文为CSDN博主「鲤鱼和龙虾」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lxj7607/article/details/100710955
