当前位置: 首页 > 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…...

别再让电费偷偷溜走!用智能时间开关改造家里的热水器和空调(附保姆级选购指南)

别再让电费偷偷溜走&#xff01;用智能时间开关改造家里的热水器和空调&#xff08;附保姆级选购指南&#xff09; 每到月底收到电费账单时&#xff0c;那种"钱不知不觉就溜走"的感觉总是让人心疼。特别是热水器和空调这两大"电老虎"&#xff0c;它们往往…...

保姆级教程:MogFace人脸检测模型-large快速上手,无需代码轻松体验

保姆级教程&#xff1a;MogFace人脸检测模型-large快速上手&#xff0c;无需代码轻松体验 1. 认识MogFace人脸检测模型 1.1 什么是MogFace MogFace是目前最先进的人脸检测方法之一&#xff0c;在Wider Face六项榜单上长期保持领先地位。这个模型通过三个创新点显著提升了检测…...

告别盲目搜索!Unity大版本升级时,系统化处理API变更的5个步骤

Unity大版本升级的系统化实践&#xff1a;从API变更管理到团队协作优化 当Unity 2023 LTS发布时&#xff0c;某中型游戏团队在升级过程中发现超过40%的脚本因API变更而报错&#xff0c;导致项目停滞两周。这种场景在技术迭代中并不罕见&#xff0c;但大多数团队仍采用"遇到…...

语义通信:从理论到6G落地的关键技术演进与挑战

1. 语义通信的理论基石 语义通信&#xff08;Semantic Communication, SemCom&#xff09;的核心思想与传统通信有着本质区别。传统通信追求的是"准确传输比特流"&#xff0c;而语义通信关注的是"有效传递信息的意义"。这就像两个人对话&#xff1a;传统通…...

用腾讯云轻量锐驰和对象存储,手把手教你30分钟搞定私人不限速网盘(附SSL证书配置)

零基础30分钟搭建高性能私人网盘&#xff1a;腾讯云轻量锐驰对象存储实战指南 你是否也受够了公有网盘动辄几百KB的下载速度&#xff1f;每次分享文件给朋友&#xff0c;对方总要忍受龟速下载的煎熬。更别提那些突然消失的文件和频繁弹出的会员广告——是时候拥有一个完全自主掌…...

【JavaWeb开发】从零构建前后端交互实战指南

1. JavaWeb前后端交互基础入门 第一次接触JavaWeb开发时&#xff0c;最让我困惑的就是前后端如何传递数据。记得刚开始做项目时&#xff0c;我傻乎乎地用字符串拼接HTML代码返回给前端&#xff0c;结果遇到中文乱码问题折腾了一整天。后来才发现&#xff0c;现代JavaWeb开发早已…...

别再让AI失忆了!手把手教你用Mem0为ChatGPT添加长期记忆(附Next.js实战代码)

为Next.js聊天应用注入长期记忆&#xff1a;Mem0集成实战指南 当你的AI助手开始记住用户的咖啡偏好和生日祝福时&#xff0c;整个交互体验会发生质的变化。本文将带你从零开始&#xff0c;在Next.js应用中实现这种"记忆魔法"。 1. 环境准备与Mem0初始化 首先创建一个…...

实战构建开放数据可视化平台,从采集到展示的全流程开发指南

今天想和大家分享一个完整的开放数据可视化项目实战经验。这个项目从数据采集到最终展示&#xff0c;涵盖了全流程开发的关键环节&#xff0c;特别适合想积累真实项目经验的朋友参考。 项目背景与目标 开放数据正在成为数字化转型的重要资源&#xff0c;但很多开发者面对海量…...

比迪丽AI绘画创意开发:使用Matlab进行生成效果分析

比迪丽AI绘画创意开发&#xff1a;使用Matlab进行生成效果分析 1. 引言 在AI绘画创作领域&#xff0c;比迪丽模型因其出色的角色生成能力而备受关注。但如何科学评估生成效果、量化分析风格特征&#xff0c;一直是创作者面临的挑战。传统的人工评估方式主观性强、效率低下&am…...

告别格式焦虑:用StarWind V2V Converter v9.0.1.268在ESXi 8.0和Hyper-V之间无损迁移虚拟机

跨平台虚拟机迁移实战&#xff1a;StarWind V2V Converter的高效应用指南 当企业IT基础设施面临升级或混合云架构转型时&#xff0c;虚拟机格式转换往往成为技术团队最头疼的问题之一。我曾参与过多次从VMware到Hyper-V的迁移项目&#xff0c;亲眼目睹了传统转换方法导致的业务…...