這篇文章主要講解了“如何利用ECharts畫散點圖和氣泡圖”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何利用ECharts畫散點圖和氣泡圖”吧！

創(chuàng)新互聯(lián)是一家專注于成都網站制作、做網站與策劃設計,舟山網站建設哪家好?創(chuàng)新互聯(lián)做網站,專注于網站建設10年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:舟山等地區(qū)。舟山做網站價格咨詢:18980820575

01 散點圖

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

我們常常需要將不同類別的散點展現(xià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ū)分兩種散點。

可視化結果如圖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'     }     ] };

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

▲圖4-19 氣泡圖

感謝各位的閱讀，以上就是“如何利用ECharts畫散點圖和氣泡圖”的內容了，經過本文的學習后，相信大家對如何利用ECharts畫散點圖和氣泡圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

新聞標題：如何利用ECharts畫散點圖和氣泡圖
標題網址：http://aaarwkj.com/article38/jjhdpp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、品牌網站制作、靜態(tài)網站、定制開發(fā)、App設計、商城網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)