建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「大數(shù)據(jù)DT」，作者王大偉。轉(zhuǎn)載本文請聯(lián)系大數(shù)據(jù)DT公眾號。
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供新蔡網(wǎng)站建設(shè)、新蔡做網(wǎng)站、新蔡網(wǎng)站設(shè)計(jì)、新蔡網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、新蔡企業(yè)網(wǎng)站模板建站服務(wù)，10年新蔡做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
01 散點(diǎn)圖
散點(diǎn)圖是一種基礎(chǔ)的可視化圖，在ECharts中，制作散點(diǎn)圖時需要將series中type參數(shù)值設(shè)置為scatter，一幅簡單的散點(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)系上繪制的，所以每個點(diǎn)需要用兩個維度表示，同時要注意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)的是兩個維度信息，而二維氣泡圖可以展現(xiàn)三個維度的信息，因?yàn)槎嗔艘粋€展示氣泡大小的維度信息。
我們修改散點(diǎn)圖的代碼，在類別1的數(shù)據(jù)中增加一個維度數(shù)據(jù)作為氣泡大小，這里會使用到function函數(shù)功能，函數(shù)返回當(dāng)前氣泡信息(三維數(shù)據(jù))的第三個維度數(shù)據(jù)，也就是氣泡的大小，需要注意的是，data[2]代表第三維數(shù)據(jù)，因?yàn)槭菑膁ata[0]開始計(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ù)挖掘算法工作，擅長ECharts、Python、自然語言處理、數(shù)據(jù)分析挖掘、機(jī)器學(xué)習(xí)。曾獲微軟最有價值專家(MVP)榮譽(yù)稱號。
本文摘編自《ECharts數(shù)據(jù)可視化：入門、實(shí)戰(zhàn)與進(jìn)階》，經(jīng)出版方授權(quán)發(fā)布。
網(wǎng)站名稱：手把手教你用ECharts畫散點(diǎn)圖和氣泡圖
網(wǎng)頁地址：http://www.dlmjj.cn/article/codsese.html
