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

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;
				for (let i = 0; i < _series.length; i++) {
					total += _series[i].data[idx]
				}
				return Math.round(total / 1000) / 10 + '万';
			}
		}
	}	
	_series.push(lastRow);

如果需要点击每次点击legend都重新计算,要在最后添加点击响应

//legend点击事件,根据传过来的obj.selected得到状态是true的legend对应的series的下标,再去计算总和
	myChart.on("legendselectchanged", function(obj) {
		var b = obj.selected
		let d = [];
		//console.log(JSON.stringify(b))
		for (var key in b) {
			if (b[key]) {
				d.push(key);
			}
		}
		//console.log(d)		
		//确定那个serier是最后一个
		let lastName = d[d.length - 1]
		let idx = _legend.indexOf(lastName);

		//清理可能存在的旧label
		for (var i = 0; i < _series.length; i++) {
			if(_series[i].hasOwnProperty("label")){				
				_series[i].label.normal.show=false;				
			}
		}
		_series[idx].label = {
			"normal": {
				show: true,
				position: 'top',
				"formatter": function(params) {
					let idx = params.dataIndex;
					let total = 0;
					for (let i = 0; i < _series.length; i++) {
						let name = _series[i].name;
						if (d.indexOf(name) >= 0) {//累加有显示的
							total += _series[i].data[idx]
						}
					}
					return Math.round(total / 1000) / 10 + '万';
				}
			}
		}		
		option.series=_series;
		myChart.setOption(option);
	})
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页