echart 饼图去掉legend中鼠标悬停及点击事件

原创 已于 2022-04-24 22:25:53 修改 · 5.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts

于 2022-04-24 21:52:00 首次发布
本文介绍了如何通过设置Echarts饼图的图例选择模式为`selectedMode: false`来禁用图例点击事件，解决鼠标悬停时值重叠的尴尬问题，从而优化图表的交互体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

echarts官方文档地址：https://echarts.apache.org/zh/option.html#legend.selectedMode
在这里插入图片描述
饼图中心默认会展示值，鼠标悬停在图例上，会出现值的重叠，那么去掉图例事件就会避免尴尬局面发生
在这里插入图片描述

图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

legend: {
      selectedMode: false
}
Echarts 展示——取消或改变鼠标移上效果
虎康的博客
07-11 1555
鼠标一移上去老闪（显示浮框信息和图变大了）
Echarts中常用的参数总结以及参数自定义示例_echarts series参数
2301_76379606的博客
04-29 574
scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了。itemWidth: 10, // 设置宽度。itemHeight: 10, // 设置高度。itemGap: 40 // 设置间距。name: “答辩评分”,
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1531
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
echarts取消鼠标划入事件&事件的回调&取消和手动添加高亮效果
RequesToGod的博客
03-08 9059
在使用Echarts过程中，在Echarts中事件发生时，如何回调处理？ 在文档中的配置项手册中的Action可以找到相应的事件触发 [] 链接地址 以Vue3+Echarts5.x为例 在点击右侧Legend时，回调可以拿到相应的数据，从而可以与Echarts以外的DOM事件进行联动抛发。 onMounted(() => { if (pieChart.value) { nextTick(() => { fiveLevelPieSeries = echarts.init
Vue3使用Echarts饼图属性配置-中间展示总和鼠标悬浮中间显示对应值
最新发布
JackieDYH的博客
06-09 381
Vue3使用Echarts饼图属性配置-中间展示总和鼠标悬浮中间显示对应值。
【echarts】解决ECharts鼠标悬停（mouseover）事件触发范围问题
九日的博客
05-11 5243
对于更加复杂的需求，例如在不增大实际图形大小的前提下增加触发区域，可以通过在ECharts中添加透明的辅助图形（如透明的柱状图或圆形）来扩大mouseover触发范围。option = {series: [type: 'line', // 实际显示的线图...},type: 'scatter', // 用于扩大触发区域的散点图opacity: 0 // 透明显示如果标准的图表配置不足以满足需求，可以通过编写自定义的事件监听逻辑来进一步优化用户体验。通过监听mousemove。
echarts,圆环图例取消中间的鼠标悬停事件
weixin_42786207的博客
08-04 9650
1、代码如下，使用tooltip属性实现 2、取消圆环图，右侧的点击事件使用selectModel属性
echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
热门推荐
Amy的博客
06-20 3万+
备注：标黄的代码是起作用的代码，其他的不需要借鉴！！！ //取消 鼠标滑过的提示框 tooltip : {         trigger: 'item',       show:false,         formatter: "{a} {b} : {c} ({d}%)"     }, //取消图例的点击事件   legend: {         o
echarts饼图鼠标悬停
08-11
- *1* [echart 饼图去掉legend中鼠标悬停及点击事件](https://blog.youkuaiyun.com/Kiruthika/article/details/124392828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
Echarts中常用的参数总结以及参数自定义示例_echarts series参数(1)
2301_82243558的博客
04-27 1207
,scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了其中为后端数据，其实就是将x轴的类目项文字可以动态换行网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
知识图谱可视化基础：Vue和ECharts结合的实现原理与实战演练
!... # 摘要 随着信息可视化与交互技术的发展，知识图谱可视化已成为一个重要研究领域。本文旨在探讨知识图谱的可视化基础，并结合Vue.js框架与ECharts图表库，提供实用的集成实现原理...随后，文章重点阐述了Vue与EChart
echarts
weixin_47163986的博客
01-17 1853
echarts折线图 1.折线图每个折点数据显示 series: [{label:{show:true,position:'top'},}] 2.折线图的标签 let options = { legend: { data: ['排队量', '排队放弃量']}, } 3.坐标轴距离容器的位置通过grid这个来调节 containLabel属性是来判断grid 区域是否包含坐标轴的刻度标签 let options = { grid:{left:"10%",right:"-5%",top:"15
echarts点击图例 legend，取消默认点击事件，不让图发生变化
weixin_54351962的博客
04-11 1万+
一.知识点 echarts不管是柱状图还是饼状图等其他图都有图例legend，点击图例legend时，会触发默认的点击事件，使得图随之发生变化 例如： 这是未操作时的环形图： 当你点击图例完成后，图会随之改变成去掉完成部分的统计图，当你再次点击图例完成，图又恢复成原样 解决方法 如果想echarts点击图例 legend，取消默认点击事件，不让图发生变化，则需要在option配置项中添加legend的配置selectedMode:false即可 var option ={ leg
Echarts中取消legend中部分数据的点击事件
weixin_49155050的博客
11-14 764
Echarts中取消legend中部分数据的点击事件
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
扬帆前行
06-13 1万+
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏，进行了数据的二次处理，所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件，会关闭一个块，此时就需要重新去计算数据并重新渲染echarts，需求并没有要求做点击关闭部分块在占比图中，网上大部分资源是说设置selectedMode:false，但是这个一旦设置为false，那么点击事件和鼠标悬浮显示tooltie事件就会都取消，显然不符合，经过查官方文档发现legendselectchang
Echarts的legends 禁用点击事件但不影响鼠标悬浮事件
曾大强博客
08-06 1089
在最下面改写legend点击事件同时禁用动画效果。此改动会使得动画效果僵硬。
ECharts柱状图关闭鼠标hover时的高亮样式
weixin_46422035的博客
11-11 1万+
关闭eachart柱状图鼠标hover时的高亮样式
echarts使用不显示图例legend
风泊月
09-06 1万+
直接说结论：图例legend中data元素的数据类型要与series中的data 数据里name的数据类型保持一致 如下：series中的data 数据里name数据的数据类型为 number, legend data的数据类型为string 数据类型不一致 <!DOCTYPE html> <html lang="en"> <head> <...
使用echarts柱状图时，当图例悬浮时去掉悬浮高亮的行为。
qq_43136527的博客
07-11 5391
使用echarts柱状图时，当图例悬浮时，去掉悬浮高亮的行为。
echart饼图点击特定块的事件
05-16
ECharts 饼图中点击特定块的事件可以通过 ECharts 的 `on` 方法来实现。具体步骤如下： 1. 获取 ECharts 实例，例如： ```javascript var myChart = echarts.init(document.getElementById('myChart')); ``` 2. 在 ECharts 实例上注册 `click` 事件，例如： ```javascript myChart.on('click', function(params) { console.log(params); // 打印出点击事件的参数 }); ``` 3. 在 `params` 参数中获取被点击的饼图块的索引，例如： ```javascript var clickedIndex = params.dataIndex; ``` 4. 根据索引来判断是哪个饼图块被点击，例如： ```javascript if (clickedIndex === 0) { console.log('第一个饼图块被点击了'); } else if (clickedIndex === 1) { console.log('第二个饼图块被点击了'); } else if (clickedIndex === 2) { console.log('第三个饼图块被点击了'); } ``` 完整的代码示例： ```javascript var myChart = echarts.init(document.getElementById('myChart')); var option = { series: [ { type: 'pie', data: [ { value: 10, name: 'A' }, { value: 20, name: 'B' }, { value: 30, name: 'C' }, ], }, ], }; myChart.setOption(option); myChart.on('click', function(params) { var clickedIndex = params.dataIndex; if (clickedIndex === 0) { console.log('第一个饼图块被点击了'); } else if (clickedIndex === 1) { console.log('第二个饼图块被点击了'); } else if (clickedIndex === 2) { console.log('第三个饼图块被点击了'); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值