建站
咨詢
售后
建站咨詢
新聞中心
用戶在操作 Echarts 的圖表時會觸發(fā)相應的事件，這些事件由開發(fā)者監(jiān)聽，然后回調函數(shù)做出相應的處理，可以彈出一個對話框、跳轉到一個地址或者做數(shù)據(jù)下鉆等等。
ECharts 3 中綁定事件跟 Echarts 2 一樣都是通過 on 方法，不同的是事件名稱更加簡單。
ECharts 3 中，事件名稱對應 DOM 事件名稱，均為小寫的字符串，如下是一個綁定點擊操作的示例：
myChart.on('click', function (params) {
// 控制臺打印數(shù)據(jù)的名稱
console.log(params.name);
});在 ECharts 中有兩種事件類型：
- 一種是用戶鼠標操作點擊，或者 hover 圖表的圖形時觸發(fā)的事件；
- 還有一種是用戶在使用可以交互的組件后觸發(fā)的行為事件，例如在切換圖例開關時觸發(fā)的 'legendselectchanged' 事件（這里需要注意切換圖例開關是不會觸發(fā)'legendselected'事件的），數(shù)據(jù)區(qū)域縮放時觸發(fā)的 'datazoom' 事件等等。
Echarts 鼠標事件的處理
ECharts 支持常規(guī)的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。
下面先來看一個簡單的點擊柱狀圖后打開相應的百度搜索頁面的示例：
// 基于準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
// 處理點擊事件并且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});所有的鼠標事件包含參數(shù) params，這是一個包含點擊圖形的數(shù)據(jù)信息的對象，格式如下：
{
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
seriesIndex: number,
// 系列名稱。當 componentType 為 'series' 時有意義。
seriesName: string,
// 數(shù)據(jù)名，類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data，dataType 無意義。
dataType: string,
// 傳入的數(shù)據(jù)值
value: number|Array
// 數(shù)據(jù)圖形的顏色。當 componentType 為 'series' 時有意義。
color: string
}怎么區(qū)分鼠標點擊到了哪里：
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（節(jié)點）上。
}
}
}
});你可以在回調函數(shù)中獲得這個對象中的數(shù)據(jù)名、系列名稱后在自己的數(shù)據(jù)倉庫中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：
myChart.on('click', function (parmas) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// 通過餅圖表現(xiàn)單個柱子中的數(shù)據(jù)分布
data: [detail.data]
}]
});
});
});Echarts 組件交互的行為事件
在 ECharts 中基本上所有的組件交互行為都會觸發(fā)相應的事件。
常用的事件和事件對應參數(shù)在 events 文檔中有列出。
下面是監(jiān)聽一個圖例開關的示例：
// 圖例開關的行為只會觸發(fā) legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
// 獲取點擊圖例的選中狀態(tài)
var isSelected = params.selected[params.name];
// 在控制臺中打印
console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
// 打印所有圖例的狀態(tài)
console.log(params.selected);
});代碼觸發(fā) ECharts 中組件的行為
通過前面的描述我們知道組件交互的行為會觸發(fā)諸如 'legendselectchanged' 事件，除了用戶的交互操作，有時候也會有需要在程序里調用方法觸發(fā)圖表的行為，諸如顯示 tooltip，選中圖例。
ECharts 2.x 通過 myChart.component.tooltip.showTip 這種形式調用相應的接口觸發(fā)圖表行為，入口很深，而且涉及到內部組件的組織，而在 ECharts 3 里改為通過調用 myChart.dispatchAction({ type: '' }) 觸發(fā)圖表行為，統(tǒng)一管理了所有動作，也可以方便地根據(jù)需要去記錄用戶的行為路徑。
常用的動作和動作對應參數(shù)在 action 文檔中有列出。
下面示例演示了如何通過dispatchAction去輪流高亮餅圖的每個扇形。
點擊編輯實例 》》
網(wǎng)頁標題：創(chuàng)新互聯(lián)ECharts教程：ECharts中的事件和行為
當前鏈接：http://m.5511xx.com/article/dpidoei.html
