echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例

news2025/1/12 6:16:08

echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例

echarts图表设置关于图例legend,限制图例可点击时最少保留显示一个图例,亲测有效;

代码如下:

// 初始化ecahrts
let echartsWrapper = this.$echarts.init(document.getElementById('echarts-wrapper'));
let option = {...};  //echarts图的一些配置项
echartsWrapper.clear();
// 设置配置项
echartsWrapper.setOption(option);

// 当选择图例的时候做处理
echartsWrapper.on('legendselectchanged', function (params) { 
	console.log(params) // 可以打印看下参数
    var optionLegend = echartsWrapper.getOption(); 
    var selectValue = Object.values(params.selected); 
    var n = 0; 
    selectValue.map(function (res) {
         if (!res) { 
             n++; 
          } 
    });
     if (n == selectValue.length) {
         optionLegend.legend[0].selected[params.name] = true;
    }
     echartsWrapper.setOption(optionLegend)});      

效果如下:
在这里插入图片描述
在这里插入图片描述
打印的params里面的参数如下:
在这里插入图片描述

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

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

相关文章

【Leedcode】栈和队列必备的面试题(第二期)

【Leedcode】栈和队列必备的面试题(第二期) 文章目录【Leedcode】栈和队列必备的面试题(第二期)一、题目(用两个队列实现栈)二、思路图解1.定义两个队列2.初始化两个队列3.往两个队列中放入数据4.两个队列出…

Linux 自带按键驱动

目录 一、内核检查 二、驱动文件 三、设备树 四、验证 一、内核检查 内核一般默认已经使能了 KEY 驱动,但是还是要检查一下。按照如下路径找到相应的配置选项: Device Drivers -> Input device support -> Generic in…

WebRTC拥塞控制原理解析

WebRTC包含三种拥塞控制算法,GCC、BBR和PCC。其中,BBR一开始是针对TCP的拥塞控制提出来的。它的输入为ACK/SACK,输出为拥塞窗口(congestion_window)发送速度(pacing_rate)。BBR是怎样运用到UDP,甚至运用到实时流媒体传输之上的&am…

Java-封装、继承、多态

封装 访问控制权限又成为“封装”,是面向对象三大特征中的一种。核心是,只对需要的类可见。 继承 继承是所有OOP(Object Oriented Programming)语言和Java语言都不可或缺的一部分。 只要创建一个类,就隐式继承自Obje…

【计算机组成原理】计算机硬件的基础组成、认识各个硬件部件

计算机组成原理(一) 计算机内部是通过电信号传递数据 电信号:分为高电平和低电平,分别代表1/0 数字、文字、图像如何用二进制表示? CPU如何对二进制数进行加减乘除? 如何存储这些二进制数的? 如何从内存中取出想要的数…

RuoYi-Flowable-Plus搭建(若依)

项目简介 1.本项目基于 RuoYi-Vue-Plus 进行二次开发,采用 Flowable 扩展工作流应用场景,支持在线表单设计和丰富的工作流程设计能力。2.本项目主要针对Flowable工作流场景开发,采用MIT开源协议,完全免费给个人及企业使用。3.环境…

(小甲鱼python)函数笔记合集七 函数(IX)总结 函数的递归、递归和迭代的区别详解

一、基础复习 函数的基本用法 创建和调用函数 函数的形参与实参等等函数的几种参数 位置参数、关键字参数、默认参数等函数的收集参数*args **args 解包参数详解函数中参数的作用域 局部作用域 全局作用域 global语句 嵌套函数 nonlocal语句等详解函数的闭包(工厂函…

华为OD机试题【有效子字符串】用 C++ 进行编码 (2023.Q1)

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明有效子…

如何使用New Bing的ChatGPT聊天机器人

New Bing是微软推出的一款基于GPT4模型的智能搜索引擎,可以提供更加人性化、交互式和多样化的搜索体验。在中国使用New Bing的ChatGPT聊天机器人需要以下几个步骤: 一、准备工作 1.1 申请微软邮箱 用来登录Edge浏览器和接收来自微软New Bing使用邀请的…

代码随想录算法训练营 || 贪心算法 435 763 56

Day31435. 无重叠区间力扣题目链接给定一个区间的集合,找到需要移除区间的最小数量,使剩余区间互不重叠。注意: 可以认为区间的终点总是大于它的起点。 区间 [1,2] 和 [2,3] 的边界相互“接触”,但没有相互重叠。示例 1:输入: [ [1,2], [2,3]…

TryHackMe-hackerNote

hackerNote 自定义 Web 应用程序,引入用户名枚举、自定义单词列表和基本权限提升漏洞。 端口扫描 循例 nmap Web 80和8080都是一样的页面,并且存在一个登录页面 除此之外还有另一个信息就是它只有一个用户 存在注册功能,我们注册一个用户…

AntDB数据库首个社区版正式发布,携手生态更多可能

3月1日,亚信科技AntDB数据库社区版正式开放免费下载。作为AntDB数据库的首个社区版产品,AntDB-CE(Community Edition ) V7.2.0具有完整、易用、兼容度高的企业级分布式数据库产品特性,提供了详细的在线文档支持&#x…

Kafka基本原理

总述 简介 Kafka是最初由Linkedin公司开发,是一个分布式、支持分区的(partition)、多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量数据以满足各…

高清无线手机投屏电脑软件Airserver7全平台兼容

Airserver是一款优质的手机投屏软件,搭配了可调节的分辨率模式,针对不同的网络配置,还专门研发了低数据模式以及硬件加速功能,全方位保证投屏画面的清晰度。除此之外,通过调整画面的色彩变化,还可以增强用户…

OpenWrt介绍及编译基础教程

关于OpenWrt OpenWRT是一个高度模块化、高度自动化的嵌入式Linux系统,拥有强大的网络组件和扩展性,常常被用于工控设备、电话、小型机器人、智能家居、路由器以及VOIP设备中。 同时,它还提供了100多个已编译好的软件,而且数量还在…

SC12B触摸感应芯片评测方案(1)

MM32F0160SC12B Touch Application Evaluation 文章目录MM32F0160SC12B Touch Application EvaluationIntroduction & RequirementHardwareSC12B & SC12B Sample Demo boardMini-F0160 boardSoftwareMCU Software - MM32F0160PC Tool - FreeMASTERSummaryIntroduction …

Jupyter Lab | “丢下R,一起来快乐地糟蹋服务器!”

写作前面 工具永远只是为了帮助自己提升工作效率 —— 沃兹基硕得 所以说,为什么要使用jupyterlab呢?当然是因为基于服务器来处理数据就可以使劲造了,而且深切地感觉到,“R这玩意儿是人用的吗”。 jupyter-lab | mamba安装以及…

【微信小程序】-- 全局配置 -- window - 导航栏(十五)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &…

Thymeleaf -- 视图模块

添加thymeleaf的jar包2. 新建一个Servlet类ViewBaseServletpublicclassViewBaseServletextendsHttpServlet { ​privateTemplateEnginetemplateEngine; ​Overridepublicvoidinit() throwsServletException { ​// 1.获取ServletContext对象ServletContextservletContextthis.g…

人大金仓和达梦的空间数据能力对比

一、总得来说: 人大金仓底层更解决于pg数据库, 人大金仓的空间能力基于postgis能力来实现,能力挺强大的. 细节上人大金仓的架构上也对空间的支持框架做的比达梦更加完善。例如数据库的集群能力,并行计算能力,空间数据…