導讀：散點圖是一種基礎的可視化圖。氣泡圖和散點圖類似，區别是二維散點圖展現的是兩個維度信息，而二維氣泡圖可以展現三個維度的信息。

作者：王大偉

來源：華章科技

散點圖是一種基礎的可視化圖，在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 多類别的散點圖

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

我們修改散點圖的代碼，在類别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){ returndata[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數據可視化：入門、實戰與進階》，經出版方授權發布。

延伸閱讀《ECharts數據可視化》

推薦語：ECharts官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速從新人到高手。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!