echarts多stack的legend点选

echarts支持点击legend,实现显示和隐藏legend对应的数据,具体就是option里series里,name为legend值的数据。
如果配置了多个stack,那么可能你可能设置了多组legend,你点选的是多个legend组中的某组中的一个,那么如果不做额外处理的话,只有该组关联的stack才会由于你的点选显示或者隐藏该legend对应的数据,而其他的stack不受影响,你可能以为这样就正常,没有什么毛病。其实再多想一下或者看实际的echarts图,你就会发现问题的。
数据集中,数据是可以按不同的属性分组,以属性A分组,可以得到一组数据,对其进行处理后,可以组成stackA需要的数据,属性A的值是legendA数组;以属性B分组,可以得到另一组数据,对其进行处理后,可以组成stackB需要的数据,属性B的值是legendB数组。。。
假如属性C是数值,也是我们要在echarts中展示的数据,我们知道stackA和stackB的数组虽然不尽相同,但是他们的合计,也就是属性C在不同分组情况下的累计应该是相同的,具体表现就是两个柱子的高度应该是一样的。但是你点击的legend标签是legendA组的,那么stackB是不会变化的,同样点击的legend标签是legendB组的,那么stackA也是不会变化的。
那么怎样才能产生一致性的变化呢?简单的说,就是需要对legendselectchanged这个事件进行额外处理,事件处理中,识别点击的legend和判断它的值是true还是false,然后从原数据集中筛选出属性是该值的数据,然后对非它所属的legend组对应的stack进行分组统计,并且对上一张显示图的当前stack数据进行数据的差量变化操作(true就要加,false就要减)。这样就能把点击legend带来的影响施加到不是它所属的legend组对应的stack上了。
下面是一个例程,以数据集中数据的两个属性route和dept分两次分统计

myChart.on('legendselectchanged', obj=> {
	let aggr1;
	let opa;
	let index;
	if (routes.find(item1=>(item1==obj.name))==undefined) { 
		aggr1=aggr.filter(itm=>(itm.dept==obj.name));
		let routeg1=Object.groupBy(aggr1, ({ route }) => route);
		let routes1=Object.keys(routeg1)
		routes1.forEach(item=>{
			let routeser11= new Array(xlen).fill(0);
			if (routeg1[item]!=undefined) routeg1[item].forEach(itm=>{ routeser11["time"]+=itm.apls;  })
			opa=seriesdata.find(itm=>((itm.name==item)&&(itm.stack=="route"))).data;
			for (index=0;index<xlen;index++) {
				if (obj.selected[obj.name]) { opa[index]+=routeser11[index]; }
				else { opa[index]-=routeser11[index]; }
				}
			});
		};
	if (depts.find(item1=>(item1==obj.name))==undefined) { 
		aggr1=aggr.filter(itm=>(itm.route==obj.name));
		let deptg1=Object.groupBy(aggr1, ({ dept }) => dept);
		let depts1=Object.keys(deptg1)
		depts1.forEach(item=>{
			let deptser11= new Array(xlen).fill(0);
			if (deptg1[item]!=undefined) deptg1[item].forEach(itm=>{ deptser11["item"]+=itm.apls;  })
			opa=seriesdata.find(itm=>((itm.name==item)&&(itm.stack=="dept"))).data;
			for (index=0;index<xlen;index++) {
				if (obj.selected[obj.name]) { opa[index]+=deptser11[index]; }
				else { opa[index]-=deptser11[index]; }
				}
			});
		};
	option.series=seriesdata;
	myChart.setOption(option);
});

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值