ECharts 事件處理

ECharts 中我們可以通過監聽用戶的操作行為來回調對應的函數。

ECharts 通過 on 方法來監聽用戶的行為,例如監控用戶的點擊行為。

ECharts 中事件分為兩種類型:

用戶鼠標操作點擊,如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

還有一種是用戶在使用可以交互的組件后觸發的行為事件,例如在切換圖例開關時觸發的 'legendselectchanged' 事件),數據區域縮放時觸發的 'datazoom' 事件等等。

myChart.on('click', function (params) {
    // 在用戶點擊后控制臺打印數據的名稱
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

chart.on('click', 'series.line', function (params) {
    console.log(params);
});

chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

鼠標事件

ECharts 支持的鼠標事件類型,包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

以下實例在點擊柱形圖時會彈出對話框:

實例

// 基于準備好的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) {
    alert(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(節點)上。
            }
        }
    }
});

使用 query 只對指定的組件的圖形元素的觸發回調:

chart.on(eventName, query, handler);

query 可為 string 或者 Object。

如果為 string 表示組件類型。格式可以是 'mainType' 或者 'mainType.subType'。例如:

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

如果為 Object,可以包含以下一個或多個屬性,每個屬性都是可選的:

{
    <mainType>Index: number // 組件 index
    <mainType>Name: string // 組件 name
    <mainType>Id: string // 組件 id
    dataIndex: number // 數據項 index
    name: string // 數據項 name
    dataType: string // 數據項 type,如關系圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}

例如:

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時,此方法被回調。
});

例如:

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 為 'xx' 的元素被 'mouseover' 時,此方法被回調。
});

例如:

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 關系圖的節點被點擊時此方法被回調。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關系圖的邊被點擊時此方法被回調。
});

例如:

chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 為 'my_el' 的元素被 'mouseup' 時,此方法被回調。
});

你可以在回調函數中獲得這個對象中的數據名、系列名稱后在自己的數據倉庫中索引得到其它的信息候更新圖表,顯示浮層等等,如下示例代碼:

實例

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 中組件的行為

上面我們只說明了用戶的交互操作,但有時候我們也會需要在程序里調用方法并觸發圖表的行為,比如顯示 tooltip。

ECharts 通過 dispatchAction({ type: '' }) 來觸發圖表行為,統一管理了所有動作,也可以根據需要去記錄用戶的行為路徑。

以上實例用于輪播餅圖中的 tooltip:

實例

setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的圖形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮當前圖形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 顯示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

嘗試一下 ?