echart

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

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

<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官網有即時顯示的編輯器可用。

官方範例

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屬性。

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。

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

完整的設置程式碼如下

let option = {
                title: {
                    text: result['name']
                },
                legend: {
                    data: ['AVG', 'SLG', 'OBP']
                },
                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']
                }]
            };

result為ajax跟Falsk取的資料
另一個圖表也是相同作法

下一篇會繼續為這個圖表增添功能