范文杰_fe ·ECharts action 交互
上一節通過我們對事件的了解和學習，我們應該以及可以應對用戶的大部分操作了，但是除了用戶的交互外，我們有時也需要在程序中調用方法來觸發圖表的行為，來完成所需的效果。下面我們就一起看一下 ECharts 中的交互系統能為我們帶來哪些不一樣的效果吧。
1. 簡介
ECharts 中支持的圖表行為，通過 dispatchAction 觸發。
慕課解釋
action 交互系統允許開發者通過編程方式向 ECharts 實例傳遞行為消息，實例中的組件會對接收到的消息做出響應，按照消息參數更新組件的視覺狀態。action 系統與事件系統都被設計為消息的傳播機制，不同的是事件是從實例組件向應用層，自下而上傳遞消息，描述用戶在組件發生的交互行為；action 消息方向相反，從應用層到組件自上而下傳遞，描述開發者希望如何改變組件的狀態。
Tips：
action通常會觸發對應類型的事件，例如legend.legendSelect對應legendselected事件；dataZoom.dataZoom對應dataZoom事件；visualMap.selectDataRange對應datarangeselected事件。
2. 用法
action 通過 echartInstance.dispatchAction 接口分發，接口簽名：
(payload: object) => void
payload 參數是對 action 的描述，包含 type 屬性用于聲明行為類型，及其他隨機屬性用于聲明行為參數，例如：
echartInstance.dispatchAction({
// 激活提示框 tooltip
type: 'showTip',
// 指定提示框所在序列下標
seriesIndex: 0,
// 指定提示框所在數據下標
dataIndex: 1,
// 指定提示框位置
position: 'top',
});
ECharts 支持的完整行為列表可參考 官網，下面準備了一個動態切換圖表高亮態的樣例，以展示 action 的常規用法。
3. 圖表高亮示例
默認地，當鼠標懸停在圖表上時，相應的數據項會切換進一種所謂的“高亮”狀態，通過變換數據項的顏色、文本、邊框、透明度等效果，形成視覺上的突出效果。ECharts 提供了 highlight 行為用以觸發圖表的高亮效果；提供了 downplay 行為用以取消高亮效果。兩者接受相同參數：
dispatchAction({
// highlight 或 downplay
type: 'downplay',
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex?: number|Array,
// 可選，系列名稱，可以是一個數組指定多個系列
seriesName?: string|Array,
// 可選，數據的 index
dataIndex?: number,
// 可選，數據的 名稱
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, , 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 });
}
// 切換高亮數據項
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: (cursor += 1) % data.length,
});
}, 500);
</script>
</body>
</html>
示例效果：
Tips：
所有圖表都支持高亮狀態，高亮時的樣式效果通常使用
emphasis項進行配置，例如series-bar.emphasis；series-radar.emphasis；series-tree.emphasis。
4. 與事件系統聯動
事件系統與行為系統有千絲萬縷的內在關系，兩者組合使用可實現多圖表聯動效果，例如實例：
<!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);
// 監聽鼠標hover事件
myChart.on('mouseover', 'series', (event) => {
const { seriesType, name } = event;
if (seriesType === 'pie') {
// 鼠標停留在餅圖上時，觸發柱狀圖對應數據項的高亮效果
myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
} else if (seriesType === 'bar') {
// 鼠標停留在柱狀圖上時，觸發餅圖對應數據項的選中效果
myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, 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('mouseover', 'series', (event) => {
const { seriesType, name } = event;
if (seriesType === 'pie') {
// 鼠標停留在餅圖上時，觸發柱狀圖對應數據項的高亮效果
myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
} else if (seriesType === 'bar') {
// 鼠標停留在柱狀圖上時，觸發餅圖對應數據項的選中效果
myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, 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：
靈活使用行為系統與事件系統，能夠在組件的基礎能力之外實現更多更豐富的交互功能，這是高階開發者必備技能之一。
5. 小結
本節主要介紹 Echarts 行為系統的作用于使用方法，包括如何使用 dispatchAction 接口分發行為信號；Echarts 默認提供的action 類型。
2025 imooc.com All Rights Reserved |