如何在echarts中显示求和堆栈条
[英]How to display sum stack bar in echarts
问题描述
I'm using eChatrs as chart library. 
我正在使用eChatrs作为图表库。 Needed chart should look like this : 所需的图表应如下所示：
What i need, is to show totals above each column. 我需要的是在每列上方显示总计。 What is the best practise for doing this ? 最佳做法是什么？
1 个解决方案
解决方案1
2 已采纳 2018-12-18 07:45:18
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. 这是实现此目的的一个技巧：使用空白序列显示总价值。
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] }, { 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.