Blog
0%

[JS]利用echart.js繪圖

發表於 更新於 分類於

echart

基本運用

echart是一個用js繪圖的框架，官方文檔。

引入echart後，首先必須準備一個畫圖的區塊。

1
2
3
4
<div class="row">
    <div id="month_stat" style="width:50%; height:400px;" class="col"></div>
    <div id="month_stat_2" style="width:50%; height:400px;" class="col"></div>
</div>

我會繪製兩個圖表，一個負責AVG、OBP、SLG，另一個負責PA、AB、H、RBI、HR，並且利用Bootstrap將兩個圖表排在一列，會使用長條圖來表示。

echart官網有即時顯示的編輯器可用。

官方範例

1
2
3
4
5
6
7
8
9
10
11
12
13
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

xAxis為x軸的設置，其中type為x軸的屬性，可以選擇value、category、time、log四種，x軸我預定顯示數值種類，所以選擇category，而y軸為數值。

如果要繪製橫向的長條圖，只要把xAxis和yAxis的內容對調就好，series中的data會自動對應。

基本的長條圖介紹玩了，我想要繪製的長條圖x軸為月份，y軸為數值，並且每個月分都有每種數據，需要用到官方範例。

跟上一個不同的是，這個範例有著標籤可以控制顯示，需要更改series裡面的內容，並且加入legend屬性。

1
2
3
4
5
6
7
8
9
10
11
12
13
series: [{
        name: 'AVG',
        type: 'bar',
        data: result['AVG']
    },{
        name: 'OBP',
        type: 'bar',
        data: result['OBP']
    },{
        name: 'SLG',
        type: 'bar',
        data: result['SLG']
    }]

result為ajax跟Falsk取的資料

三種資料有三種name，則我必須在legend裡面宣告這三種name。

1
2
3
legend: {
        data: ['AVG', 'SLG', 'OBP']
    }

增加圖表功能

toolbox

echart有提供許多API來讓我們使用，在官方文檔中可以查到許多有用的API。

今天我主要回會用toolbox這個配置項的功能，toolbox可以為圖表增添工具欄，有輸出圖片、數據圖、縮放等。

首先要啟用toolbox要先設置show為true，並且可以在feature中設置各選項的內容。

1
2
3
4
5
6
7
8
9
10
11
toolbox: {
           show: true,
           orient: 'vertical',
           left: 'right',
           top: 'center',
           feature: {
               magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
               restore: { show: true },
               saveAsImage: { show: true }
           }
       }

magicType可以讓長條圖轉成折線圖、堆疊圖等

dataZoom

接著我想要增加縮放月份的功能，這邊用到的是dataZoom，dataZoom的區域縮放功能可以選取想要的區域數值。

dataZoom有inside和slider兩種，在type屬性中宣告(預設是slider)，inside是內置的，可以使用滑鼠的滾輪操作，手機可以用兩指放大，而slider則是外面有縮放條可以選取。

slider

1
2
3
4
5
6
7
8
dataZoom: [ 
            {
                show: true,
                realtime: true,
                start: 0,
                end: 100
            }
        ],

tooltip

現在滑鼠移到圖表上會有顯示數據，但是都是每一條獨立觸發，我希望當我的滑鼠移到某個月分時，可以將三個數據都顯示出來，這時要用到tooltip的功能

還沒有tooltip的提示

tooltip有兩種觸發條件：item和axis，item主要用在散點圖，透過點觸發，而axis用在長條圖，透過軸觸發。

1
2
3
tooltip: {
            trigger: 'axis'
        },

完整程式碼

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
function get_month(){
    let p = $("#player").val();
    let chart = echarts.init(document.getElementById('month_stat'), 'white', { renderer: 'canvas' });
    let chart2 = echarts.init(document.getElementById('month_stat_2'), 'white', { renderer: 'canvas' });

    if(p!=='選擇球員'){
        $.ajax({
        type: 'POST',
        url: "/getchartinfo",
        data: {"p":p},
        success: function (result) {
            let option = {
                title: {
                    text: result['name']
                },
                legend: {
                    data: ['AVG', 'SLG', 'OBP']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [ 
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'AVG',
                    type: 'bar',
                    data: result['AVG']
                },{
                    name: 'OBP',
                    type: 'bar',
                    data: result['OBP']
                },{
                    name: 'SLG',
                    type: 'bar',
                    data: result['SLG']
                }]
            };
            chart.setOption(option);

            let option_2 = {
                title: {
                    text: '其他數據'
                },
                tooltip: {},
                legend: {
                    data: ['PA', 'AB', 'RBI', 'H', 'HR']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'PA',
                    type: 'bar',
                    data: result['PA']
                }, {
                    name: 'AB',
                    type: 'bar',
                    data: result['AB']
                }, {
                    name: 'H',
                    type: 'bar',
                    data: result['H']
                }, {
                    name: 'RBI',
                    type: 'bar',
                    data: result['RBI']
                }, {
                    name: 'HR',
                    type: 'bar',
                    data: result['HR']
                }]
            };
            chart2.setOption(option_2);
        }
    });
    }
}