ECharts中的事件和行為

用戶在操作 Echarts 的圖表時(shí)會(huì)觸發(fā)相應(yīng)的事件，這些事件由開(kāi)發(fā)者監(jiān)聽(tīng)，然后回調(diào)函數(shù)做出相應(yīng)的處理，可以彈出一個(gè)對(duì)話框、跳轉(zhuǎn)到一個(gè)地址或者做數(shù)據(jù)下鉆等等。

ECharts 3 中綁定事件跟 Echarts 2 一樣都是通過(guò) on 方法，不同的是事件名稱更加簡(jiǎn)單。

ECharts 3 中，事件名稱對(duì)應(yīng) DOM 事件名稱，均為小寫(xiě)的字符串，如下是一個(gè)綁定點(diǎn)擊操作的示例：

myChart.on('click', function (params) {
    // 控制臺(tái)打印數(shù)據(jù)的名稱
    console.log(params.name);
});

在 ECharts 中有兩種事件類型：

• 一種是用戶鼠標(biāo)操作點(diǎn)擊，或者 hover 圖表的圖形時(shí)觸發(fā)的事件；
  
• 還有一種是用戶在使用可以交互的組件后觸發(fā)的行為事件，例如在切換圖例開(kāi)關(guān)時(shí)觸發(fā)的 'legendselectchanged' 事件（這里需要注意切換圖例開(kāi)關(guān)是不會(huì)觸發(fā)'legendselected'事件的），數(shù)據(jù)區(qū)域縮放時(shí)觸發(fā)的 'datazoom' 事件等等。
  

Echarts 鼠標(biāo)事件的處理

ECharts 支持常規(guī)的鼠標(biāo)事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

下面先來(lái)看一個(gè)簡(jiǎn)單的點(diǎn)擊柱狀圖后打開(kāi)相應(yīng)的百度搜索頁(yè)面的示例：

// 基于準(zhǔn)備好的dom，初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById('main'));

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

所有的鼠標(biāo)事件包含參數(shù) params，這是一個(gè)包含點(diǎn)擊圖形的數(shù)據(jù)信息的對(duì)象，格式如下：

{
    // 當(dāng)前點(diǎn)擊的圖形元素所屬的組件名稱，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列類型。值可能為：'line'、'bar'、'pie' 等。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesIndex: number,
    // 系列名稱。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesName: string,
    // 數(shù)據(jù)名，類目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項(xiàng)
    data: Object,
    // sankey、graph 等圖表同時(shí)含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會(huì)是 'node' 或者 'edge'，表示當(dāng)前點(diǎn)擊在 node 還是 edge 上。
    // 其他大部分圖表中只有一種 data，dataType 無(wú)意義。
    dataType: string,
    // 傳入的數(shù)據(jù)值
    value: number|Array
    // 數(shù)據(jù)圖形的顏色。當(dāng) componentType 為 'series' 時(shí)有意義。
    color: string
}

怎么區(qū)分鼠標(biāo)點(diǎn)擊到了哪里：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 點(diǎn)擊到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 點(diǎn)擊到了 index 為 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 點(diǎn)擊到了 graph 的 edge（邊）上。
            }
            else {
                // 點(diǎn)擊到了 graph 的 node（節(jié)點(diǎn)）上。
            }
        }
    }

});

你可以在回調(diào)函數(shù)中獲得這個(gè)對(duì)象中的數(shù)據(jù)名、系列名稱后在自己的數(shù)據(jù)倉(cāng)庫(kù)中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過(guò)餅圖表現(xiàn)單個(gè)柱子中的數(shù)據(jù)分布
                data: [detail.data]
            }]
        });
    });
});

Echarts 組件交互的行為事件

在 ECharts 中基本上所有的組件交互行為都會(huì)觸發(fā)相應(yīng)的事件。

常用的事件和事件對(duì)應(yīng)參數(shù)在 events 文檔中有列出。

下面是監(jiān)聽(tīng)一個(gè)圖例開(kāi)關(guān)的示例：

// 圖例開(kāi)關(guān)的行為只會(huì)觸發(fā) legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點(diǎn)擊圖例的選中狀態(tài)
    var isSelected = params.selected[params.name];
    // 在控制臺(tái)中打印
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
    // 打印所有圖例的狀態(tài)
    console.log(params.selected);
});

代碼觸發(fā) ECharts 中組件的行為

通過(guò)前面的描述我們知道組件交互的行為會(huì)觸發(fā)諸如 'legendselectchanged' 事件，除了用戶的交互操作，有時(shí)候也會(huì)有需要在程序里調(diào)用方法觸發(fā)圖表的行為，諸如顯示 tooltip，選中圖例。

ECharts 2.x 通過(guò) myChart.component.tooltip.showTip 這種形式調(diào)用相應(yīng)的接口觸發(fā)圖表行為，入口很深，而且涉及到內(nèi)部組件的組織，而在 ECharts 3 里改為通過(guò)調(diào)用 myChart.dispatchAction({ type: '' }) 觸發(fā)圖表行為，統(tǒng)一管理了所有動(dòng)作，也可以方便地根據(jù)需要去記錄用戶的行為路徑。

常用的動(dòng)作和動(dòng)作對(duì)應(yīng)參數(shù)在 action 文檔中有列出。

下面示例演示了如何通過(guò)dispatchAction去輪流高亮餅圖的每個(gè)扇形。

點(diǎn)擊編輯實(shí)例 》》