炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 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的指向。

炫意HTML5 » ECharts – ECharts 事件处理

Java基础教程Android基础教程