ECharts 事件处理

概述

• ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。
• ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。
• ECharts 中事件分为两种类型:
  • 一种是鼠标事件，在鼠标点击某个图形上会触发
    • 用户鼠标操作点击，如：’click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’、’globalout’、’contextmenu’ 事件。
  • 还有一种是 调用 dispatchAction 后触发的事件
    • 还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘datazoom’ 事件等等。
    • 注：在 ECharts 2.x 是通过 myChart.component.tooltip.showTip 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。因此在 ECharts 3 里统一改为 dispatchAction 的形式。

On函数的参数：

eventName

• 事件名称，全小写，例如’click’，’mousemove’, ‘legendselected’
• 注： ECharts 2.x 中会使用 config 对象中的 CLICK 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。

query

• 可选的过滤条件，能够只在指定的组件或者元素上进行响应。可为 string 或者 Object。
• 如果为 string 表示组件类型。格式可以是 ‘mainType’ 或者 ‘mainType.subType’。例如：

  chart.on('click', 'series', function () {...});
  chart.on('click', 'series.line', function () {...});
  chart.on('click', 'dataZoom', function () {...});
  chart.on('click', 'xAxis.category', function () {...});

如果为 Object，可以包含以下一个或多个属性，每个属性都是可选的：

  {
      <mainType>Index: number // 组件 index
      <mainType>Name: string // 组件 name
      <mainType>Id: string // 组件 id
      dataIndex: number // 数据项 index
      name: string // 数据项 name
      dataType: string // 数据项 type，如关系图中的 'node', 'edge'
      element: string // 自定义系列中的 el 的 name
  }

例如：

  chart.setOption({
      // ...
      series: [{
          name: 'uuu'
          // ...
      }]
  });
  chart.on('mouseover', {seriesName: 'uuu'}, function () {
      // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
  });

例如：

  chart.setOption({
      // ...
      series: [{
          // ...
      }, {
          // ...
          data: [
              {name: 'xx', value: 121},
              {name: 'yy', value: 33}
          ]
      }]
  });
  chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
      // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
  });

例如：

  chart.setOption({
      // ...
      series: [{
          type: 'graph',
          nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
          edges: [{source: 0, target: 1}]
      }]
  });
  chart.on('click', {dataType: 'node'}, function () {
      // 关系图的节点被点击时此方法被回调。
  });
  chart.on('click', {dataType: 'edge'}, function () {
      // 关系图的边被点击时此方法被回调。
  });

例如:

  chart.setOption({
      // ...
      series: {
          // ...
          type: 'custom',
          renderItem: function (params, api) {
              return {
                  type: 'group',
                  children: [{
                      type: 'circle',
                      name: 'my_el',
                      // ...
                  }, {
                      // ...
                  }]
              }
          },
          data: [[12, 33]]
      }
  })
  chart.on('mouseup', {element: 'my_el'}, function () {
      // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
  });

handler

• 事件处理函数。格式为:
• (event: Object)

context

• 可选。回调函数内部的context，即this的指向。