Echarts数据可视化event图表事件的相关操作,开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏)

Echarts数据可视化开发代码注释全解
Echarts数据可视化开发参数配置全解

6大公共组件详解(点击进入):
title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解

5大坐标系详解(点击进入):
地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解

19种图表类型详解(点击进入,待续):
series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

图表行为和图表事件:
action图表行为event图表事件

Echarts数据可视化event图表事件的相关操作:

event事件用于接收用户的相关事件和action触发的图表的行为。

图表行为用于触发能够改变图表显示的相关动态功能,event事件用于接收action触发的行为,所以action行为要配合event事件一块学习。

//在 ECharts 中主要通过 on 方法添加事件处理函数,该文档描述了所有 ECharts 的事件列表。
//ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 dispatchAction 后触发的事件。


//==========================鼠标事件==============================
//鼠标事件包括'click','dblclick','mousedown','mouseup','mouseover','mouseout','globalout','contextmenu'。
//鼠标事件的事件参数是事件对象的数据的各个属性,具体见各个图表类型的 label formatter 回调函数的 params。
myChart.on('click', function (params) {
    console.log(params);
});
//对于图表的点击事件,基本参数如下,其它图表诸如饼图可能会有部分附加参数。
params={
    componentType: string,      // 当前点击的图形元素所属的组件名称,// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    seriesType: string,         // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesIndex: number,        // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesName: string,         // 系列名称。当 componentType 为 'series' 时有意义。
    name: string,                // 数据名,类目名
    dataIndex: number,          // 数据在传入的 data 数组中的 index
    data: Object,                 // 传入的原始数据项
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
    // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data,dataType 无意义。
    dataType: string,
    value: number|Array         // 传入的数据值
    color: string               // 数据图形的颜色。当 componentType 为 'series' 时有意义。
};


//==========================action事件的响应函数==============================
//type就是action中的type,在action执行完毕后触发响应函数,响应函数的params中包含的属性就是触发action时添加的属性
myChart.on(type, function (params) {
    console.log(params);        //params中包含的属性就是触发action时添加的属性
});
//例如触发legendSelect选中图例时,会添加name属性,则使用以下函数设置回调函数
myChart.on('legendselectchanged', function (params) {
    console.log(params.name);   //读取触发时添加的属性
});


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

腾讯AI架构师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值