ECharts堆叠柱状图label显⽰总和Echarts本⾝没提供现成的解决⽅案。
option = {
title: {
text: '分类销量'
},
legend: {
y: "bottom",
data: ['百货', '电⼦', '服装']
},
xAxis: [
{
type: "category",
data: [
20190612,
20190613,
20190614,
20190615
]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "百货",
type: "bar",
stack: "1",
data: [
10,
14,
17,
8
],
},
{
name: "电⼦",
type: "bar",
stack: "1",
data: [
16,
12,
9,
22
]
},
{
name: "服装",
type: "bar",
stack: "1",
data: [
18,
8,
13,
20
],
label: {
show: true,
position: 'top',
color: 'black',
formatter: function (params){
return params.value
}
}
}
]
}
思路: 将最后⼀类的label⽤formatter函数处理为总和。
js处理将fun绑定到最后⼀个series上
var series = option["series"];
var fun = function (params) {
var datavalue = 0;
for (var i = 0; i < series.length; i++) {
datavalue += series[i].data[params.dataIndex]
}
return datavalue;
}
setoption
series[series.length - 1]["label"]["formatter"] = fun;
⼀般的⽅案到这⾥就结束了，忽略了ECharts的图例选择取消功能，如果user将最后⼀个图例做取消显⽰时就会存在问题，所以还需要进⼀步处理
<("legendselectchanged", function (obj) {
var b = obj.selected, d = [];
for (var key in b) {
if (b[key]) {
for (var i = 0, l = series.length; i < l; i++) {
var changename = series[i]["name"];
if (changename == key) {
d.push(i);
}
}
}
}
var fun = function (params) {
var datavalue = 0;
for (var i = 0; i < d.length; i++) {
for (var j = 0; j < series.length; j++) {
if (d[i] == j) {
datavalue += series[j].data[params.dataIndex]
}
}
}
return datavalue
}
for (var i = 0; i < series.length; i++) {
series[i]["label"]["show"] = false;
}
for (var i = series.length - 1; i >= 0; i--) {
var name = series[i]["name"];
if (obj["selected"][name]) {
series[i]["label"]["formatter"] = fun
series[i]["label"]["show"] = true
break;
}
}
myChart.setOption(option);
})
效果: