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年专业招生情况绘制柱状图，如图所示。

当点击添加鼠标单击事件的柱状图中的“人工智能”柱体后，弹出一个提示对话框，如上图所示。

单击提示对话框的确定按钮后，将自动打开相应的百度搜索页面，如下图所示。

该图例的源代码如下：

在ECharts中，所有的鼠标事件都包含一个参数params。params是一个包含单击图形的数据信息的对象，params中的基本属性及含义如表所示。

回调函数本身是主函数的一个参数，将回调函数作为参数传到另一个主函数中，当主函数执行完后，再执行回调函数。这个过程就叫作回调。在回调函数中获得对象中的数据名、系列名称，然后在数据中索引得到其他的信息后，再更新图表、显示浮层等。

利用产品销量和产量利润数据绘制柱状图，如图所示。

当单击左图中的第2件产品“羊毛衫”的“产量”柱体后，弹出一个提示对话框，如右图所示。

由右图可以得到左图中的第2件产品“羊毛衫”的“产量”柱体params参数的各属性信息。

图例的源代码如下：

在包含鼠标单击事件的参数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鼠标事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！