[[403872]]

本文轉載自微信公眾號「大數據DT」，作者王大偉。轉載本文請聯系大數據DT公眾號。

01 散點圖

散點圖是一種基礎的可視化圖，在ECharts中，制作散點圖時需要將series中type參數值設置為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參數中的數據結構，這和之前幾種可視化的數據結構差異較大。

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

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' 
    } 
    ] 
}; 

這里為數據賦予了name參數，所以可以使用legend區分兩種散點。

可視化結果如圖4-18所示。

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

02 氣泡圖

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

我們修改散點圖的代碼，在類別1的數據中增加一個維度數據作為氣泡大小，這里會使用到function函數功能，函數返回當前氣泡信息(三維數據)的第三個維度數據，也就是氣泡的大小，需要注意的是，data[2]代表第三維數據，因為是從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' 
    } 
    ] 
}; 

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

▲圖4-19 氣泡圖

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

本文摘編自《ECharts數據可視化：入門、實戰與進階》，經出版方授權發布。