第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

范文杰_fe · 更新于 2020-09-27

ECharts action 交互

上一節(jié)通過我們對事件的了解和學習，我們應該以及可以應對用戶的大部分操作了，但是除了用戶的交互外，我們有時也需要在程序中調用方法來觸發(fā)圖表的行為，來完成所需的效果。下面我們就一起看一下 ECharts 中的交互系統(tǒng)能為我們帶來哪些不一樣的效果吧。

1. 簡介

官方解釋：

ECharts 中支持的圖表行為，通過 dispatchAction 觸發(fā)。

慕課解釋

action 交互系統(tǒng)允許開發(fā)者通過編程方式向 ECharts 實例傳遞行為消息，實例中的組件會對接收到的消息做出響應，按照消息參數(shù)更新組件的視覺狀態(tài)。action 系統(tǒng)與事件系統(tǒng)都被設計為消息的傳播機制，不同的是事件是從實例組件向應用層，自下而上傳遞消息，描述用戶在組件發(fā)生的交互行為；action 消息方向相反，從應用層到組件自上而下傳遞，描述開發(fā)者希望如何改變組件的狀態(tài)。

Tips：

action 通常會觸發(fā)對應類型的事件，例如 legend.legendSelect 對應 legendselected 事件；dataZoom.dataZoom 對應 dataZoom 事件；visualMap.selectDataRange 對應 datarangeselected 事件。

2. 用法

action 通過 echartInstance.dispatchAction 接口分發(fā)，接口簽名：

(payload: object) => void

payload 參數(shù)是對 action 的描述，包含 type 屬性用于聲明行為類型，及其他隨機屬性用于聲明行為參數(shù)，例如：

echartInstance.dispatchAction({
	// 激活提示框 tooltip
	type: 'showTip',
	// 指定提示框所在序列下標
	seriesIndex: 0,
	// 指定提示框所在數(shù)據(jù)下標
	dataIndex: 1,
	// 指定提示框位置
	position: 'top',
});

ECharts 支持的完整行為列表可參考 官網(wǎng)，下面準備了一個動態(tài)切換圖表高亮態(tài)的樣例，以展示 action 的常規(guī)用法。

3. 圖表高亮示例

默認地，當鼠標懸停在圖表上時，相應的數(shù)據(jù)項會切換進一種所謂的“高亮”狀態(tài)，通過變換數(shù)據(jù)項的顏色、文本、邊框、透明度等效果，形成視覺上的突出效果。ECharts 提供了 highlight 行為用以觸發(fā)圖表的高亮效果；提供了 downplay 行為用以取消高亮效果。兩者接受相同參數(shù)：

dispatchAction({
    // highlight 或 downplay
    type: 'downplay',
    // 可選，系列 index，可以是一個數(shù)組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數(shù)組指定多個系列
    seriesName?: string|Array,
    // 可選，數(shù)據(jù)的 index
    dataIndex?: number,
    // 可選，數(shù)據(jù)的 名稱
    name?: string
})

示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px;"></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 = [27, 32, 69, 127, 147, 76, 86];

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

			let cursor = -1;
			setInterval(() => {
				if (cursor >= 0) {
					myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: cursor % data.length });
				}
				// 切換高亮數(shù)據(jù)項
				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: (cursor += 1) % data.length,
				});
			}, 500);
		</script>
	</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

示例效果：

圖片描述

Tips：

所有圖表都支持高亮狀態(tài)，高亮時的樣式效果通常使用 emphasis 項進行配置，例如 series-bar.emphasis；series-radar.emphasis；series-tree.emphasis。

4. 與事件系統(tǒng)聯(lián)動

事件系統(tǒng)與行為系統(tǒng)有千絲萬縷的內在關系，兩者組合使用可實現(xiàn)多圖表聯(lián)動效果，例如實例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Echarts Example</title>
	</head>
	<body>
		<div id="main" style="width: 960px; height: 400px;"></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: [27, 32, 69, 127, 147, 76, 86] },
				{ name: 'X-1', data: [58, 68, 1, 154, 156, 168, 38] },
				{ name: 'X-2', data: [44, 54, 176, 113, 62, 51, 18] },
				{ name: 'X-3', data: [80, 42, 5, 92, 45, 108, 98] },
				{ name: 'X-4', data: [22, 76, 2, 45, 173, 17, 9] },
				{ name: 'X-5', data: [136, 164, 90, 161, 171, 106, 18] },
				{ name: 'X-6', data: [73, 163, 43, 159, 135, 99, 9] },
				{ name: 'X-7', data: [151, 21, 103, 165, 177, 134, 70] },
				{ name: 'X-8', data: [43, 101, 76, 133, 172, 85, 64] },
				{ name: 'X-9', data: [130, 72, 65, 85, 112, 24, 85] },
			];
			const aggData = data.map(({ name, data }) => ({ name, value: data.reduce((r, v) => r + v, 0) }));

			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);

			// 監(jiān)聽鼠標hover事件
			myChart.on('mouseover', 'series', (event) => {
				const { seriesType, name } = event;
				if (seriesType === 'pie') {
					// 鼠標停留在餅圖上時，觸發(fā)柱狀圖對應數(shù)據(jù)項的高亮效果
					myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
				} else if (seriesType === 'bar') {
					// 鼠標停留在柱狀圖上時，觸發(fā)餅圖對應數(shù)據(jù)項的選中效果
					myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, name });
				}
			});

			// 在柱狀圖上監(jiān)聽鼠標click事件
			myChart.on('click', 'series.bar', (event) => {
				const { name } = event;
				// 柱狀圖上發(fā)生點擊事件時，圖表聚焦到數(shù)據(jù)項對應的細節(jié)數(shù)據(jù)上
				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 與事件系統(tǒng)實現(xiàn)聯(lián)動交互效果。交互之一是通過監(jiān)聽鼠標 hover 事件，分發(fā)對應圖表的高亮 action，核心代碼：

// 監(jiān)聽鼠標hover事件
myChart.on('mouseover', 'series', (event) => {
	const { seriesType, name } = event;
	if (seriesType === 'pie') {
		// 鼠標停留在餅圖上時，觸發(fā)柱狀圖對應數(shù)據(jù)項的高亮效果
		myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
	} else if (seriesType === 'bar') {
		// 鼠標停留在柱狀圖上時，觸發(fā)餅圖對應數(shù)據(jù)項的選中效果
		myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, name });
	}
});

示例效果：

圖片描述

另一個交互效果，是鼠標點擊柱狀圖時，展開數(shù)據(jù)項的詳情數(shù)據(jù)，核心代碼：

// 在柱狀圖上監(jiān)聽鼠標click事件
myChart.on('click', 'series.bar', (event) => {
	const { name } = event;
	// 柱狀圖上發(fā)生點擊事件時，圖表聚焦到數(shù)據(jù)項對應的細節(jié)數(shù)據(jù)上
	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：

靈活使用行為系統(tǒng)與事件系統(tǒng)，能夠在組件的基礎能力之外實現(xiàn)更多更豐富的交互功能，這是高階開發(fā)者必備技能之一。

5. 小結

圖片描述
本節(jié)主要介紹 Echarts 行為系統(tǒng)的作用于使用方法，包括如何使用 dispatchAction 接口分發(fā)行為信號；Echarts 默認提供的action 類型。