[[403872]]

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

01 散點(diǎn)圖

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

▲圖4-17 散點(diǎn)圖

代碼如下：

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的散點(diǎn)圖是在二維直角坐標(biāo)系上繪制的，所以每個(gè)點(diǎn)需要用兩個(gè)維度表示，同時(shí)要注意data參數(shù)中的數(shù)據(jù)結(jié)構(gòu)，這和之前幾種可視化的數(shù)據(jù)結(jié)構(gòu)差異較大。

我們常常需要將不同類別的散點(diǎn)展現(xiàn)在同一張圖中，按照之前幾幅圖的學(xué)習(xí)經(jīng)驗(yàn)，只需要在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ū)分兩種散點(diǎn)。

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

▲圖4-18 多類別的散點(diǎn)圖

02 氣泡圖

氣泡圖和散點(diǎn)圖類似，區(qū)別是二維散點(diǎn)圖展現(xiàn)的是兩個(gè)維度信息，而二維氣泡圖可以展現(xiàn)三個(gè)維度的信息，因?yàn)槎嗔艘粋€(gè)展示氣泡大小的維度信息。

我們修改散點(diǎn)圖的代碼，在類別1的數(shù)據(jù)中增加一個(gè)維度數(shù)據(jù)作為氣泡大小，這里會(huì)使用到function函數(shù)功能，函數(shù)返回當(dāng)前氣泡信息(三維數(shù)據(jù))的第三個(gè)維度數(shù)據(jù)，也就是氣泡的大小，需要注意的是，data[2]代表第三維數(shù)據(jù)，因?yàn)槭菑膁ata[0]開(kāi)始計(jì)算。具體代碼如下：

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的氣泡大小相同，為一般散點(diǎn)圖。

▲圖4-19 氣泡圖

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

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