给ECharts添加右键点击事件,实现右键功能菜单

本文介绍了如何在ECharts力导向图中添加右键点击事件,以实现自定义的功能菜单。通过修改ECharts源码,新增'CONTEXTMENU'事件,避免了与现有点击事件冲突的问题。示例代码展示了设置右键菜单的实现方法,并提供了修改后的ECharts.js文件下载链接。
摘要由CSDN通过智能技术生成

由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2.2.2 的echarts.js给修改了一番。将过程描述如下,后面提供修改后的echarts.js下载,欢迎使用!

 

先说明一下,js获得右键事件大概从下面两个事件考虑:

1、onmousedown:通过判断e.button = '2' 时,响应右键事件。

2、oncontextmenu:通过先屏蔽默认的右键菜单事件,再给需要响应右键菜单的组件加上contextmenu的响应。

 

第一种,我先实现了,但是ECharts的组件定以有click事件和鼠标拖动事件,所以在mousedown的时候又触发多个事件,这样做起来,页面在快速点击测试的时候,总是感觉反映迟钝,甚至造成部分不响应。所以最后选了第二种做法:

 

新增'CONTEXTMENU'事件:

 var ZR_EVENT_LISTENS = [
        'CLICK',
        'DBLCLICK',
        'CONTEXTMENU',
        'MOUSEOVER',
        'MOUSEOUT',
        'DRAGSTART',
        'DRAGEND',
        'DRAGENTER',
        'DRAGOVER',
        'DRAGLEAVE',
        'DROP'
    ];

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值