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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用Python实现Cmpp协议的教程

引言&协议概述 &#xff08;CMPP&#xff09;是中国移动为实现短信业务而制定的一种通信协议&#xff0c;用于在客户端&#xff08;SP&#xff0c;Service Provider&#xff09;和中国移动短信网关之间传输短消息&#xff0c;有时也叫做移动梦网短信业务。CMPP3.0是该协议…

通过iframe碎片实现web局部打印

通过iframe碎片实现web局部打印 创建打印模板 首先&#xff0c;创建一个出货单的 HTML 模板&#xff0c;并用 CSS 进行样式设计。 tips: 1、直接通过iframe碎片拉起打印&#xff0c;会导致样式丢失&#xff0c;所以需要获取当前界面的样式。 ${Array.from(document.querySel…

嵌入式Linux学习: 设备树实验

设备树&#xff08;DeviceTree&#xff09;是一种硬件描述机制&#xff0c;用于在嵌入式系统和操作系统中描述硬件设备的特性、连接关系和配置信息。它提供了一种与平台无关的方式来描述硬件&#xff0c;使得内核与硬件之间的耦合度降低&#xff0c;提高了系统的可移植性和可维…

立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统

本文主要是在sfud的基础上进行fatfs文件系统的移植&#xff0c;并不对sfud的移植再进行过多的讲解了哦&#xff0c;所以如果想了解sfud的移植过程&#xff0c;请参考我的另外一篇文章&#xff1a;传送门 正文开始咯 首先我们需要先准备资料准备好&#xff0c;这里对于fatfs的…

第五节shell脚本中的运行流程控制(5.3)

六, 流程中断控制器 在程序运行时因为需求我们需要在某个位置中断 常用的流程控制器有一下几个 控制器名称功能return退出函数contune终止档次循环, 提前进入下一个循环break终止所在循环exit退出脚本 示例: func() { for i in {1..10} do[ "$i" -eq "4&qu…

【ESP32 IDF 软件模拟SPI驱动 W25Q64存储与读取数组】

目录 SPISPI介绍SPI时序代码编写&#xff08;spi&w25q64&#xff09; 代码调试 SPI SPI介绍 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;是一种高速、全双工、同步的串行通信总线&#xff0c;常用于微控制器与各种外围设备&…

苍穹外卖浏览器前端界面修改

背景&#xff1a; 客户原始方案是期望做一个Spring Boot Vue的饿了么系统&#xff0c;但时间上太仓促&#xff0c;所以建议选择开源的苍穹外码目作为作业提交。 客户接受了建议的方案后&#xff0c;期望对前端页面做一些个性化的定制修改。 过程&#xff1a; 苍穹外卖简单介…

【HTML+CSS】HTML超链接:构建网页导航的基石

目录 什么是HTML超链接&#xff1f; 基本语法 示例 链接到另一个网页 链接到同一页面内的不同部分 常用属性 在Web开发的广阔世界中&#xff0c;HTML&#xff08;HyperText Markup Language&#xff09;作为网页内容的标准标记语言&#xff0c;扮演着至关重要的角色。而在…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…

操作系统杂项(十)

目录 一、简述socket中select、epoll的使用场景和区别 1、使用场景 2、区别 二、epoll水平触发和边缘触发的区别 三、简述Reactor和Proactor模式 1、Reactor 2、Proactor 3、区别 四、简述同步和异步的区别&#xff0c;阻塞和非阻塞的区别 1、同步与异步 2、阻塞与非…

Greenplum数据库中常用函数

聚合函数&#xff1a; SUM&#xff1a;计算某一列的总和。例如&#xff0c;SELECT SUM(sales) FROM transactions; 可以计算出transactions表中sales列的总和。AVG&#xff1a;计算某一列的平均值。例如&#xff0c;SELECT AVG(price) FROM products; 可以计算出products表中pr…

数据分析之一:方差分析

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、数据方差分析原理二、数据方差分析在机器人领域的应用1、单因素方差分析(One-Way ANOVA)2、双因素方差分析(Two-Way ANOVA)3、多因素方差分…

在VS IDE中​​​​​​​搜索所有带有中文的字符串

搜索所有带有中文的字符串 要搜索所有包含中文的字符串&#xff0c;可以使用正则表达式功能来查找包含 中文字符的所有字符串。步骤如下&#xff1a; 1. 打开搜索功能 &#xff1a; o 按 Ctrl Shift F 打开“查找在文件”对话框。 2. 输入正则表达式 &#xff1a; …

RTTI的开启和关闭

RTTI是运行时类型识别&#xff0c;C引入这个机制是为了让程序在运行时能根据基类的指针或引用来获得该指针或引用所指的对象的实际类型。&#xff08;多态&#xff09; 我们使用dynamic_cast就是基于RTTI的&#xff0c;我们可以通过编译器对RTTI进行开启或者关闭&#xff0c;关…

基于ssm+vue医院住院管理系统源码数据库

摘 要 随着时代的发展&#xff0c;医疗设备愈来愈完善&#xff0c;医院也变成人们生活中必不可少的场所。如今&#xff0c;已经2021年了&#xff0c;虽然医院的数量和设备愈加完善&#xff0c;但是老龄人口也越来越多。在如此大的人口压力下&#xff0c;医院住院就变成了一个…

Go 语言任务编排 WaitGroup

WaitGroup 是常用的 Go 同步原语之一,用来做任务编排。它要解决的就是并发-等待的问题: 现在有一个 goroutine A 在检查点 ( checkpoint ) 等待一组 goroutine 全部完成它们的任务,如果这些 goroutine 还没全部完成任务,那么 goroutine A 就会被阻塞在检查点,直到所有的 …

深入分析 Android ContentProvider (五)

文章目录 深入分析 Android ContentProvider (五)ContentProvider 的性能优化和实践案例1. 性能优化技巧1.1. 数据库索引优化示例&#xff1a;添加索引 1.2. 批量操作与事务管理示例&#xff1a;批量插入操作 1.3. 使用异步操作示例&#xff1a;使用 AsyncTask 进行异步查询 1.…

Linux:基础

一、安装 二、 一些组件 2.1 git管理 集中式版本控制系统:版本库是集中存放在中央服务器的,需要时要先从中央服务器取得最新的版本进行修改,修改后再推送给中央服务器。集中式版本控制系统最大的毛病就是必须联网才能工作,网速慢的话影响太大。 分布式版本控制系统:分布…

Linux网络-wget命令

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注我&#xff0c;我尽量把自己会的都分享给大家&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器&#xff0c;主要的作用就是向客户端提供网络…

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中&#xff0c;可能会创建大量相似对象&#xff0c;例如在文字处理器中每个字符对象。在这些场景下&#xff0c;如果每个对象都独立存在&#xff0c…