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。