echarts学习之legend点击事件解读
作者:King_960725 时间:2024-05-03 11:10:17
echarts legend点击事件
首先,明确本篇文章的重点,主要有三个:
1. 给legend添加点击事件
2. 禁用legend点击事件的默认行为(类型checkbox多选框)
3. 解决点击事件重复触发问题
问题一
let myCharts = Echarts.init(document.getElementById('bar'))
let x = []
let y1 = []
let y2 = []
let idList = []
val.forEach(e => {
x.push(e.name)
y1.push(e.invitationNum)
y2.push(e.totalMoney / 100)
idList.push(e.id)
}) // 这些都是自己做的一些数据处理,可以忽略
let option = {
title: {
text: name + '前十用户',
left: 'center'
},
...其他代码
}
myCharts.on('legendselectchanged', (e) => {
alert('点击了') // 如果不加off事件,就会叠加触发
})
myCharts.setOption(option)
问题二
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('点击了', params.name);
// do something
});
问题三
let myCharts = Echarts.init(document.getElementById('bar'))
myCharts.off('legendselectchanged') //解决重复触发
...
...
myCharts.on('legendselectchanged', (e) => {
alert('点击了') // 如果不加off事件,就会叠加触发
})
myCharts.setOption(option)
Echarts自己控制legend点击事件
先看需求
现在想实现的 情况是
一进去页面,所有的 Echarts 中 legend 的所有选项都是默认选中的状态(这是 Echarts 默认的)
然后当“9”号标识,也就是“一#斗”点亮时,与之相对应的“1、2、3”仓位,即“石灰石、污泥球、生白”也必须点亮,
然后 “9”号点亮之后 “1、2、3”号仓位也可以自己控制自己的 点亮还是关闭,
然后当“9”号再次从关闭变成点亮的状态时,“1、2、3” 会再次点亮。
var dou1_legend_flag = false;
myChart.on('legendselectchanged', function (params) {
var option = this.getOption();
//当前echarts图例选项
var select_key = Object.keys(params.selected);
//当前图例的选项是否选中 选中为true 未选中为false
var select_value = Object.values(params.selected);
if (option.legend[0].selected.hasOwnProperty("1#斗")) {
if (option.legend[0].selected["1#斗"] == true) {
if (!dou1_legend_flag) {
// 控制legend 的显示和隐藏 直接控制 selected 中对应名称的真假值就可以
option.legend[0].selected[option.legend[0].data[0]] = true;
option.legend[0].selected[option.legend[0].data[1]] = true;
option.legend[0].selected[option.legend[0].data[2]] = true;
myChart.setOption(option);
dou1_legend_flag = true;
}
} else {
dou1_legend_flag = false;
}
}
});
来源:https://blog.csdn.net/weixin_42566993/article/details/108683076
标签:echarts,legend,点击事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2021-09-10 05:10:36
![](https://img.aspxhome.com/file/2023/3/105203_0s.png)
vue操作dom元素的3种方法示例
2024-04-28 09:31:05
可以在线创建文件夹吗?
2009-11-01 18:07:00
Python使用描述符实现属性类型检查的案例解析
2022-07-30 00:39:15
JavaScript实现时钟滴答声效果
2024-04-16 10:38:19
![](https://img.aspxhome.com/file/2023/4/136574_0s.png)
PHP采集静态页面并把页面css,img,js保存的方法
2023-10-22 19:44:22
mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间
2024-01-24 08:21:54
关于你不想知道的所有Python3 unicode特性
2022-03-03 13:06:40
使用PyCharm安装pytest及requests的问题
2023-01-17 13:10:46
![](https://img.aspxhome.com/file/2023/4/117984_0s.png)
在python中利用最小二乘拟合二次抛物线函数的方法
2021-05-03 01:18:20
![](https://img.aspxhome.com/file/2023/8/95268_0s.jpg)
Python垃圾回收机制三种实现方法
2023-02-22 00:24:42
![](https://img.aspxhome.com/file/2023/2/82832_0s.jpg)
Python实现查找数据库最接近的数据
2024-01-21 08:27:53
![](https://img.aspxhome.com/file/2023/9/114999_0s.png)
php过滤器使用详解
2023-06-13 01:52:23
超半数中文网页一年内将“消失”
2008-03-08 12:49:00
Python实现希尔排序算法的原理与用法实例分析
2021-10-19 17:44:08
![](https://img.aspxhome.com/file/2023/8/112918_0s.jpg)
通过表单的做为二进制文件上传request.totalbytes提取出上传的二级制数据
2011-03-16 10:39:00
Django商城项目注册功能的实现
2022-01-19 05:22:36
MySQL的查询计划中ken_len的值计算方法
2024-01-24 13:32:49
Javascript中作用域的详细介绍
2024-04-18 10:02:09
PyCharm2019 安装和配置教程详解附激活码
2021-12-10 02:07:38
![](https://img.aspxhome.com/file/2023/3/115103_0s.png)