echarts多stack的legend点选

news/2024/10/10 22:03:37/

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分两次分统计

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

http://www.ppmy.cn/news/1503267.html

相关文章

超声波清洗机买哪款?家庭型超声波清洗机

戴眼镜的朋友应该都知道&#xff0c;眼镜即使是认真清洗过&#xff0c;但是只要自己走动&#xff0c;它就没有不脏的时候。很多不在意的朋友会直接忽视&#xff01;但是眼镜上面的油脂和细菌经过长期的累积&#xff0c;近距离的接触眼部的位置&#xff0c;容易对眼部健康造成威…

我的「Java全栈高级架构师高薪就业课」适合什么样的人群学习?

我的《Java全栈高级架构师高薪就业课》上线了~ 这是一套Java全栈微服务架构、以实战项目驱动的课程&#xff01;包含34个模块&#xff0c;1514课时。对标阿里P7级别技术栈而研发&#xff0c;有着循序渐进的学习体系&#xff0c;助你开启Java进阶之旅。 我的这套《Java全栈高级…

中间件安全:Nginx 解析漏洞测试.

中间件安全&#xff1a;Nginx 解析漏洞测试. Nginx 是一个高性能的 HTTP和 反向代理服务器&#xff0c;Nginx 解析漏洞是一个由于配置不当导致的安全问题&#xff0c;它不依赖于Nginx或PHP的特定版本&#xff0c;而是由于用户配置错误造成的。这个漏洞允许攻击者上传看似无害的…

URL重写

目录 步骤1 规则语法 Nginx URL重写规则语法 Apache URL重写规则语法 步骤2 规则配置 Apache URL重写规则配置 启用mod_rewrite模块 配置.htaccess文件 编写重写规则 测试重写规则 Nginx URL重写规则配置 配置server或location块 测试重写规则 步骤1 规则语法 Ngin…

【Maven】 的继承机制

Maven是一个强大的项目管理工具&#xff0c;主要用于Java项目的构建和管理。它以其项目对象模型&#xff08;POM&#xff09;为基础&#xff0c;允许开发者定义项目的依赖、构建过程和插件。Maven的继承机制是其核心特性之一&#xff0c;它允许子项目继承和复用父项目的配置&am…

多态、接口、类练习题

代码&#xff1a; public static void main(String[] args) {Person2 personnew Person2("唐僧",new Horse());person.passRiver();person.onRoad();} 接口&#xff1a; interface Vehicles{public void work(); } lass Horse implements Vehicles{Overridepubli…

《从零开始做个摸鱼小网站! · 序》灵感来源

序 大家好呀&#xff0c;我是summo&#xff0c;这次来写写我在上班空闲(摸鱼)的时候做的一个小网站的事。去年阿里云不是推出了个活动嘛&#xff0c;2核2G的云服务器一年只要99块钱&#xff0c;懂行的人应该知道这个价格在业界已经是非常良心了&#xff0c;虽然优惠只有一年&a…

vue3 【自定义事件】mitt 实用教程 (可用于跨组件通信)

官网 https://github.com/developit/mitt 安装 mitt npm i --save mitt创建文件 src/emitter.js import mitt from "mitt";export default mitt();mitt 的核心语法 // 创建事件 foo emitter.emit(foo, { a: b })// 监听事件 foo emitter.on(foo, e > console.log(…