ECharts 中的事件和行為

在 ECharts 的圖表中使用者的操作將會觸發相應的事件。開發者可以監聽這些事件，然後通過回撥函式做相應的處理，比如跳轉到一個地址，或者彈出對話方塊，或者做資料下鑽等等。

在 ECharts 3 中繫結事件跟 2 一樣都是通過 on 方法，但是事件名稱比 2 更加簡單了。ECharts 3 中，事件名稱對應 DOM 事件名稱，均為小寫的字串，如下是一個繫結點選操作的示例。

myChart.on('click', function (params) {
    // 控制檯列印資料的名稱
    console.log(params.name);
});

在 ECharts 中事件分為兩種型別，一種是使用者滑鼠操作點選，或者 hover 圖表的圖形時觸發的事件，還有一種是使用者在使用可以互動的元件後觸發的行為事件，例如在切換圖例開關時觸發的 ‘legendselectchanged’ 事件（這裡需要注意切換圖例開關是不會觸發'legendselected'

滑鼠事件的處理

ECharts 支援常規的滑鼠事件型別，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。下面先來看一個簡單的點選柱狀圖後開啟相應的百度搜索頁面的示例。

// 基於準備好的dom，初始化ECharts例項
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和資料
var option = {
    xAxis: {
        data: ["襯衫"
 
,"羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
// 處理點選事件並且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd='
 
 + encodeURIComponent(params.name));
});

所有的滑鼠事件包含引數 params，這是一個包含點選圖形的資料資訊的物件，如下格式：

{
    // 當前點選的圖形元素所屬的元件名稱，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列型別。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
    seriesIndex: number,
    // 系列名稱。當 componentType 為 'series' 時有意義。
    seriesName: string,
    // 資料名，類目名
    name: string,
    // 資料在傳入的 data 陣列中的 index
    dataIndex: number,
    // 傳入的原始資料項
    data: Object,
    // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會是 'node' 或者 'edge'，表示當前點選在 node 還是 edge 上。
    // 其他大部分圖表中只有一種 data，dataType 無意義。
    dataType: string,
    // 傳入的資料值
    value: number|Array
    // 資料圖形的顏色。當 componentType 為 'series' 時有意義。
    color: string
}

如何區分滑鼠點選到了哪裡：

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（節點）上。
            }
        }
    }

});

你可以在回撥函式中獲得這個物件中的資料名、系列名稱後在自己的資料倉庫中索引得到其它的資訊候更新圖表，顯示浮層等等，如下示例程式碼：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過餅圖表現單個柱子中的資料分佈
                data: [detail.data]
            }]
        });
    });
});

元件互動的行為事件

在 ECharts 中基本上所有的元件互動行為都會觸發相應的事件，常用的事件和事件對應引數在 events 文件中有列出。

下面是監聽一個圖例開關的示例：

// 圖例開關的行為只會觸發 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點選圖例的選中狀態
    var isSelected = params.selected[params.name];
    // 在控制檯中列印
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
    // 列印所有圖例的狀態
    console.log(params.selected);
});

程式碼觸發 ECharts 中元件的行為

上面提到諸如legendselectchanged事件會由元件互動的行為觸發，那除了使用者的互動操作，有時候也會有需要在程式裡呼叫方法觸發圖表的行為，諸如顯示 tooltip，選中圖例。

在 ECharts 2.x 是通過 myChart.component.tooltip.showTip 這種形式呼叫相應的介面觸發圖表行為，入口很深，而且涉及到內部元件的組織。相對地，在 ECharts 3 裡改為通過呼叫 myChart.dispatchAction({ type: '' }) 觸發圖表行為，統一管理了所有動作，也可以方便地根據需要去記錄使用者的行為路徑。

常用的動作和動作對應引數在 action 文件中有列出。

下面示例演示瞭如何通過dispatchAction去輪流高亮餅圖的每個扇形。