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

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

相关文章:

echarts多stack的legend点选

echarts支持点击legend&#xff0c;实现显示和隐藏legend对应的数据&#xff0c;具体就是option里series里,name为legend值的数据。 如果配置了多个stack&#xff0c;那么可能你可能设置了多组legend&#xff0c;你点选的是多个legend组中的某组中的一个&#xff0c;那么如果不…...

搭建自己的金融数据源和量化分析平台(四):自动化更新上市公司所属一级、二级行业以及股票上市状态

前面做了更新沪深交易所的上市股票列表的读取和更新&#xff0c;但一旦股票退市则需要在数据库里将该股票状态更新为退市&#xff0c;同时附上退市日期&#xff0c;将股票名更改为XX退。 此外深交所下载的xls解析出来是没有上市公司所属的二级行业的&#xff0c;因此还需要建立…...

科创板重启IPO上会!募投审核新方向?思看科技等优化募投项目

撰稿 | 多客 来源 | 贝多财经 根据上交所项目审核动态最新公告&#xff0c;思看科技&#xff08;杭州&#xff09;股份有限公司&#xff08;简称“思看科技”&#xff09;将于8月2日上会&#xff0c;标志着时隔50天后科创板重新迎来首家上会企业&#xff0c;也标志着思看科技…...

深入解析损失函数:从基础概念到YOLOv8的应用

深入解析损失函数&#xff1a;从基础概念到YOLOv8的应用 在机器学习和深度学习中&#xff0c;损失函数是至关重要的组件&#xff0c;它们衡量模型的预测值与真实值之间的差距&#xff0c;从而指导模型的优化过程。本文将详细探讨损失函数的基本概念&#xff0c;及其在YOLOv8中…...

2.11.ResNet

ResNet 动机&#xff1a;我们总是想加更多层&#xff0c;但加更多层并不总是能改进精度 可以看出F1到F6模型越来越大&#xff0c;但F6距离最优解却总变远了&#xff0c;反而效果不好&#xff0c;通俗的来说就是学偏了&#xff0c;实际上我们希望是这样的&#xff1a; ​ 更大…...

GitLab添加TortoiseGIT生成SSH Key

文章目录 前言一、PuTTYgen二、GitLab 前言 GitLab是一个用于托管代码仓库和项目管理的Web平台&#xff0c;公司搭建自己的gitlab来管理代码&#xff0c;我们在clone代码的时候可以选择http协议&#xff0c;也可以选择ssh协议来拉取代码。 SSH (Secure Shell)是一种通过网络进…...

20240729 大模型评测

参考&#xff1a; MMBench&#xff1a;基于ChatGPT的全方位多模能力评测体系_哔哩哔哩_bilibili https://en.wikipedia.org/wiki/Levenshtein_distance cider: https://zhuanlan.zhihu.com/p/698643372 GitHub - open-compass/opencompass: OpenCompass is an LLM evalua…...

基于微信小程序的校园警务系统/校园安全管理系统/校园出入管理系统

摘要 伴随着社会以及科学技术的发展&#xff0c;小程序已经渗透在人们的身边&#xff0c;小程序慢慢的变成了人们的生活必不可少的一部分&#xff0c;紧接着网络飞速的发展&#xff0c;小程序这一名词已不陌生&#xff0c;越来越多的学校机构等都会定制一款属于自己个性化的小程…...

达梦数据库归档介绍

一、什么是归档 数据库归档是一种数据管理策略&#xff0c;它涉及将旧的、不经常访问的数据移动到一个单独的存储设备&#xff0c;以便在需要时可以检索&#xff0c;同时保持数据库的性能和效率。 归档的主要目标是为了释放数据库中的空间&#xff0c;以便更有效地利用高性能…...

OpenAI推出AI搜索引擎SearchGPT

