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 数组中的 indexdata: 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);   //读取触发时添加的属性
});

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

Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts大数据可视化物流航向省份流向迁徙动态图，开发全解+完美参数注释
最近在研究Echarts的相关案例,毕竟现在大数据比较流行,比较了D3.js.superset等相关的图表插件,还是觉得echarts更简单上手些. 本文是以原生JS为基础,如果使用Vue.js的话, ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化series-effectscatter特效散点图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化radar雷达坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化polar极坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化parallel平行坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

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

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

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

最新文章

热门文章