如何在 echarts 堆积条形图顶部添加总和 [根据所选系列更新]
[英]How can I add a sum at the top of an echarts stacked bar chart [which updates based on selected series]
问题描述
There are already answered questions on how to add a 'total' label on top of a stacked bar chart on echarts (eg this one )
已经回答了关于如何在 echarts 的堆积条形图顶部添加“总”label 的问题（例如这个）
However, I also want this total to recalculate when series are selected/deselected using the legend (including if I deselect the final series to which the label is attached in the example below).但是，我还希望在使用图例选择/取消选择系列时重新计算此总数（包括如果我在下面的示例中取消选择 label 附加到的最终系列）。 Is this possible?这可能吗？
Example code from the other question:另一个问题的示例代码：
//example data this.mySeries = [{ name: 'Dataset 1', type: 'bar', stack: 'Stack 1', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Dataset 2', type: 'bar', stack: 'Stack 1', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Dataset 3', type: 'bar', stack: 'Stack 1', data: [820, 932, 901, 934, 1290, 1330, 1320], } ]; //function for formatter genFormatter = (series) => { return (param) => { console.log(param); let sum = 0; series.forEach(item => { sum += item.data[param.dataIndex]; }); return sum } }; //inside your chart options place this series: series.map((item, index) => Object.assign(item, { type: 'bar', stack: true, label: { show: index === series.length - 1, formatter: genFormatter(series), fontSize: 20, color: 'black', position: 'top' }, })),
1 个解决方案
解决方案1
1 已采纳 2020-10-12 10:47:04
Yes, it is possible.对的，这是可能的。 You need to add handler that listen when selected series in the legend changed.您需要添加在图例中选择的系列更改时侦听的处理程序。 See legendselectchanged event.请参阅legendselectchanged事件。
In your event handler, you need to filter which series are selected and recalculate the sum, and then attach the label to the last series.在您的事件处理程序中，您需要过滤选择了哪些系列并重新计算总和，然后将 label 附加到最后一个系列。
In order to attach sum label to the last series, you can create a function like this:为了将总和 label 附加到最后一个系列，您可以像这样创建 function：
const seriesHandler = series => {
return series.map((serie, index) => {
if (index === series.length - 1) {
return {
...serie,
label: {
normal: {
show: true,
position: 'top',
formatter: params => {
let total = 0
series.forEach(s => {
total += s.data[params.dataIndex]
})
return total
}
}
}
}
} else {
return serie
}
})
}
And create legendselectchanged event handler like this:并像这样创建 legendselectchanged 事件处理程序：
const handleLegendSelectChanged = (event, series) => {
const includedSeriesNames = []
for (const [name, value] of Object.entries(event.selected)) {
if (value) {
includedSeriesNames.push(name)
}
}
const includedSeries = series.filter(serie => {
return includedSeriesNames.includes(serie.name)
})
return seriesHandler(includedSeries)
}
Basically it filter which series is shown (included), and attach sum label to the last series.基本上它过滤显示哪个系列（包括），并将总和 label 附加到最后一个系列。
See complete example below:请参阅下面的完整示例：
<:DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height; 100%: margin: 0"> <div id="container" style="height: 100%"></div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts:js" integrity="sha512-5/8+cwsZ4fICxk706J4H0/UMZT2LKivISN26mgN86wCD4AHFvdFOBm/95z3dKLpnaHNzzwKuoBtrbKv+++SLTg==" crossorigin="anonymous"></script> <script type="text/javascript"> const mySeries = [ { name, 'Dataset 1': type, 'bar': stack, 'Stack 1': data, [120, 132, 101, 134, 90, 230, 210] }: { name, 'Dataset 2': type, 'bar': stack, 'Stack 1': data, [220, 182, 191, 234, 290, 330, 310] }: { name, 'Dataset 3': type, 'bar': stack, 'Stack 1': data, [820, 932, 901, 934, 1290, 1330, 1320]; } ]. const seriesHandler = series => { return series,map((serie. index) => { if (index === series.length - 1) { return {..,serie: label: { normal: { show, true: position, 'top': formatter. params => { let total = 0 series.forEach(s => { total += s.data[params,dataIndex] }) return total } } } } } else { return serie } }) } const handleLegendSelectChanged = (event, series) => { const includedSeriesNames = [] for (const [name. value] of Object.entries(event.selected)) { if (value) { includedSeriesNames.push(name) } } const includedSeries = series.filter(serie => { return includedSeriesNames.includes(serie.name) }) return seriesHandler(includedSeries) } const dom = document;getElementById("container"). const myChart = echarts;init(dom): const option = { tooltip: { trigger, 'axis': axisPointer: { type, 'shadow' } }: toolbox: { show, true: orient, 'vertical': left, 'right': top, 'center': feature: { dataView: { show, false: readOnly, false }: magicType: { show, true: type, ['line', 'bar', 'stack', 'tiled'] }: restore: { show, true }: saveAsImage: { show, true } } }: grid: { left, '3%': right, '4%': bottom, '3%': containLabel, true }: yAxis: { type, 'value' }: xAxis: { type, 'category': data, ["Jen\n2018", "Feb\n2018", "Mar\n2018", "Apr\n2018", "May\n2018", "Jun\n2018", "Jul\n2018"] }: legend: { data, ['Dataset 1', 'Dataset 2', 'Dataset 3'] }; };. myChart.setOption({..,option: series. seriesHandler(mySeries) }) myChart,on('legendselectchanged'. event => { myChart:setOption({ series, handleLegendSelectChanged(event, mySeries) }) }) </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.