[[403872]]

本文轉(zhuǎn)載自微信公眾號「大數(shù)據(jù)DT」，作者王大偉。轉(zhuǎn)載本文請聯(lián)系大數(shù)據(jù)DT公眾號。

01 散點圖

散點圖是一種基礎(chǔ)的可視化圖，在ECharts中，制作散點圖時需要將series中type參數(shù)值設(shè)置為scatter，一幅簡單的散點圖如圖4-17所示。這里省略了很多組件，感興趣的讀者可以自行查閱。

▲圖4-17 散點圖

代碼如下：

option = { 
    xAxis: {}, 
    yAxis: {}, 
    series: [{ 
        data: [ 
            [2.0, 8.04], 
            [3.0, 6.95], 
            [23.0, 7.58], 
            [18.0, 8.81], 
            [12.0, 8.33], 
            [4.0, 9.96], 
            [16.0, 7.24], 
            [14.0, 4.26], 
            [12.0, 10.84], 
            [10.0, 4.82], 
            [7.0, 5.68] 
        ], 
        type: 'scatter' 
    }] 
}; 

需要注意的是，圖4-17的散點圖是在二維直角坐標系上繪制的，所以每個點需要用兩個維度表示，同時要注意data參數(shù)中的數(shù)據(jù)結(jié)構(gòu)，這和之前幾種可視化的數(shù)據(jù)結(jié)構(gòu)差異較大。

我們常常需要將不同類別的散點展現(xiàn)在同一張圖中，按照之前幾幅圖的學習經(jīng)驗，只需要在series中增加新的數(shù)據(jù)即可，代碼如下：

option = { 
    xAxis: {}, 
    yAxis: {}, 
    legend: { 
        data: ['類別1','類別2'] 
    }, 
    series: [{ 
        name: '類別1', 
        data: [ 
            [2.0, 8.04], 
            [3.0, 6.95], 
            [23.0, 7.58], 
            [18.0, 8.81], 
            [12.0, 8.33], 
            [4.0, 9.96], 
            [16.0, 7.24], 
            [14.0, 4.26], 
            [12.0, 10.84], 
            [10.0, 4.82], 
            [7.0, 5.68] 
        ], 
        type: 'scatter' 
    }, 
    { 
        name: '類別2', 
        data: [ 
            [1.0, 2.04], 
            [2.0, 15.95], 
            [26.0, 17.58], 
            [13.0, 7.81], 
            [22.0, 5.33], 
            [14.0, 9.96], 
            [6.0, 4.24], 
            [4.0, 4.26], 
            [22.0, 13.84], 
            [16.0, 14.82], 
            [17.0, 15.68] 
    ], 
        type: 'scatter' 
    } 
    ] 
}; 

這里為數(shù)據(jù)賦予了name參數(shù)，所以可以使用legend區(qū)分兩種散點。

可視化結(jié)果如圖4-18所示。

▲圖4-18 多類別的散點圖

02 氣泡圖

氣泡圖和散點圖類似，區(qū)別是二維散點圖展現(xiàn)的是兩個維度信息，而二維氣泡圖可以展現(xiàn)三個維度的信息，因為多了一個展示氣泡大小的維度信息。

我們修改散點圖的代碼，在類別1的數(shù)據(jù)中增加一個維度數(shù)據(jù)作為氣泡大小，這里會使用到function函數(shù)功能，函數(shù)返回當前氣泡信息(三維數(shù)據(jù))的第三個維度數(shù)據(jù)，也就是氣泡的大小，需要注意的是，data[2]代表第三維數(shù)據(jù)，因為是從data[0]開始計算。具體代碼如下：

option = { 
    xAxis: {}, 
    yAxis: {}, 
    legend: { 
        data: ['類別1','類別2'] 
    }, 
    series: [{ 
        name: '類別1', 
        data: [ 
            [2.0, 8.04, 10], 
            [3.0, 6.95, 20], 
            [23.0, 7.58, 30], 
            [18.0, 8.81, 15], 
            [12.0, 8.33, 16], 
            [4.0, 9.96, 5], 
            [16.0, 7.24, 18], 
            [14.0, 4.26, 35], 
            [12.0, 10.84, 20], 
            [10.0, 4.82, 50], 
            [7.0, 5.68, 13] 
        ], 
        symbolSize: function (data) { 
            return data[2]; 
        }, 
        type: 'scatter' 
    }, 
    { 
        name: '類別2', 
        data: [ 
            [1.0, 2.04], 
            [2.0, 15.95], 
            [26.0, 17.58], 
            [13.0, 7.81], 
            [22.0, 5.33], 
            [14.0, 9.96], 
            [6.0, 4.24], 
            [4.0, 4.26], 
            [22.0, 13.84], 
            [16.0, 14.82], 
            [17.0, 15.68] 
    ], 
        type: 'scatter' 
    } 
    ] 
}; 

可視化結(jié)果如圖4-19所示，類別1的氣泡大小不一，而類別2的氣泡大小相同，為一般散點圖。

▲圖4-19 氣泡圖

關(guān)于作者：王大偉，畢業(yè)于華東理工大學，碩士學歷，目前就職于平安金融壹賬通，從事數(shù)據(jù)挖掘算法工作，擅長ECharts、Python、自然語言處理、數(shù)據(jù)分析挖掘、機器學習。曾獲微軟最有價值專家(MVP)榮譽稱號。

本文摘編自《ECharts數(shù)據(jù)可視化：入門、實戰(zhàn)與進階》，經(jīng)出版方授權(quán)發(fā)布。