echarts bar stack 在顶部显示总数（2021-04更新点击legend重新计算）

最新推荐文章于 2024-04-08 10:54:14 发布

原创

最新推荐文章于 2024-04-08 10:54:14 发布 · 7.2k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Echarts柱状图堆叠图表中实现每个类目顶部显示总数，并详细说明了如何通过点击图例动态更新这些总计值，确保每次点击图例时都能重新计算展示数据。

echarts显示stack总数

基本思路是在插入一个空的数据在最顶上，添加label,通过formatter计算总数。
核心部分。

//在series最后，添加一个空的数据
	let lastRow = {
   
   }
	lastRow.name = "total";
	lastRow.type = "bar";
	lastRow.stack = "quantity"
	lastRow.data = Array(_x.length).fill(0);
	lastRow.label = {
   
   
		normal: {
   
   
			show: true,
			position: 'top',
			formatter: function(params) {
   
    //在最顶上的数据顶部添加格式化的总和
				let idx = params.dataIndex;
				let total = 0