ECharts行为与事件的因与果（附完整举例）

yiqinkongjian

已于 2024-06-01 12:17:32 修改

阅读量2.5k

点赞数 65

分类专栏： ECharts 文章标签： echarts javascript 前端

于 2024-05-29 22:54:10 首次发布

本文链接：https://blog.csdn.net/yiqinkongjian/article/details/139307736

版权

ECharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

5.ECharts中的行为与事件

在ECharts的图表中用户的操作将会触发相应的事件。ECharts的事件监听支持回调函数（回调函数的概念请自行参照JavaScript事件的内容），ECharts通过事件监听中的回调函数可以处理相应的业务要求，比如跳转到一个地址或者弹出对话框等。

5.1事件概述

ECharts中的事件名称对应DOM事件名称，均为小写的字符串，ECharts中常见的事件可以通过官网中的API进行查询，ECharts中的事件展示在“events”中如图5.1所示，ECharts事件调用需要使用ECharts实例中的on方法，也就是说如果想要使用“events”中的事件，必须使用“实例.on”的形式才可以完成调用。

图5.1 事件API

例1：定义一个名为“myChart”的ECharts实例，通过如下的代码可以实现图表单击事件的绑定。

myChart.on('click',function(params){

    //控制台打印数据的名称

     console.log(params.name);});

5.2事件分类

在ECharts中事件可以分为两种类型：

①一种是用户鼠标操作图表的图形时触发的鼠标事件。

②一种是图表行为发生后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件，数据区域缩放时触发 'datazoom' 事件等。

重点提示：行为事件的触发原因是图表组件的交互行为并不是用户的操作。也就是说用户的操作并不必然导致行为事件的发生。图表行为是“因”，行为事件是“果”。

5.3 图表行为

只要是学习过JavaScript的同学理解鼠标事件并不难。但ECharts的图表行为可能大家之前接触的少，本小结主要介绍ECharts的图表行为。

1、什么是图表行为？

ECharts图表所支持的行为，放置在了ECharts API中的“action”类别下，如图5.2所示，对“图表行为”这个词官网并没有给出明确的文字解释。通过观察5.2中的内容我们可以看出，图表行为几乎全部与配置项的内容相关，因此我们可以从API提供的内容反推出“图表行为”描述，即图表行为可以理解为ECharts中常用配置项中支持的一些交互行为。

图5.2 图表行为API

2、调用图表行为API

ECharts中支持的图表行为通过dispatchAction()函数进行设置，不同图表行为通过不同的对象成员进行维护。例如“高亮”图表行为设置举例如图5.3所示。使用图5.3展示了图表行为的使用方法，图中标明了必填与选填项，以高亮行为为例，type属性值为API中固定的值，其他内容选填即可。

图5.3 高亮图表行为API展示

3、图表行为与事件的因与果（案例）

在第2小节中提到图表行为是“因”，行为事件是“果”。下面通过一个具体的例子帮助大家理解。图5.4所示，“legendselectchanged”（图例选中状态变化）事件为发生后，其中的回调函数调用了ECharts实例中的“legendUnSelect”图表行为（取消图例），将“销量1”的图例取消了，进而触发了“legendunselected”（取消图例）事件，“legendunselected”事件被出发后会在控制台输出“触发了图例非选中事件”的文字内容。

这里要说明的是，如图5.5所示，根据API内容显示，“legendunselected”事件为“ACTION: legendUnSelect 图例取消选中后的事件。”也就是说，“legendunselected”事件只能由“legendUnSelect”行为触发，即假设用户手动取消了“销量1”的图例，是不会触发“legendunselected”事件的。这也就是强调因果关系的原因，必须知道由什么行为触发才能实现正确调用。

图5.4 图表行为与事件触发

图5.5 “legendunselected”事件说明

4、效果展示

图5.6展示了，当用户关闭了“销量”图例时，由于出发了回调函数中的“legendUnSelect”行为，导致触发了“legendunselected”事件，因此控制台输出了文字。

图5.6 行为与事件因果关系演示

图5.7展示了，如果代码中将myChart.dispatchAction注释掉，即取消了“legendUnSelect”行为的绑定，用户再点击图例时控制到没有任何的输出。

图5.7 行为与事件因果关系演示

5、完整程序

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts-5.3.3.min.js'></script>
</head>

<body>
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {
		    title: {
		        text: 'ECharts 选择事件示例'
		    },
		    tooltip: {},
		    legend: {
		        data:['销量','销量1']
		    },
		    xAxis: {
		        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		    },
		    yAxis: {},
		    series: [{
		        name: '销量',
		        type: 'bar',
		        data: [5, 20, 36, 10, 10, 20],
				itemStyle:{
					normal:{
						
					},
					emphasis:{
						color:'red'
					}
				}
		    },
			{
			    name: '销量1',
			    type: 'bar',
			    data: [5, 20, 36, 10, 10, 20]
			}]
		};
		 
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart.on('legendselectchanged',function(par){
				
				 myChart.dispatchAction({
				 	type:'legendUnSelect',
				 	name:'销量1'
				 })			
		})
		myChart.on('legendunselected',function(par){
				console.log('触发了图例非选中事件');
							
		})

	</script>
</body>

</html>