愛招飛幫助手冊
目录

ECharts中的事件和性為

# ECharts 中的事件和行為

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

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

myChart.on('click', function (params) {
    // 控制檯列印數據的名稱
    console.log(params.name);
});
1
2
3
4

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

# 1. 滑鼠事件的處理

  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) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  所有的滑鼠事件包含參數 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

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（節點）上。
            }
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  使用 query 只對指定的元件的圖形元素的觸發回撥：

chart.on(eventName, query, handler);
1

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 () {...});
1
2
3
4

  如果為 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
}
1
2
3
4
5
6
7
8
9

  例如：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回撥。
});
1
2
3
4
5
6
7
8
9
10

  例如：

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' 時，此方法被回撥。
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  例如：

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 () {
    // 關係圖的邊被點選時此方法被回撥。
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  例如：

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' 時，此方法被回撥。
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過餅圖表現單個柱子中的數據分佈
                data: [detail.data]
            }]
        });
    });
});
1
2
3
4
5
6
7
8
9
10
11

# 2. 元件互動的行為事件

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

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

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

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

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

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

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

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

  • FastWeb TUgURLFrame示例：

  如需在FastWeb中的TUgURLFrame中實現上述效果，則修改其HTML屬性，使用下列內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實體
        var myChart = echarts.init(document.getElementById('main'));
        var option;

        var app = {};
        
        option = {
            title: {
                text: '餅圖程式呼叫高亮示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接訪問', '郵件營銷', '聯盟廣告', '視訊廣告', '搜索引擎']
            },
            series: [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接訪問'},
                        {value: 310, name: '郵件營銷'},
                        {value: 234, name: '聯盟廣告'},
                        {value: 135, name: '視訊廣告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        app.currentIndex = -1;

        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);
        
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

# 4. 監聽「空白處」的事件

有時候，開發者需要監聽畫布的「空白處」所觸發的事件。比如，當需要在使用者點選「空白處」的時候重置圖表時。

在討論這個功能之前，我們需要先明確兩種事件。zrender 事件和echarts 事件。

myChart.getZr().on('click', function (event) {
    // 該監聽器正在監聽一個`zrender 事件`。
});
myChart.on('click', function (event) {
    // 該監聽器正在監聽一個`echarts 事件`。
});
1
2
3
4
5
6

zrender 事件與echarts 事件不同。前者是當滑鼠在任何地方都會被觸發，而後者是隻有當滑鼠在圖形元素上時才能被觸發。事實上，echarts 事件 是在 zrender 事件 的基礎上實現的，也就是說，當一個 zrender 事件 在圖形元素上被觸發時，echarts 將觸發一個 echarts 事件 給開發者。

有了 zrender事件，我們就可以實現 「監聽空白處的事件」，具體如下：

myChart.getZr().on('click', function (event) {
    // 沒有 target 意味著滑鼠/指針不在任何一個圖形元素上，它是從「空白處」觸發的。
    if (!event.target) {
        // 點選在了空白處，做些什麼。
    }
});
1
2
3
4
5
6
數據的視覺對映
動態排序柱狀圖

← 動態排序柱狀圖→

Copyright © 2021-2024 愛招飛IsoFace | ALL Rights Reserved