如何在echarts中显示求和堆栈条 [英] How to display sum stack bar in echarts
本文介绍了如何在echarts中显示求和堆栈条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用eChatrs作为图表库。所需的图表应如下所示：
I'm using eChatrs as chart library. Needed chart should look like this :
什么我需要的是在每列上方显示总计。最佳做法是什么？
What i need, is to show totals above each column. What is the best practise for doing this ?
推荐答案
您可以使用格式化程序来实现这一点，请查看此演示：
You can use formatter to achieve this, check this demo:
let echartsObj = echarts.init(document.querySelector('#canvas'));
series = [{
name: 'Server #1',
data: [100, 115, 165, 107, 67]
}, {
name: 'Server #2',
data: [85, 106, 129, 161, 123]
}, {
name: 'Server #3',
data: [67, 87, 86, 167, 157]
}]
genFormatter = (series) => {
return (param) => {
console.log(param);
let sum = 0;
series.forEach(item => {
sum += item.data[param.dataIndex];
});
return sum
}
};
option = {
color: ['#b8d6f2', '#c6e19a', '#f3b879' ],
legend: {
data: series.map(item => item.name),
right: 'right',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value'
},
series: series.map((item, index) => Object.assign(item, {
type: 'bar',
stack: true,
label: {
show: index == series.length - 1 ? true : false,
formatter: genFormatter(series),
fontSize: 20,
color: 'black',
position: 'top'
},
}))
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 70%; height: 300px">
</div>
</body>
</html>
但是我们可以看到，该演示仅在每列上方显示总价值。
However, as we can see, this demo only display total value above each column.
如果您想同时获取每个系列的总价值和价值，
if you want both total value and value of each series,
这是达到此目的的一个技巧：使用空白序列显示总价值。
here is a trick to achieve this: use a blank series to display total value.
查看此演示：
let echartsObj = echarts.init(document.querySelector('#canvas'));
series = [{
name: 'Server #1',
data: [100, 115, 165, 107, 67]
}, {
name: 'Server #2',
data: [85, 106, 129, 161, 123]
}, {
name: 'Server #3',
data: [67, 87, 86, 167, 157]
}, {
name: 'Server #3',
data: [0,0,0,0,0]
}]
genFormatter = (series) => {
return (param) => {
console.log(param);
let sum = 0;
series.forEach(item => {
sum += item.data[param.dataIndex];
});
return sum
}
};
function isLastSeries(index) {
return index === series.length - 1
}
option = {
color: ['#b8d6f2', '#c6e19a', '#f3b879' ],
legend: {
data: series.map(item => item.name),
right: 'right',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value'
},
series: series.map((item, index) => Object.assign(item, {
type: 'bar',
stack: true,
label: {
show: true,
formatter: isLastSeries(index) ? genFormatter(series) : null,
fontSize: isLastSeries(index) ? 20 : 15,
color: 'black',
position: isLastSeries(index) ? 'top' : 'inside'
},
}))
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 70%; height: 400px">
</div>
</body>
</html>
这篇关于如何在echarts中显示求和堆栈条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
