Echarts 自定义、覆盖legend点击事件、禁用legend默认的点击行为的实现

需求：

有一个需求场景，使用Echarts时想要自定义legend的点击事件，但是不要legend的默认点击事件------就是点击会隐藏和显示对应的饼图。如下图：

查阅文档和手册之后，发现没有可以直接使用的方法
那么换个思路，在默认事件触发之后再把取消选中的legend选中回来就可以啦

思路：

依赖以下下几个配置：

legendselectchanged

监听legend点击改变的事件，可以实现自定义事件（但是不能覆盖默认的选中和取消选中的事件）

myChart.on('legendselectchanged', function (params) {// ...
});

selected

可以设置初始选中项，这里不会直接使用

option = {tooltip: {selected: {// ...},// ...},//...
}

setOption

动态改变配置，到这里就很清晰了，将 legendselectchanged 中取消选中的legend动态设置回来

myChart.setOption({legend:{selected:{//...}
})

animation

如果对动画没要求，关闭动画，效果会更好

option = {animation: false,//...
}

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts 实例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));option = {animation: false, // 取消动画tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 10,data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '30',fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}]}]};myChart.setOption(option);// 关键代码myChart.on('legendselectchanged', function (params) {myChart.setOption({legend:{selected:{[params.name]: true}}})console.log('点击了', params.name);// do something});</script>
</body></html>

Echarts 自定义、覆盖legend点击事件、禁用legend默认的点击行为的实现相关推荐

解决element-ui中表格行点击事件和表格单元格点击事件冲突的问题
element-ui中如果同时设置了表格行点击事件和表格单元格点击事件的化,当点击单元格的时候会因为事件冒泡触发表格行点击事件,这不是我们需要的要解决这种事件冲突的问题,只需要在单元格的点击事件上加 ...
JS、阻止 a 标签的默认点击事件，阻止默认的所有事件
JS.阻止 a 标签的默认点击事件,阻止默认的所有事件 1 . javascript:void(0) 空处理缺点:当超链接有target="_blank"属性时,点击后任然会跳出 ...
echarts 地图 scatter点击事件_React实现高亮可点击地图
目前越来越多的项目中开始使用地图,而对地图的需求也不仅仅是简单的纯展示,更多了各种各样的交互功能.今天这篇文章主要介绍的就react中通过Echarts实现一个高亮可点击的省市地图.接下来先看看效果图 ...
android点击事件禁用,android-禁用所有视图的触摸事件
android-禁用所有视图的触摸事件禁用所有视图的触摸事件的最佳方法是什么? 非常感谢, 格拉齐 Gratzi asked 2020-07-27T19:09:52Z 13个解决方案 55 vote ...
php jquery点击事件,jQuery操作html元素点击事件详解
这次给大家带来jQuery操作html元素点击事件详解,jQuery操作html元素点击事件的注意事项有哪些,下面就是实战案例,一起来看一下. 移除或禁用html元素的点击事件可以通过css实现也可以 ...
iostext添加点击事件_iOS给UILabel添加点击事件
前言:笔者最近需要实现给UILabel中的链接添加点击事件的功能.使用so.com查了下,发现TTTAttributedLabel的封装程度比较好.整理了TTTAttributedLabel的基本使用 ...
ajax点击事件触发后台,使用jquery点击事件触发AJAX
我有两个下拉菜单,其中一个我试图用jquery替换单选按钮.第二个盒子通过AJAX进行更新,每次用户在第一个下拉菜单中进行选择时都会有新选项.我已经成功生成单选按钮,可以更改第一个下拉列表的值,但是当 ...
html获取页面点击事件吗,jquery 获取页面点击事件 $(body).click()
需求:当某个按钮触发click事件,那么显示某个DIV 代码 $("#button1").click(function(){ $("#div1").show( ...
Android代码模拟物理、屏幕点击事件、APP内部自动点击
一.应用中模拟物理和屏幕点击事件例如,模拟对某个view的点击事件 private void simulateClick(View view, float x, float y) {long dow ...
embed标签阻止点击事件让父元素处理点击事件
由于规定页面显示的PDF文件要有固定大小,使得页面风格统一最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

Echarts 自定义、覆盖legend点击事件、禁用legend默认的点击行为的实现

需求：

思路：

完整代码：

Echarts 自定义、覆盖legend点击事件、禁用legend默认的点击行为的实现相关推荐

最新文章

热门文章