当前位置：首页 > news >正文

echarts多stack的legend点选

news 2025/8/5 16:05:38

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);
});