ECharts鼠标事件的处理方法详解
事件是用户或浏览器自身执行的某种动作，如click、mouseover、页面加载完毕后触发load事件，都属于事件。
为了记录用户的操作和行为路径，需要完成鼠标事件处理和组件交互的行为事件的处理。
响应某个事件的函数称为事件处理程序，也可称为事件处理函数、事件句柄。鼠标事件即鼠标操作点击图表的图形（如click、dblclick、contextmenu）或hover图表的图形（如mouseover、mouseout、mousemove）时触发的事件。
在ECharts中，用户的任何操作，都可能会触发相应的事件。在ECharts中，支持9种常规的鼠标事件，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。
其中，click事件最为常用。常规的鼠标事件及说明如表所示。
在一个图表元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。如果取消了mousedown或mouseup中的一个，click事件就不会被触发。如果直接或间接取消了click事件，dblclick事件就不会被触发。
利用某学院2020年专业招生情况绘制柱状图，如图所示。
当点击添加鼠标单击事件的柱状图中的“人工智能”柱体后，弹出一个提示对话框，如上图所示。
单击提示对话框的确定按钮后，将自动打开相应的百度搜索页面，如下图所示。
该图例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main")); //基于准备好的dom，初始化ECharts图表
var option = { //指定图表的配置项和数据
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: { text: '某学院2020年专业招生情况汇总表', left: 70, top: 9 },
tooltip: { tooltip: { show: true }, },
legend: { data: ['2019年招生'], left: 422, top: 8 },
xAxis: { //配置x轴坐标系
data: ["大数据", "云计算", "ERP", "人工智能", "软件开发", "移动开发", "网络技术"]
},
yAxis: {}, //配置y轴坐标系
series: [{ //配置数据系列
name: '招生人数:',
type: 'bar', barWidth: 55, //设置柱状图中每个柱子的宽度
data: [350, 200, 66, 210, 466, 200, 135]
}]
};
myChart.setOption(option); //使用刚指定的配置项和数据显示图表
//回调函数处理鼠标点击事件并跳转到相应的百度搜索页面
myChart.on('click', function (params) {
var yt = alert("鼠标单击事件,您刚才单击了:" + params.name);
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
});
myChart.setOption(option); //为echarts对象加载数据
</script>
</body>
</html>
在ECharts中，所有的鼠标事件都包含一个参数params。params是一个包含单击图形的数据信息的对象，params中的基本属性及含义如表所示。
回调函数本身是主函数的一个参数，将回调函数作为参数传到另一个主函数中，当主函数执行完后，再执行回调函数。这个过程就叫作回调。在回调函数中获得对象中的数据名、系列名称，然后在数据中索引得到其他的信息后，再更新图表、显示浮层等。
利用产品销量和产量利润数据绘制柱状图，如图所示。
当单击左图中的第2件产品“羊毛衫”的“产量”柱体后，弹出一个提示对话框，如右图所示。
由右图可以得到左图中的第2件产品“羊毛衫”的“产量”柱体params参数的各属性信息。
图例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
var option = { //指定图表的配置项和数据
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
title: { text: '产品销量产量利润统计', left: 70, top: 9 },
xAxis: { //配置x轴坐标系
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {}, //配置y轴坐标系
tooltip: { //配置提示框组件
trigger: 'item', show: true,
formatter: "{a} <br/>{b} : {c}"
},
legend: {},
series: [ //配置数据系列
{ //设置数据系列1：销量
name: '销量', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ //设置数据系列2：产量
name: '产量', type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{ //设置数据系列3：利润
name: '利润', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //使用刚指定的配置项和数据显示图表
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
});
//回调函数处理鼠标点击事件并且显示各数据信息内容
myChart.on('click', function (params) {
alert("第" + (params.dataIndex + 1) + "件产品:" + params.name + "的" +
params.seriesName + "为:" + params.value +
"\n\n 1--componentType:" + params.componentType +
"\n 2--seriesType:" + params.seriesType +
"\n 3--seriesIndex:" + params.seriesIndex +
"\n 4--seriesName:" + params.seriesName +
"\n 5--name:" + params.name +
"\n 6--dataIndex:" + params.dataIndex +
"\n 7--data:" + params.datax +
"\n 8--dataType:" + params.dataType +
"\n 9--value:" + params.value +
"\n 10--color:" + params.color);
});
myChart.setOption(option); //为echarts对象加载数据
</script>
</body>
</html>
在包含鼠标单击事件的参数params的柱状图代码中，可以通过调用回调函数，访问鼠标事件的参数params中的基本属性，如params.dataIndex、params.name、params.seriesName、params.value，在倒第数12、13行 显示出“第2件产品:羊毛衫产量为38”。
倒数第11行至倒数第2行代码 依次访问鼠标事件的参数params中的10种基本属性，并依次显示在图5-13的提示对话框中的每一行上。
注意，其中的params.data，params.dataType的值为undefined。
总结
到此这篇关于ECharts鼠标事件处理的文章就介绍到这了,更多相关ECharts鼠标事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
echarts 使用formatter 修改鼠标悬浮事件信息操作
formatter 一般用于格式化鼠标悬浮时间的信息,如果你的数据是JSON数组格式,那么不必和我这样一一判断扇形图的 ticket 值,使用 formatter 的 callback 时间即可自行对应 formatter: function (params, ticket, callback) { console.log(params); console.log(ticket); var str = '明细:<br/>'; if(ticket == 'item_操作概况_0'){ for(v
-
ECharts鼠标事件的处理方法详解
事件是用户或浏览器自身执行的某种动作,如click.mouseover.页面加载完毕后触发load事件,都属于事件. 为了记录用户的操作和行为路径,需要完成鼠标事件处理和组件交互的行为事件的处理. 响应某个事件的函数称为事件处理程序,也可称为事件处理函数.事件句柄.鼠标事件即鼠标操作点击图表的图形(如click.dblclick.contextmenu)或hover图表的图形(如mouseover.mouseout.mousemove)时触发的事件. 在ECharts中,用户的任何操作,都可能会
-
jquery 键盘事件的使用方法详解
jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); 2. keyup(); 3. keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按
-
C#事件(event)使用方法详解
事件(event),这个词儿对于初学者来说,往往总是显得有些神秘,不易弄懂.而这些东西却往往又是编程中常用且非常重要的东西.大家都知道windows消息处理机制的重要,其实C#事件就是基于windows消息处理机制的,只是封装的更好,让开发者无须知道底层的消息处理机制,就可以开发出强大的基于事件的应用程序来. 先来看看事件编程有哪些好处. 在以往我们编写这类程序中,往往采用等待机制,为了等待某件事情的发生,需要不断地检测某些判断变量,而引入事件编程后,大大简化了这种过程: - 使用事件,可以很方
-
javascript 事件处理、鼠标拖动效果实现方法详解
先看看要拖动的层(模拟窗口)的效果图吧. 要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动.窗口: 复制代码 代码如下: <div id="win"> <div id="win_header"></div> </div> 一点准备工作: 要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): 给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标
-
asp.net中c#自定义事件的实现方法详解
本文实例讲述了asp.net中c#自定义事件的实现方法.分享给大家供大家参考.具体分析如下: c#自定义事件分为六步,声明关于事件的委托,声明事件,编写引发事件的函数,事件处理,这里我们就来具体的介绍一下. C#自定义事件的具体实现步骤如下: 1.声明一个delegate: (用于事件的类型的定义) 如: 复制代码 代码如下: public delegate void 事件名称EventHandler(object serder, EventArgs e); 事件名称用你的自己的来代替,随后的E
-
Vue中添加滚动事件设置的方法详解
一.问题发现 在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件. <div @scroll='showOut'></div> 二.原因分析 暂无 三.解决办法 1.直接利用mousewheel事件替代scroll事件 <div @mousewheel='showOut'></div> mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是
-
vue的事件绑定与方法详解
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'body', methods : { say : function(){ alert( '欢迎学习vue' ); } } }); } <input type="button" value="点我" v-on:click="say();"/>
-
深入Java Robot实现控制鼠标和键盘的方法详解
Java.awt.Robot 类用于控制鼠标和键盘.一旦你得到这种控制,你能够通过你的Java代码做与鼠标和键盘任何类型的操作.这个类通常用于自动化测试.下面的代码样例将向您展示Robot类如何处理键盘事件.如果你运行此代码,并打开notepad,您将在notepad中看到HI CAOER.赶快试一试吧. 复制代码 代码如下: import java.awt.AWTException;import java.awt.Robot;import java.awt.event.KeyEvent;pub
-
Vue使用Echarts实现数据可视化的方法详解
目录 一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Echarts 2.3 使用模板 2.4实例 2.4.1柱状图(折线图变换) 2.4.2极坐标柱状图标签 总结 一,Echarts 一个基于 JavaScript 的开源可视化图表库 Echarts官网 https://echarts.apache.org/zh/index.html 1.1 获取ECharts (1)从 npm 获取(项
-
JS阻止事件冒泡的方法详解
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/