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

2023-11-09

由于项目的需要,使用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'
    ];

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

给ECharts添加右键点击事件,实现右键功能菜单 的相关文章

  • ngRepeat 中的函数执行过于频繁

    我有三个tabs里面有不同的htmlng include 这些选项卡使用以下方式显示ng repeat 只有一个 HTML 模板包含函数调用 但它执行了 3 次 每个模板执行一次 ng repeat迭代 这里出了什么问题以及如何解决它 va
  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • 数字和数字对象有什么区别?

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description
  • DOM 元素宽度可以是非整数吗?

    我有一个页面 其 div 元素由 JavaScript 对齐 JavaScript 只是检查一组 div 元素来查找最大值偏移宽度 然后设置所有 div 元素 width成为最大偏移宽度 它在大多数浏览器和区域设置中都能完美运行 但在 Ma
  • Javascript - window.getCompulatedStyle 返回“auto”作为元素顶部和左侧属性

    在我的网页上 我有一些元素 div 子 div 按钮等 其位置是相对于它们所在的 div 以及彼此之间生成的 这会导致使用时的结果window getCompatedStyle the top and left属性不是数字值 而是简单的 a
  • 等待两个异步函数完成,然后在 Node.js 中继续

    我正在 Node js 中开发一个应用程序 其中调用异步函数两次 并将值分配给全局变量 问题是我想使用这两个调用的结果来做其他事情 但是这个其他事情不会等待结果被分配 这是我的代码 var a var b let x abcd foo x
  • 如何在 jquery 中创建“可重用”函数?

    我有这段代码效果很好 function displayVals var phonevals bphonesel val bphone val phonevals select change displayVals displayVals 我
  • 如何从谷歌地图中的纬度和经度获取地址位置? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能
  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳
  • 过滤文件上传仅用于文本文件

    我使用的是 Firefox 版本 14 0 1 我需要过滤上传文件窗口以仅显示 txt files 我的浏览器不仅仅支持文本文件 text plain 我可以通过指定此格式来限制图像文件 image 但我只需要过滤文本文件在文件选择器窗口中
  • ChartRangeFilter 作为谷歌时间轴图表的缩放功能,可使用数据视图从专用谷歌电子表格中读取数据

    我的目标是整合Whitehat 提供的这种缩放功能 https stackoverflow com questions 49306638 google timeline visualization dont change series ro
  • IE7 真的不支持indexOf javascript 吗? [复制]

    这个问题在这里已经有答案了 可能的重复 数组上的 indexOf 函数在使用 JavaScript 的 IE7 8 中不起作用 https stackoverflow com questions 11544983 indexof funct
  • 如何检查浏览器中消失的元素?

    How can I inspect an element which disappears when my mouse moves away 我不知道它的 ID 类别或其他任何信息 但想检查它 我尝试过的解决方案 在控制台内运行 jQuer
  • 点击事件的事件处理程序自动触发 - jQuery [重复]

    这个问题在这里已经有答案了 可能的重复 为什么单击事件处理程序会在页面加载后立即触发 https stackoverflow com questions 7102413 why does click event handler fire i
  • 在单页应用程序上重用 Google Maps API 实例

    假设我有一个单页应用程序 Angular JS 应用程序 并且我在元素 id 上绘制一个 Google 地图实例googleMap var mapInstance new google maps Map document getElemen
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r
  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能
  • Angular CDK Overlay,更改默认覆盖容器

    有没有办法改变OverlayContainer 我创建了一个工具提示组件 但有时我想将叠加层附加到特定元素 默认情况下 叠加层附加到文档正文 以下是我创建叠加层的方法 private initOverlay void const posit
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的

