ECharts 事件与行为
-
ECharts 图表中用户的操作将会触发相应的事件,如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。
-
ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串
-
如下是一个绑定点击操作的示例:
myChart.on('click', function(params) { // 控制台打印数据的名称 console.log(params.name); });
-
在 ECharts 中事件分为两种类型,
- 一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,
- 一种是用户在使用可以交互的组件后触发的行为事件
ECharts 鼠标事件的处理
-
ECharts 支持常规的鼠标事件类型,包括
'click'、 'dblclick'、 'mousedown'、 'mousemove'、 'mouseup'、 'mouseover'、 'mouseout'、 'globalout'、 'contextmenu' 事件
// 基于准备好的dom,初始化ECharts实例 // var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 处理点击事件并且跳转到相应的百度搜索页面 myChart.on('click', function(params) { window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); });
-
所有的鼠标事件包含参数
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; };
-
区分鼠标点击到了哪里:
myChart.on('click', function(params) { if (params.componentType === 'markPoint') { // 点击到了 markPoint 上 if (params.seriesIndex === 5) { // 点击到了 index 为 5 的 series 的 markPoint 上。 } } else if (params.componentType === 'series') { if (params.seriesType === 'graph') { if (params.dataType === 'edge') { // 点击到了 graph 的 edge(边)上。 } else { // 点击到了 graph 的 node(节点)上。 } } } });
-
使用 query 只对指定的组件的图形元素的触发回调:query 可为 string 或者 Object。
chart.on(eventName, query, handler);
组件交互的行为事件
-
在 ECharts 中基本上所有的组件交互行为都会触发相应的事件
-
监听一个图例开关的示例
// 图例开关的行为只会触发 legendselectchanged 事件 myChart.on('legendselectchanged', function(params) { // 获取点击图例的选中状态 var isSelected = params.selected[params.name]; // 在控制台中打印 console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name); // 打印所有图例的状态 console.log(params.selected); });
-
通过
dispatchAction
去轮流高亮饼图的每个扇形option = { title: { text: '饼图程序调用高亮示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; let currentIndex = -1; setInterval(function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000);
监听“空白处”的事件
-
zrender 事件和 echarts 事件
-
zrender 事件 是当鼠标在任何地方都会被触发,echarts 事件只有当鼠标在图形元素上时才能被触发
-
当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件
myChart.getZr().on('click', function(event) { // 该监听器正在监听一个`zrender 事件`。 }); myChart.on('click', function(event) { // 该监听器正在监听一个`echarts 事件`。 });
-
实现监听空白处的事件:
myChart.getZr().on('click', function(event) { // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。 if (!event.target) { // 点击在了空白处,做些什么。 } });