ECharts action 交互

上一节通过我们对事件的了解和学习，我们应该以及可以应对的大部分操作了，但是除了的交互外，我们有时也需要在程序中来触发图表的行为，来完成所需的。下面我们就一起看一下 ECharts 中的交互系统能为我们带来哪些不一样的吧。

ECharts 中的图表行为，通过 dispatchAction 触发。

解释

action 交互系统允许开发者通过编程方式向 ECharts 实例传递行为消息，实例中的组件会对接收到的消息做出响应，按照消息参数更新组件的视觉状态。action 系统与事件系统都被设计为消息的传播机制，不同的是事件是从实例组件向应用层，自下而递消息，描述在组件发生的交互行为；action 消息方向相反，从应用层到组件自上而下传递，描述开发者希望如何改变组件的状态。

Tips：

action 通常会触发对应类型的事件，例如对应事件；对应事件；对应事件。

action 通过接口分发，接口签名：

(payload: object) => void

payload 参数是对 action 的描述，包含 type 用于声明行为类型，及其他用于声明行为参数，例如：

echartInstance.dispatchAction({
	// 激活框 tooltip
	type: 'showTip',
	// 指定框所在序列下标
	seriesIndex: ,
	// 指定框所在数据下标
	dataIndex: ,
	// 指定框位置
	position: 'top',
});

ECharts 的完整行为列表可参考，下面准备了动态切换图表高亮态的样例，以展示 action 的常规。

认地，当鼠标悬停在图表上时，相应的数据项会切换进一种所谓的“高亮”状态，通过变换数据项的颜色、文本、边框、透明度等，形成视觉上的突出。ECharts 提供了行为用以触发图表的高亮；提供了行为用以取消高亮。两者接受相同参数：

dispatchAction({
    // highlight 或 downplay
    type: 'downplay',
    // 可选，系列 index，可以是数组指定多个系列
    seriesIndex?: number|Array,
    // 可选，系列，可以是数组指定多个系列
    seriesName?: string|Array,
    // 可选，数据的 index
    dataIndex?: number,
    // 可选，数据的 
    name?: string
})

示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px; height: px;"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			const myChart = echarts.init(document.getElementById('main'));
			const weeks = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
			const data = [, , , , , , ];

			const option = {
				xAxis: { type: 'category', data: weeks },
				yAxis: { type: 'value' },
				series: [{ type: 'bar', data: data, emphasis: { itemStyle: { color: '#336666' } } }],
			};
			myChart.setOption(option);

			let cursor = -;
			setInterval(() => {
				if (cursor >= ) {
					myChart.dispatchAction({ type: 'downplay', seriesIndex: , dataIndex: cursor % data.length });
				}
				// 切换高亮数据项
				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: ,
					dataIndex: (cursor += ) % data.length,
				});
			}, );
		</script>
	</body>
</html>

示例：

Tips：

所有图表都高亮状态，高亮时的样式通常使用 emphasis 项进行配置，例如；；。

事件系统与行为系统有千丝万缕的内在关系，两者组合使用可实现多图表联动，例如实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		< charset="utf-8" />
		< http-equiv="X-UA-Compatible" content="IE=edge" />
		< name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: px; height: px;"></div>

		<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
		<script type="text/javascript">
			const myChart = echarts.init(document.getElementById('main'));
			const weeks = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
			const data = [
				{ name: 'X-0', data: [, , , , , , ] },
				{ name: 'X-1', data: [, , , , , , ] },
				{ name: 'X-2', data: [, , , , , , ] },
				{ name: 'X-3', data: [, , , , , , ] },
				{ name: 'X-4', data: [, , , , , , ] },
				{ name: 'X-5', data: [, , , , , , ] },
				{ name: 'X-6', data: [, , , , , , ] },
				{ name: 'X-7', data: [, , , , , , ] },
				{ name: 'X-8', data: [, , , , , , ] },
				{ name: 'X-9', data: [, , , , , , ] },
			];
			const aggData = data.map(({ name, data }) => ({ name, value: data.reduce((r, v) => r + v, ) }));

			const option = {
				xAxis: { type: 'category', data: aggData.map(({ name }) => name) },
				yAxis: { type: 'value' },
				grid: { width: '47%' },
				tooltip: { show: true },
				series: [
					{ type: 'bar', data: aggData, emphasis: { itemStyle: { color: '#336666' } } },
					{ type: 'pie', data: aggData, center: ['75%', '50%'], radius: '43%' },
				],
			};
			myChart.setOption(option);

			// 监听鼠标hover事件
			myChart.on('mouver', 'series', (event) => {
				const { seriesType, name } = event;
				if (seriesType === 'pie') {
					// 鼠标停留在饼图上时，触发柱状图对应数据项的高亮
					myChart.dispatchAction({ type: 'highlight', seriesIndex: , name });
				} else if (seriesType === 'bar') {
					// 鼠标停留在柱状图上时，触发饼图对应数据项的选中
					myChart.dispatchAction({ type: 'pieSelect', seriesIndex: , name });
				}
			});

			// 在柱状图上监听鼠标click事件
			myChart.on('click', 'series.bar', (event) => {
				const { name } = event;
				// 柱状图上发生点击事件时，图表聚焦到数据项对应的细节数据上
				const serie = data.find((serie) => serie.name === name);
				myChart.setOption({
					xAxis: {
						data: weeks,
					},
					series: [
						{ data: serie.data },
						{ data: serie.data.map((value, index) => ({ name: weeks[index], value })) },
					],
				});
			});
		</script>
	</body>
</html>

实例定义了柱状图、饼图，两者通过 action 与事件系统实现联动交互。交互之一是通过监听鼠标 hover 事件，分发对应图表的高亮 action，核心：

// 监听鼠标hover事件
myChart.on('mouver', 'series', (event) => {
	const { seriesType, name } = event;
	if (seriesType === 'pie') {
		// 鼠标停留在饼图上时，触发柱状图对应数据项的高亮
		myChart.dispatchAction({ type: 'highlight', seriesIndex: , name });
	} else if (seriesType === 'bar') {
		// 鼠标停留在柱状图上时，触发饼图对应数据项的选中
		myChart.dispatchAction({ type: 'pieSelect', seriesIndex: , name });
	}
});

示例：

另交互，是鼠标点击柱状图时，展开数据项的详情数据，核心：

// 在柱状图上监听鼠标click事件
myChart.on('click', 'series.bar', (event) => {
	const { name } = event;
	// 柱状图上发生点击事件时，图表聚焦到数据项对应的细节数据上
	const serie = data.find((serie) => serie.name === name);
	myChart.setOption({
		xAxis: {
			data: weeks,
		},
		series: [{ data: serie.data }, { data: serie.data.map((value, index) => ({ name: weeks[index], value })) }],
	});
});

示例：

Tips：

灵活使用行为系统与事件系统，能够在组件的基础能力之外实现更多更丰富的交互，这是高阶开发者必备技能之一。

←ECharts 事件系统

ECharts 数据异步加载→

ECharts action 交互

您的鼓励是对我最大的支持