随机推荐

  • multiple definition of(变量或者函数)

    今天在公司写项目的时候 遇到如下错误 半个小时了 没看出来问题出在哪里 我看了好几遍代码 确认没有重定义 后来问旁边的大牛 才发现自己手误 错吧 include area h 写成 include area c 千万得小心啊 有时候心里想的
  • Qt + C++编程问题系列1:解决因this指针被析构导致的崩溃问题<初识enable_shared_from_this类及使用智能指针的好处>

    这里是目录 前言 原因 解决办法 boost和C 11 结尾 前言 在基于Qt和C 开发的程序运行的时候 程序突然发生崩溃 在查找原因的时候花费的时间比较多 情形一般情况遇不到 因此写篇博客记录一下 原因 在Qt编程中 很多时候为了不让数据
  • Hive 安装与配置步骤

    Hive 安装与配置步骤 一 下载版本 1 1下载hive 1 2 直接用 wget 下载 1 3 解压 二 配置文件 2 1 修改hive env sh 2 2 修改hive log4j properties 2 3 配置MySQL作为M
  • C++库std::flush介绍

    std flush 介绍 使用场景 示例 调试场景 实时进度指示场景 保证日志完整性场景 介绍 std flush 是C 标准库 中的一个操作符 用于刷新输出流 刷新输出流表示将缓冲区中的数据立即发送到关联的输出设备 例如屏幕或文件 在某些
  • R语言金融分析作业(一)

    1 从WDI分别下载所有国家2016年和2017年GDP数据 1 计算经济增长 2 变成宽数据 library WDI library reshape 在线获取数据 DF lt WDI country all indicator NY GD
  • python导出时序数据精度缺失解决办法(对时序数据重采样)

    源码 import pandas as pd 导入数据 parse dates True 将时间转换成时间类型的索引 df pd read excel D 机器人采集数据样本 xlsx index col 时间 parse dates Tr
  • 七天玩转Redis

    目录 1 搭建环境 2 测试Redis 3 StringRedisTemplate 3 1 介绍 3 2 StringRedisTemplate常用操作 3 3 StringRedisTemplate的使用 4 RedisTemplate
  • Swing开发之JComboBox篇

    JList和ComboBox很相似 因为这两个组件都显示一个项列表 因此 它们都有扩展ListModel接口的模型 而且 这两个组件都有绘制器 这些绘制器通过实现ListCellBenderer接口来绘制列表单元 但是 列表和组合框在施工方
  • 装上后这 14 个插件后,PyCharm 真的是无敌的存在

    来源 Python编程时光 作者 写代码的明哥 Key Promoter X 如果让我给新手推荐一个 PyCharm 必装插件 那一定是 Key Promoter X 它就相当于一个快捷键管理大师 它时刻地在 教导你 当下你的这个操作 应该
  • linux查看设备网卡MAC和IP地址以及设置MAC ip的注意事项

    1 查看设备的MAC和IP Linux Unix操作系统熟悉的人都通常是用console命令控制台来进行相应的操作 Linux Unix操作系统查看网卡mac地址的方法可以通过以下命令获得 1 ifconfig a 2 ip link sh
  • 华为OD机试 - 简单的解压缩算法

    题目描述 现需要实现一种算法 能将一组压缩字符串还原成原始字符串 还原规则如下 1 字符后面加数字N 表示重复字符N次 例如 压缩内容为A3 表示原始字符串为AAA 2 花括号中的字符串加数字N 表示花括号中的字符重复N次 例如压缩内容为
  • Ubuntu检查apt-get软件列表

    1 搜索所有列表 sudo apt cache search all 2 搜索所有软件并去掉重复 sudo apt cache search all wc 3 检索指定软件 sudo apt cache search all grep gc
  • Android 全局黑白化-模拟颜色空间

    概述 平台 RK3568 Android 11 在一些特殊的日子 如默哀日 灾难日 纪念日 哀悼日等 许多的APP 网页 海报等都开始使用黑白色主题 Android 的全局黑白实现方案 可以考虑使用模拟颜色空间的方法 借助硬件加速渲染选项
  • Altium Designer 20 (14)——绿色报错消除

    一 问题 再更新完PCB之后会有绿色报错 二 问题解决 这是一种错误提示 2 1 解决一 按下TM 复位绿色报错 但是移动就会出现 2 2 解决二 设计规则检查 关掉所有检查 留下电器检查 这样要还是存在绿色报错 点击TM 2个按键就好了
  • 实现KNN算法&搭建人工神经网络ANN——第三次数据挖掘实验

    实验结果直接戳这里免费下载实验报告 决策树算法的实验还没做 做了之后再上传吧 最近有点忙555 文章目录 1 KNN算法 1 1 KNN算法原理 1 2 KNN算法的优点 1 3 KNN算法的缺点 1 4 KNN的做法 目的 1 5 编程实
  • qt 正则表达式

    以上是正则表达式的格式说明 以下是自己写的正则表达式 22 25行 是一种设置正则表达式的方式 29 34行 29行 new一个正则表达式的过滤器对象 30行 正则表达式 的过滤格式 这个格式是0 321的任意数字都可以输入 31行 将过滤
  • 8月21日星期三 恒指/美原油/美黄金 走势分析

    财经早餐 2019年8月21日星期三 重点关注的财经数据与事件 20 30 加拿大7月CPI月率 22 00 美国7月成屋销售总数年化 22 30 美国至8月16日当周EIA原油库存 次日02 00 美联储公布7月货币政策会议纪要 恒指 恒
  • csp试题1:小明种苹果

    csp试题1 小明种苹果 题目 分析 代码 总结 题目 题目描述 小明在他的果园里种了一些苹果树 为了保证苹果的品质 在种植过程中要进行若干轮疏果操作 也就是提前从树上把不好的苹果去掉 第一轮疏果操作开始前 小明记录了每棵树上苹果的个数 每
  • javaSE基本思维导图

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

    由于项目的需要 使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析 由于ECharts并没有给组件定义有右键的事件 同时ECharts是开源的项目 所以研究了下源码 将ECharts2 2 2 的echarts js给修改了