echarts中饼图旁边的小方块也就是legend区域的点击事件

最新推荐文章于 2024-05-28 17:30:15 发布
最新推荐文章于 2024-05-28 17:30:15 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44029226/article/details/120431329
版权

echarts中饼图旁边的小方块也就是legend区域的点击事件

在这里插入图片描述

这里指的就是红色方框内箭头所指的区域为legend区域。
我们在代码里面写的myCharts.on（‘click’，event）这个点击事件是只是对饼图区域内进行绑定点击事件，旁边的小方块区域是无法对这个生效的。所以我们查看文档

在这里插入图片描述

这里官方文档在events事件里面提供的关于legend的选中事件，我们在代码中应该这样去写

在这里插入图片描述

函数里面逗号后面是触发的函数体或者函数名字。
但是现在还有一个问题
在这里插入图片描述
这里默认触发了两次事件，这肯定是行不通的，所以这里的解决方式就是在事件处理函数的前面加上一行代码
在这里插入图片描述
前面加上off，那么就只会触发一次了！

茂茂睡不醒
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
echart 中 legend标签 自定义点击事件
sunshineTing2的博客
02-19 2097
需求：在用户未登录状态下，Me置灰，点击后提示 去登录 Me 未登录 置灰色 legend: { top: 15, right: 15, selected: { 'All': true, 'Me': false // 未登录 置灰色 } }, 监听echart的legendselectchanged事件，并根据params.name 判断当前选中哪个图例 let that = this myChart.on('legendselectch
echarts 3d饼图资源
05-12
ECharts 的 API 允许在运行时动态修改配置项，因此可以在用户交互时实时更新图表，如响应点击事件改变视角，或者根据筛选条件过滤数据等。 总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据...
echarts，给legend注册点击事件
逆风优雅的博客
05-10 2933
echarts图表注册点击事件，要在我们初始化后进行。 以vue项目中echarts为例： myChart.on("legendselectchanged",(e)=>{ }） 图例的点击事件 this.myChart = this.$e.init(this.$el); // init dom元素 this.myChart.setOption(this.chartOption, true); // 转载配置信息
Echarts柱状图例--手写实现legend图例支持多选、单选、联动、滚动等功能
最新发布
qq_45919348的博客
05-28 810
实现手写legend并支持反选全选等操作，在此基础上还能实现一下翻页、更改滚动条样式等操作，并且测试过对于线形图与柱状图同样适用。手写legend主要基于div盒子模型遍历生成，图例部分自己维护，避免了官网配置项使用的局限性，能完成很多操作。官网给的图例支持的翻页、滚动等功能，在样式方便一般都无法更改，实际开发时很难满足UI样式需求。利用官方给的legend的selected配置项，来控制图例选择状态表。其中参数名与legend的data相互对应，即可控制对应系列展示隐藏。
echarts饼图给legend图例增加自定义点击事件
x_1999的博客
01-15 2115
echarts图例点击会有一个默认的点击事件，会把点击的图例对应的legend取消。
echarts学习之legend点击事件
热门推荐
King的博客
09-19 2万+
首先，明确本篇博客的重点，主要有三个： 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.
Echarts legend互斥点击事件
yhj198927的博客
12-14 405
点击下面的legend，即推广省、试点省、未发展省时，只显示点击的类型省份，如何实现呢？
echarts之legend点击事件（取消自带置灰事件）(vue)
weixin_45878595的博客
09-24 1847
项目需求：给echarts的legend添加点击事件 this.myChart01.on("legendselectchanged",(e)=>{ }) 1.这是官方的，高亮选中，扇形不置灰 this.myChart01.on("legendselectchanged",(e)=>{ this.myChart01.dispatchAction({ type:"legendSelect", name:...
echarts饼图扇区添加点击事件的实例
08-29
在本实例中，我们将探讨如何为ECharts饼图的扇区添加点击事件，以便在用户点击扇区时能够触发特定的操作。首先，我们要了解ECharts的基本结构和饼图的配置。 ECharts是一款由百度开发的开源JavaScript图表库，它...
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
赏樱看雪撸代码
03-02 1万+
自定义Echarts图例legend点击事件，echarts图标点击事件触发，legendselectchanged应用，echarts多线共存，echarts图例点击调用接口
echarts元素选中事件添加demo
09-12
基于echarts3.65版本的图表元素选中事件添加小demo，可以参考此源码，实现饼图、柱状图等图形，以及x和y轴的选中事件
ECharts饼图lengend点击事件处理
ben_grf的博客
10-25 1318
ECharts饼图相关处理
echarts 饼图 将数据显示在图例的旁边
HUSKle的博客
12-30 3373
写之前注意一下this的指向 我是在定义echarts之前定义 let _that = this 在legend中进行formatter formatter:function(name){ var index = 0 var data = ['贷款','存款'] var datas = data var piedata = [_that.profitPIEdata.LXD_LX,_tha
echarts中的事件触发(legend)
hero_lxz的博客
06-14 1万+
echarts中，要触发legend中的事件，不同于图表中的事件触发，不能直接myChart.on("click", function (param) {}); 使用如下方式： var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param) {});
echarts legend点击事件及默认选中
夕降巫咸的博客
10-14 7119
echarts legend点击事件及默认选中
echarts 覆盖legend默认点击事件，自定义点击事件
weixin_40295491的博客
12-14 1043
myChart.on('legendselectchanged', function (params) { myChart.setOption({ legend:{ selected:{ [params.name]: true}} }) console.log('点击了', params.name); // do something });``` [原文地址](.
echarts点击图例 legend，取消默认点击事件，不让图发生变化
weixin_54351962的博客
04-11 1万+
一.知识点 echarts不管是柱状图还是饼状图等其他图都有图例legend，点击图例legend时，会触发默认的点击事件，使得图随之发生变化 例如： 这是未操作时的环形图： 当你点击图例完成后，图会随之改变成去掉完成部分的统计图，当你再次点击图例完成，图又恢复成原样 解决方法 如果想echarts点击图例 legend，取消默认点击事件，不让图发生变化，则需要在option配置项中添加legend的配置selectedMode:false即可 var option ={ leg
ECharts legend图例点击事件 + 通过legend点击事件排序
qq_53702986的博客
04-22 2746
需求：实现通过点击图例进行排序 代码比较简单，有想法欢迎交流 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts legend点击事件 + 排序</title> <script src="../../static/js/echarts.min-5.3.0.js" type="text/javascript" charset="
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

茂茂睡不醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值