echarts自定义右键事件的实现

给鼠标添加自定义右击事件,由于历史版本原因,echarts2在项目中仍然有比较大的使用占比,用到图表的很多地方依然建立在echarts2版本之上。这里主要讲解一下项目开发过程中对于不同版本的echarts图标添加自定义右键事件;

echarts2右键实现

在echarts2.x 的版本中对于开发者是不支持自定义右击事件的,但是可通过修改源码来实现效果;
echarts2.x源码修改文件有config.js和echarts.js文件两个部分;
1、修改源码文件config.js
config.js文件主要是开放给开发者可调用的属性和方法,用来处理用户的选择。首先需要开放一个右键动作给开发者调用:
给config文件注册右键事件CONTEXTMENU,开放右键事件入口给开发者,开发者可以使用CONTEXTMENU来添加自定义的右
键属性;

2、修改源码文件echarts.js
echarts.js内部依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,首先需要给全局通用
变量ZR_EVENT_LISTENS中添加CONTEXTMENU事件;构造函数根据注册的事件集合向底层ZRender初始化各个点
击动作;

初始化构造函数中注册右击事件动作:

3、页面添加右键事件
js中调用自定义的CONTEXTMENU事件:

再看页面效果出现自定义右击效果;
4、屏蔽默认右键属性
在页面查看时,会发现默认的右击事件效果还在,还是会出现插件自带的右击事件,保存图片等;
所以需要先根据需求来屏蔽自带右键属性,再调用自定义实现定制右键特效;

这样一个基于echarts2版本的完整右击特效就实现了。

echarts3右键实现

熟悉官网echarts3的api可看到在对外开放给开发者的事件EVENT列表中,已将contextmenu事件开放,只需引用
on方法添加contextmenu事件即可实现自定义事件。
1、添加事件
使用on方法:

在看页面效果,出现自定义右击效果;
2、屏蔽默认右键属性
同样的问题,会发现默认的右击事件效果还在,还是会出现默认的右击事件,保存图片等;

示例实现
目标:右击显示一个自定义小菜单,触发右键动作展示自定义菜单,菜单出现位置随鼠点击的位置变化,鼠标移出
菜单区域时隐藏菜单;
右键特效:基于以上两种不同版本的实现方法,可以实现自定义的菜单;
菜单位置效果:打印鼠标的右击参数,点击获取的参数中的event提供一些基础的坐标属性;对于echarts2和3版本
获取坐标的参数位置与格式有所不同,需区别对待;部分参数如:type:”contextmenu”,offsetX:200,
offsetY:140等。
取鼠标右击的坐标offsetX,offsetY属性:

 

    • 新建单位

 

 

 

以上方案,基本实现了目标中要求。方案中菜单隐藏依赖的是onMouseOver事件,但是当onMouseOver一直未触
发时,菜单的隐藏就会出现不会隐藏的问题,如何解决?
完善修改:添加点击事件主动隐藏菜单,当下一次点击事件触发时主动隐藏;

 

发表评论