echarts3鼠标右击事件实现

echarts3已将contextmenu事件开放,只需引用on方法添加contextmenu事件即可实现自定义事件。
废话不多说直接上代码,小伙伴可直接拷贝代码到html文件,然后浏览器打开体验

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
dom.oncontextmenu = () => {return false} //屏蔽右键默认事件
myChart.on('contextmenu', function (params) { //调用右键事件
    // 控制台打印数据的名称
    console.log(params);
});
       </script>
   </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,052评论 3 119
  • 1.玩本身就是学习的过程。 2.找到内心召唤的事情。 3.教育当中激情最重要、决心、自信。 不要打击孩子的自信心。...
    松球42阅读 4,535评论 0 1
  • 从上海8月9号回家到现在,第一次拿起手机写简书,有那么忙吗?说实话,不忙!事情多吗?不多! 回来后家里还真的思绪很...
    桂花香香阅读 1,677评论 1 6
  •  常常听说数据预处理,后处理相对少见,本篇来说说何时需要后处理,以及后处理的一些简单方法。  数据挖掘的流程一般是...
    xieyan0811阅读 5,275评论 0 1
  • 如何推销自己的产品,让自己的产品走向市场,在市场上占有一席之地,是春生的魂牵梦绕,它直接关系到产品的销量,直接关系...
    西岭布衣阅读 884评论 0 2