本文详细解析ECharts中常见的9种鼠标事件，重点讲解click、dblclick等事件的触发机制及params参数的使用。通过招生柱状图和产品销量案例，演示如何监听鼠标点击事件、获取数据信息并实现弹窗交互与页面跳转，帮助开发者掌握图表交互开发技巧。
ECharts鼠标事件概述
事件是指用户操作或浏览器自身执行的动作，例如click、mouseover以及页面加载完成的load事件。为了追踪用户操作路径并实现组件间的交互，需要妥善处理鼠标事件及行为事件。
响应特定事件的函数被称为事件处理程序，也常称为事件处理函数或事件句柄。鼠标事件指的是当鼠标对图表图形进行操作时触发的事件，包括点击图形（如click、dblclick、contextmenu）或悬停于图形上（如mouseover、mouseout、mousemove）所引发的响应。
在ECharts中，用户的各类操作均可能触发对应事件。ECharts支持9种常规鼠标事件，具体包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout以及contextmenu。
其中，click事件的应用最为广泛。常规鼠标事件及其具体说明如表所示。
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>
鼠标事件参数params详解
在ECharts中，所有鼠标事件均包含一个名为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.dataIndex、params.name、params.seriesName和params.value。在代码倒数第12、13行，输出了“第2件产品:羊毛衫产量为38”的信息。
代码倒数第11行至倒数第2行依次访问鼠标事件参数params中的10种基本属性，并将这些信息依次显示在图5-13的提示对话框的每一行中。
需要注意的是，其中params.data和params.dataType的值显示为undefined。
总结
至此，关于ECharts鼠标事件处理的文章介绍完毕。如需了解更多ECharts鼠标事件相关内容，请搜索本站往期文章或继续浏览后续文章，感谢大家的支持！