echar2 ,3 自定义右键菜单 右击事件
echarts2右键实现
在echarts2.x 的版本中对于开发者是不支持自定义右击事件的,但是可通过修改源码来实现效果;
echarts2.x源码修改文件有config.js和echarts.js文件两个部分;
1、修改源码文件config.js
config.js文件主要是开放给开发者可调用的属性和方法,用来处理用户的选择。首先需要开放一个右键动作给开发者调用:
给config文件注册右键事件CONTEXTMENU,开放右键事件入口给开发者,开发者可以使用CONTEXTMENU来添加自定义的右
键属性;
1 2 3 4 5 6 7 8 9 10 11 12 13 |
EVENT: { // ‐‐‐‐‐‐‐全局通用 REFRESH: 'refresh', RESTORE: 'restore', RESIZE: 'resize', CLICK: 'click', DBLCLICK: 'dblclick', CONTEXTMENU: 'contextmenu', #注册右击事件配置contextmenu HOVER: 'hover', MOUSEOUT: 'mouseout', }, |
2、修改源码文件echarts.js
echarts.js内部依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,首先需要给全局通用
变量ZR_EVENT_LISTENS中添加CONTEXTMENU事件;构造函数根据注册的事件集合向底层ZRender初始化各个点
击动作;
1 2 3 4 5 |
var ZR_EVENT_LISTENS = [ 'CLICK', 'DBLCLICK', 'CONTEXTMENU', 'MOUSEOVER', 'MOUSEOUT', 'DRAGSTART', 'DRAGEND', 'DRAGENTER', 'DRAGOVER', 'DRAGLEAVE', 'DROP' |
初始化构造函数中注册右击事件动作:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Echarts.prototype = { _oncontextmenu: function (param) { if (param.target) { var ecData = this._eventPackage(param.target); if (ecData && ecData.seriesIndex != null) { this._messageCenter.dispatch(ecConfig.EVENT.CONTEXTMENU, param.event, ecData, this); } } } } |
3、页面添加右键事件
js中调用自定义的CONTEXTMENU事件:
1 2 3 4 5 6 7 8 9 10 11 |
var ec = require('echarts'); var chart = ec.init(document.getElementById("tree")); chart.setOption(option); //添加右击事件 var ecConfig = require('echarts/config'); chart.on(ecConfig.EVENT.CONTEXTMENU, showMenu); function showMenu(param){ console.log('param===',param); } |
再看页面效果出现自定义右击效果;
4、屏蔽默认右键属性
在页面查看时,会发现默认的右击事件效果还在,还是会出现插件自带的右击事件,保存图片等;
所以需要先根据需求来屏蔽自带右键属性,再调用自定义实现定制右键特效;
1 2 3 4 5 6 |
var tree = document.getElementById("tree"); tree.oncontextmenu = function() { return false; }; |
这样一个基于echarts2版本的完整右击特效就实现了。
echarts3右键实现
熟悉官网echarts3的api可看到在对外开放给开发者的事件EVENT列表中,已将contextmenu事件开放,只需引用
on方法添加contextmenu事件即可实现自定义事件。
1、添加事件
使用on方法:
1 2 3 4 5 6 7 |
//新加上鼠标右击事件 myChart.on('contextmenu', showMenu); function showMenu(param){ console.log('param===',param); } |
在看页面效果,出现自定义右击效果;
2、屏蔽默认右键属性
同样的问题,会发现默认的右击事件效果还在,还是会出现默认的右击事件,保存图片等;
1 2 3 4 5 6 |
//去除默认的鼠标事件 var tree = document.getElementById("tree"); tree.oncontextmenu = function() { return false; }; 即可实现效果 |
示例实现
目标:右击显示一个自定义小菜单,触发右键动作展示自定义菜单,菜单出现位置随鼠点击的位置变化,鼠标移出
菜单区域时隐藏菜单;
右键特效:基于以上两种不同版本的实现方法,可以实现自定义的菜单;
菜单位置效果:打印鼠标的右击参数,点击获取的参数中的event提供一些基础的坐标属性;对于echarts2和3版本
获取坐标的参数位置与格式有所不同,需区别对待;部分参数如:type:”contextmenu”,offsetX:200,
offsetY:140等。
取鼠标右击的坐标offsetX,offsetY属性:
1 2 3 4 5 6 7 8 9 10 11 |
js: function showMenu(param){ console.log('p==============',param); var menu = document.getElementById("struct_menu"); var event = param.event; menu.style.left = event.offsetX + 'px'; menu.style.top = event.offsetY + 20 + 'px'; menu.style.display = "block"; } html: |
- 新建单位
1 |
1 |
以上方案,基本实现了目标中要求。方案中菜单隐藏依赖的是onMouseOver事件,但是当onMouseOver一直未触
发时,菜单的隐藏就会出现不会隐藏的问题,如何解决?
完善修改:添加点击事件主动隐藏菜单,当下一次点击事件触发时主动隐藏;
1 2 3 4 5 6 7 |
chart.on('click', hideMenu); function hideMenu(param) { var menu = document.getElementById("struct_menu"); menu.style.display = "none"; } |
echar2 ,3 自定义右键菜单 右击事件相关推荐
- 桌面 html 自定义,【极简壁纸 - 技术分享】html js自定义右键菜单方法
自定义右键菜单 极简壁纸2.0 地址: https://bz.zzzmh.cn 目前进度已开发到95% 近期有时间就会分享一下,我在开发过程中用到的一些小技术的简单用法和demo 关于html js右 ...
- JS简单实现自定义右键菜单
今天来讲一个关于右键菜单的小demo,抛砖引玉. 首先,我们要用css和html做一个自定义右键菜单. <!--自定义右键菜单html代码--> <div id="menu ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
- DevExpress的TreeList实现自定义右键菜单打开文件选择对话框
场景 DevExpress的TreeList实现节点上添加自定义右键菜单并实现删除节点功能: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
- vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
- linux右键菜单颜色,Linux_自定义右键菜单代码详解, style !-- /*定义菜单 - phpStudy...
自定义右键菜单代码详解 < style > < !-- /*定义菜单方框的样式1*/ .skin0 { position:absolute; text-align:left; wid ...
- java 树 右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...
- [读码时间] 自定义右键菜单
说明:代码取自网络,CSS中注释为笔者学习时添加,JS中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
- win10 自定义右键菜单
win10 自定义右键菜单 首先使用快捷键 win + r 打开运行窗口,在其中输入 regedit 然后点击 确定 进入注册表后,按照顺序找到位置: HKEY_LOCAL_MACHINE\SOFTW ...
- Chrome开发自定义右键菜单实现快速跳转到指定页面
一.背景 假设我们在日常的测试过程中,有很多页面需要经常访问,一种方式是我们可以直接把这些页面添加为书签,但这种方式必须记录完整的URL.如果我们有多套环境,比如有测试环境.UAT环境.线上环境,每套 ...
最新文章
- 剑指offer_第13题_调整数组顺序使奇数位于偶数前面
- cgi、fastcgi、php-cgi、php-fpm的关系
- 推荐一款好工具:16进制字节搜索工具 C#的效率
- 网页上的图片怎么提取出来_如何在网站上提取图片素材
- php制图汉字,PHP用imageTtfText函数在图片上写入汉字
- Linux7使用光盘作为本地repo源
- android libbfaac.so,Android中Json数据读取与创建
- 别忘记了修正反欺诈中的这些内容
- Java 1.1.7 String API (!!!)
- SharpDevelop 如何切换设计视图和代码视图
- html canvas php,关于HTML canvas的总结
- 显卡煲机测试软件,不用再煲机!这款耳机可自动调音给你提供定制化音频
- 史上最好用的GIF工具——ScreenToGif
- sus补丁分发,局域网自动打补丁服务的架设过程
- 上古卷轴5捏脸php导入,上古卷轴5捏脸预设导入 上古卷轴5捏脸预设怎么导入
- JetBrains各版本全家桶工具 编程开发全套永久软件!IDE也能免费用
- 医疗器械标准目录 第二部分专业技术领域(2)
- DPG(确定策略梯度)
- golang Opts Pattern
- android 客户端使用service处理用户名和密码验证,android透过webservice验证用户