ECharts事件详情

events

在 ECharts 中主要通过 on 方法添加事件处理函数,该文档描述了所有 ECharts 的事件列表。

ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 dispatchAction 后触发的事件。

示例:

myChart.on('click', function (params) {
   
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
   
    console.log(params);
});

chart.on('click', 'series.line', function (params) {
   
    console.log(params);
});

chart.on('mouseover', {
   seriesIndex: 1, name: 'xx'}, function (params) {
   
    console.log(params);
});

详细的事件注册方式参见 on。
所有属性
events. 鼠标事件
any

鼠标事件的事件参数是事件对象的数据的各个属性,对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。例如饼图会有percent属性表示百分比,具体见各个图表类型的 label formatter 回调函数的 params。

{
   
    // 当前点击的图形元素所属的组件名称,
    // 其值如 '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,
    // 用户自定义的数据。只在 graphic component 和自定义系列(custom series)
    // 中生效,如果节点定义上设置了如:{type: 'circle', info: {some: 123}}。
    info: *
}

鼠标事件包括 'click''dblclick''mousedown''mousemove''mouseup''mouseover''mouseout''globalout''contextmenu'。

参见 ECharts 中的事件和行为
events.鼠标事件. click
Event
events.鼠标事件. dblclick
Event
events.鼠标事件. mousedown
Event
events.鼠标事件. mousemove
Event
events.鼠标事件. mouseup
Event
events.鼠标事件. mouseover
Event
events.鼠标事件. mouseout
Event
events.鼠标事件. globalout
Event
events.鼠标事件. contextmenu
Event
events. legendselectchanged
Event

ACTION: legendToggleSelect 切换图例选中状态后的事件。

注:图例组件用户切换图例开关会触发该事件。

{
   
    type: 'legendselectchanged',
    // 切换的图例名称
    name: string
    // 所有图例的选中状态表
    selected
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值