事件与行为

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

在 ECharts 中事件分为 两种 类型：

1. 一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件：

   • click：用户鼠标点击图表时触发
   • dblclick：用户鼠标双击图表时触发
   • mouseover：用户鼠标移入图表时触发
   • mouseout：用户鼠标移出图表时触发
   • ...

2. 另一种是用户在使用可以交互的组件后触发的行为事件：

   • 例如在切换图例开关时触发的 legendselectchanged 事件（这里需要注意切换图例开关是不会触发 legendselected 事件的）
   • 数据区域缩放时触发的 datazoom 事件
   • ...

示例

ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串：

myChart.on('click', function (params) {
  // 控制台打印数据的名称
  console.log(params.name)
})

代码触发 ECharts 中组件的行为

在 ECharts 通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

option = {
  title: {
    text: '饼图程序调用高亮示例',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}

let currentIndex = -1

setInterval(function () {
  var dataLen = option.series[0].data.length
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex,
  })
  currentIndex = (currentIndex + 1) % dataLen
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex,
  })
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex,
  })
}, 1000)