ECharts可视化图标库 （事件与行为）

ECharts中的事件与行为

日常开发中用到echarts，一般是用来展示数据，很少在图表上添加一些事件监听函数。但是没用过不代表没有，比如鼠标悬浮之后的高亮样式和鼠标悬浮后显示的tootip,这都属于默认的鼠标悬浮事件。

除此之外，如果想要实现其他的事件响应，可以监听这些事件，然后通过回调函数做出相应处理。

ECharts中的事件名称对应DOM事件名称，是小写字符串
ECharts支持常规的鼠标事件类型：
click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu

鼠标事件的处理

var myChart = echarts.init(document.getElementById('chart_'));
// 基本的事件监听函数
myChart.on('click', function(params){
	// TODO 鼠标点击事件逻辑处理代码
});

// 通过query参数，实现对指定的组件的图形元素的触发回调, query参数可以是string或者object
// myChart.on(eventName, query, handler);
myChart.on('click', 'series', function() {});
myChart.on('click', 'series.line', function() {});
myChart.on('click', {seriesName: 'xxx', name: 'i'}, () => {}); // object作为query，对象可以是一个或者多个

params参数，是所有鼠标事件都包含的，这个参数是一个包含点击图形数据信息的对象

type EventParams = {
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string;
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string;
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number;
  // 系列名称。当 componentType 为 'series' 时有意义。
  seriesName: string;
  // 数据名，类目名
  name: string;
  // 数据在传入的 data 数组中的 index
  dataIndex: number;
  // 传入的原始数据项
  data: Object;
  // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
  // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
  // 其他大部分图表中只有一种 data，dataType 无意义。
  dataType: string;
  // 传入的数据值
  value: number | Array;
  // 数据图形的颜色。当 componentType 为 'series' 时有意义。
  color: string;
};

监听图表空白处的事件

解决这个问题之前，首先需要理解zrender事件。

实际上，鼠标点击在图表容器范围内（ 不管是点击在图形元素上还是空白处）触发的是zrender事件，echarts事件是在zrender事件的基础上实现的，当一个zrender事件在图形元素上被触发时，echarts才会触发一个echarts事件。

myChart.getZr().on('click', function(event) {
  // 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function(event) {
  // 该监听器正在监听一个`echarts 事件`。
});

在zrender事件的基础上，我们实现了监听空白处事件：

myChart.getZr().on('click', function(event) {
  // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  if (!event.target) {
    // 点击在了空白处，做些什么。
  }
});

组件交互的事件

具体配置文档

代码中触发事件

触发方式：

myChart.dispatchAction()

具体的行为有hightlight、downplay、select等。
具体配置文档