Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件?
1.通常我们只使用了以下代码,通过配置项和数据显示图表。
var myChart = echarts.init(document.getElementById('chartBox'));
var option = {...};
myChart.setOption(option);
2.在myChart.setOption(option)后添加以下代码,即可触发图标中每个项的鼠标点击事件。
myChart.on('click', function(param) {
//这个params可以获取你要的图中的当前点击的项的参数
console.dir(param)
});
注:鼠标事件包括'click','dblclick','mousedown','mouseup','mouseover','mouseout','globalout','contextmenu'。
3.如果逻辑运行中,第2点中的代码,执行了多次,则绑定之前需要清除绑定:
//防止重复触发点击事件
if(myChart._$handlers.click){
myChart._$handlers.click.length = 0;
}
myChart.on('click', function(params) {
//这个params可以获取你要的饼图中的当前点击的项的参数
_this.showMapPointInfo(params,param);
});
标签:
Echarts
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用