Echarts數據可視化：圖表篇（4）—— 散點圖、散點氣泡圖、散點氣泡地圖

項目地址

系列推薦

《JavaScript設計模式與開發實踐》最全知識點彙總大全

使用場景

1. 直角座標系中，能夠展現多個維度或者度量之間的關係（至少4個）
2. 地理座標系，能夠展現地理位置和度量之間的關係

圖形特色

1. 展現信息豐富（相比於基礎圖表）

常見屬性

1. coordinateSystem：該系列使用的座標系，默認使用二維直角座標系（cartesian2d），還能夠選擇極座標系（polar）、地理座標系（geo）
2. symbol：標記的圖形，默認使用圓點（circle），若是須要自定義，能夠經過 'image://url' 設置爲圖片，最好設置爲矢量圖，這樣在調整大小和顏色時就不會出現失真的狀況了
3. large：是否開啓大數據量優化，默認不開啓（false），可是開啓後就不能自定義單個數據項的樣式了

示例分析

1. 1990與2015年各國家人均壽命與GDP散點氣泡圖

模型分析：

維度：時間、國家、GDP、人均壽命、人數

其中，人數是組合維度，是GDP和人均壽命二者結合起來決定的

數據分析：

假設咱們如今有此模型的數據，如何將其轉換成散點圖？

一般來講，數據用一個二維數組展現

散點氣泡圖數據格式

data: [
    // 維度X   維度Y   其餘維度 ...
    [  3.4,    4.5,   15,   43],
    [  4.2,    2.3,   20,   91],
    [  10.8,   9.5,   30,   18],
    [  7.2,    8.8,   18,   57]
]
複製代碼

每一列都是對應的維度，對應到以上模型，數組第一二列則分別爲GDP、人均壽命，後面三列則是人數、國家、時間了

2. 全國主要城市空氣質量

模型分析：

維度：座標信息、PM2.5指數大小

數據分析：

假設咱們如今有各地經緯度座標、以及對應的PM2.5數值，想在地圖上將各地PM2.5的狀況展現出來，數值越大，散點氣泡越大，如何實現？

散點氣泡地圖數據格式

data: [
    {name: "海門" , value: [121.15, 31.89, 9]},
    ...
]
複製代碼

其中，name表示地理名稱，value爲數組, value[0],value[1]分別表明經緯度，value[2]則是PM2.5的數值大小

相關思考

1. 如何定製散點樣式以知足實際須要
2. 基礎散點圖，不須要氣泡，如何實現