OpenAI推出AI搜索引擎SearchGPT 据英国《卫报》和美国消费者新闻与商业频道等媒体报道&#xff0c;7月25日&#xff0c;OpenAI宣布正在测试一款名为SearchGPT的全新人工智能&#xff08;AI&#xff09;搜索工具。该工具能够实时访问互联网信息&#xff0c;旨在为用户提供更具时…...

elementplus菜单组件的那些事

在使用 elementplus 的菜单组件时&#xff0c;我发现有很多东西是官方没有提到但是需要注意的点 1. 菜单组件右侧会有一个边框 设置css .el-menu {border: 0 !important; } 2. 使用其他的 icon 文字内容一定要写在 这个 名字为 title 的插槽中 <el-menu-itemv-for"it…...

【VSCode实战】Golang无法跳转问题竟是如此简单

上一讲【VSCode实战】Go插件依赖无法安装 – 经云的清净小站 (skycreator.top)&#xff0c;开头说到了在VSCode中Golang无法跳转的问题&#xff0c;但文章的最后也没给出解决方案&#xff0c;只解决了安装Go插件的依赖问题。 解决了插件依赖问题&#xff0c;无法跳转的问题也离…...

three.js中加载ply格式的文件,并使用tween.js插件按照json姿态文件运动

先贴一下文件地址&#xff1a; aa.ply 文件&#xff1a; https://download.csdn.net/download/yinge0508/89595650?spm1001.2014.3001.5501 new.json https://download.csdn.net/download/yinge0508/89595641?spm1001.2014.3001.5501 代码: <template><div>&…...

性能对比:Memcached 与 Redis 的关键差异

性能对比&#xff1a;Memcached 与 Redis 的关键差异 在选择合适的缓存系统时&#xff0c;Memcached 和 Redis 是最常被提及的两种技术。它们都是内存存储系统&#xff0c;用于提高数据访问速度和应用性能。尽管它们在功能上有很多相似之处&#xff0c;但在性能、特性和应用场…...

app-routing.module.ts 简单介绍

Angular的路由是一种功能&#xff0c;它允许应用程序响应不同的URL路径或参数并根据这些路径加载不同的组件。app-routing.module.ts是Angular项目中负责设置应用程序路由的文件。 以下是一个简单的app-routing.module.ts文件示例&#xff0c;它配置了三个路由&#xff1a; i…...

基于JSP的水果销售管理网站

你好&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 工具&#xff1a; 未在文档中明确指出&#xff0c;可能包括但不限于IDEs&#xff08;如Ec…...

web3d值得学习并长期发展,性价比高吗?

在数字化浪潮日益汹涌的今天&#xff0c;Web3D技术以其独特的魅力和广泛的应用前景&#xff0c;逐渐成为技术领域的焦点。对于许多热衷于技术探索和创新的人来说&#xff0c;学习并长期发展Web3D技术无疑是一个值得考虑的选择。那么&#xff0c;Web3D技术的学习和发展究竟是否性…...

【大数据面试题】38 说说 Hive 怎么行转列

一步一个脚印&#xff0c;一天一道大数据面试题 博主希望能够得到大家的点赞收藏支持&#xff01;非常感谢 点赞&#xff0c;收藏是情分&#xff0c;不点是本分。祝你身体健康&#xff0c;事事顺心&#xff01; 行转列 假设我们有一张名为 sales_data 的表&#xff0c;其中包含…...

C语言中的二维数组

文章目录 &#x1f34a;自我介绍&#x1f34a;二维数组&#x1f34a;代码实战 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34a;自我介绍 Hello,大家好&#xff0c;我是小珑也要变强&…...

Android12 添加屏幕方向旋转方案

添加屏幕方向属性值 device/qcom/qssi/system.prop persist.panel.orientation0修改开机动画方向 frameworks/base/cmds/bootanimation/BootAnimation.cpp status_t BootAnimation::readyToRun() {mAssets.addDefaultAssets();mDisplayToken SurfaceComposerClient::getIn…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...