Echarts數據可視化：圖表篇（5）—— 填充地圖、遷徙地圖、熱力地圖

項目地址

系列推薦

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

使用場景

在數據可視化中，地圖可視化是不可缺乏的重要一環，種類也比較多。例如：填充地圖、遷徙地圖、熱力地圖

主要展現地理信息與數據的關聯關係

圖形特色

1. 分爲虛擬地圖和現實地圖，表達不一樣類型的數據

2. 能夠對地圖進行拖拽、縮放，實現不一樣層級的數據展現、例如國家級別、省份級別、城市級別

3. 須要和地理位置進行關聯才能展現相關數據信息

常見屬性

1. geo（地理座標系組件）：主要用於虛擬地圖的繪製
   • map（地圖類型）：地圖數據來源，例如china表示全國各省份數據、hubei表示湖北省各城市的數據，這些數據都須要提早導入
   • roam（是否開啓鼠標縮放和平移漫遊）：開啓後，地圖就變成可交互型圖表了
   • center（當前視角的中心點）：用經緯度表示，例如center: [115.97, 29.71]
   • boundingCoords（地圖範圍）：定義地圖左上角和右下角的經緯度，用二維數組表示，例如

   boundingCoords: [
        // 定位左上角經緯度
        [-180, 90],
        // 定位右下角經緯度
        [180, -90]
    ]
   複製代碼

   • zoom（縮放比例）：能夠修改地圖展現的層級，zoom越大，地圖越精細
   • itemStyle（地圖區域的多邊形）：每一塊地圖區域的樣式
   • regions[i]（指定區域的樣式）：能夠配置指定地區的多邊形樣式，例如

   regions: [{
       name: '廣東',
       itemStyle: {
           areaColor: 'red',
           color: 'red'
       }
   }]
   複製代碼

2. series[i]-map（地圖系列）
   • geoIndex（geo組件索引）：默認狀況下，series-map會生成內部專用的geo組件，可是若是須要需散點圖、遷徙圖共用一個geo組件，就須要使用geoIndex了

實例分析

1. 省份旅遊人數填充地圖

模型分析：

維度：地理位置

度量：旅遊人數

數據分析：

假設咱們擁有各省份對應的旅遊人數，須要將其轉換爲省份旅遊人數填充地圖，如何實現？

填充地圖最小單位數據格式：

{   
    name: '湖北',   // 地理信息
    value: 1234     // 數值大小
}
複製代碼

2. 北上廣遷徙地圖

模型分析：

維度：地理位置 度量：遷移人數

數據分析：假設咱們擁有北京、上海、廣州前往其餘各省份的遷徙人數，須要繪製這三個省份的遷徙地圖，如何繪製？

遷徙地圖最小單位數據格式：

遷徙地圖構成元素分別爲「漣漪點」、「遷徙線」，因此對應的數據格式分別有兩種

• 漣漪點

{
    name: '上海'        // 地理信息
    value: [121.4648, 31.2891, 95]      // 經緯度、數值大小
}
複製代碼

• 遷徙線

{
    fromName: '北京'        // 出發點
    toName: '上海'          // 到達點
    coords: [
        [116.4551, 40.2539],        // 出發點經緯度
        [121.4648, 31.2891]         // 到達點經緯度
    ]   
}
複製代碼

3. 杭州出行熱力圖

模型分析： 維度：經緯度信息 度量：出行人數

數據分析：假設咱們擁有杭州某區域的經緯度出行人數合集，如何進行出行熱力圖的繪製

熱力地圖最小單位數據格式

[
    120.14322240845,        
    30.236064370321,
    1
]
複製代碼

其中，每個小點都是由此類型數組組成，分別表明經緯度、人數信息，遷徙圖的構成則是由幾千甚至上萬的小點匯聚而成，經過visualMap視覺通道造成熱力地圖

相關思考

1. 如何將遷徙地圖的圖標進行修改
2. 如何優化熱力地圖大量數據形成的卡頓現象