• Echarts的Map學習記錄
• Map介紹
• Map配置
  • geo
  • series
    • visualMap
    • tooltip
• Map飛線圖配置
• 單點擴散飛線圖配置
  • GeoLines 組件：
  • EffectScatter 組件：
  • Scatter 組件：
• Map運行軌跡配置
• 地圖資料下載鏈接整理

Echarts的Map學習記錄

Map介紹

Echarts 中的地圖（Map）是一種可視化展示地理資料的圖表型別，可以用來展示各地區的地理位置、熱力分布、人口密度、經濟發展水平等各種地理資料，地圖圖表可以被分為兩類：常規地圖和熱力圖，其中，常規地圖可以展示不同區域的地理位置和大小，熱力圖可以用來展示不同地區的密度等權值型資訊，

Echarts 的地圖可以實作以下功能：

• 支持對任意國家或地區的地圖進行展示；

• 支持對不同的地區進行顏色、大小、標簽等樣式設定；

• 支持多種地圖型別的顯示，如普通的平面地圖、3D地圖等；

• 支持豐富的互動功能，如滑鼠懸停、滾動縮放、拖拽等；

• 支持與其他組件聯動，如資料過濾器、時間線等，

在Echarts中，地圖資料可以通過以下兩種方式進行加載：

• 本地JSON資料：用戶可以自己撰寫一份JSON格式的資料檔案，然后通過Echarts的API自動渲染到地圖上；

• 百度地圖API：用戶可以利用百度提供的JavaScript API，在Echarts中直接呼叫百度地圖來進行地圖渲染，

Echarts 的地圖功能可以幫助用戶更好地展示和分析地理資料，提升資料的可視化效果，為用戶提供更為豐富的資料分析手段，

Map配置

geo

geo 是地理坐標系組件，主要作用是繪制地圖，通過設定 geo 組件的屬性可以實作對地圖的樣式、互動等方面的控制，比如：

• map: 設定地圖的型別，可以設定為國家（如 'china'）、省份（如 '四川'）等，

• scaleLimit: 可以設定地圖的縮放范圍，

• roam: 是否開啟滑鼠縮放和平移漫游地圖，

series

series 是地圖資料系列，主要用來加載地圖資料和對地圖中的元素進行進一步的定制，比如：

• type: 設定系列的型別，這里設定為 'map'，

• mapType: 設定地圖型別，與 geo 組件中的 map 屬性相同，

• data: 地圖上需要展示的資料，可以是一個陣列，里面每個元素代表一個區域，

• symbolSize: 地圖上每個元素（區域）的大小，

visualMap

visualMap 是視覺映射組件，用于將資料經過映射后，映射到對應的顏色、大小等視覺元素上，通過設定 visualMap 組件的屬性可以實作對資料可視化方面的控制，比如：

• show: 設定是否顯示組件，

• type: 設定組件的型別，這里設定為 'piecewise'（分段型，即將資料分為若干段，每個段的可視化方式相同），

• min/max: 設定映射的資料范圍，

• inRange: 設定每個資料對應的顏色、大小等可視化方式，可以使用陣列或者顏色漸變方法進行設定，

tooltip

tooltip 是提示框組件，主要用于設定滑鼠懸停在地圖上時，顯示的提示資訊，比如：

• trigger: 設定觸發提示框的方式，這里設定為 'item'，

• formatter: 設定提示框內容的格式化方式，可以使用字串模板進行設定，模板中可以使用占位符填充資料，模板中使用 \n 換行符可以設定多行顯示，

Map飛線圖配置

Map做飛線圖可以通過 Echarts 中的 GeoLines 組件實作，GeoLines 組件可以連接兩個或多個地理坐標點，實作不同區域間的流動關系可視化，下面介紹一下 GeoLines 組件中常用的配置項及其作用：

• type?type 表示圖表型別，這里要設定為 'lines'，

• coordinateSystem?coordinateSystem 表示坐標系，這里要設定為 'geo'，

• data 表示需要展示的資料，可以是一個陣列，里面每個元素代表一條線，

每個元素中都包含兩個屬性：

• fromName: 起點名稱，

• toName: 終點名稱，

• coords: 起點和終點坐標陣列，

• symbol?symbol 表示標記的圖形，可以是一個陣列，里面包含可選的標記型別，

• symbolSize?symbolSize 表示標記的大小，

• lineStyle?lineStyle 表示線的樣式設定，包括線的顏色、粗細等屬性，

• emphasis?emphasis 表示滑鼠懸停在線上時的樣式設定，包括線的顏色、粗細等屬性，

通過以上配置項的設定，就可以實作 Map 的飛線圖效果，需要注意的是，Map 的飛線圖通常需要在 data 中加入起點和終點的經緯度坐標資訊，并使用 Geo 組件中的 map 屬性設定地圖型別，從而實作正確的坐標系映射，

單點擴散飛線圖配置

一個點擴散出去的 Map 飛線圖通常是通過 Echarts 中的 GeoLines、EffectScatter 和 Scatter 組件實作的，其中 GeoLines 組件用來展示擴散出去的線條，EffectScatter 組件用來添加動態的擴散效果，Scatter 組件用來展示原始點標記，下面介紹一下這些組件的配置項及其作用：

GeoLines 組件：

• type: 'lines'，表示圖表型別，

• coordinateSystem: 'geo'，表示使用地理坐標系，

• data: 所有需要展示的線條資料，

• symbol: 可選的標記型別陣列，

• symbolSize: 標記的大小，

• lineStyle: 線條的樣式設定，包括顏色、粗細等屬性，

• emphasis: 滑鼠懸停在線條上時的樣式設定，包括線條的顏色、粗細等屬性，

EffectScatter 組件：

• type: 'effectScatter'，表示圖表型別，

• coordinateSystem: 'geo'，表示使用地理坐標系，

• showEffectOn: 'render'，表示渲染動態特效，

• rippleEffect: 通過該屬性設定擴散特效的顏色、半徑等屬性，

• symbol: 可選的標記型別陣列，

• symbolSize: 標記的大小，

• data: 需要展示的點資料，

Scatter 組件：

• type: 'scatter'，表示圖表型別，

• coordinateSystem: 'geo'，表示使用地理坐標系，

• symbol: 可選的標記型別陣列，

• symbolSize: 標記的大小，

• data: 所有需要展示的原始點資料，

通過以上配置項的設定，就可以實作一個點擴散出去的 Map 飛線圖效果，需要注意的是，點標記以及擴散特效的位置資訊需要通過經緯度坐標來設定，同時需要使用 Geo 組件中的 map 屬性設定地圖型別，從而實作正確的坐標系映射，

Map運行軌跡配置

Map 實作類似高鐵出行軌跡圖的效果通常需要使用 Echarts 中的 GeoLines 組件，GeoLines 組件可以連接兩個或多個地理坐標點，實作不同區域間的流動關系可視化，下面介紹一下 GeoLines 組件中常用的配置項及其作用：

• type 表示圖表型別，這里要設定為 'lines'，

• coordinateSystem?coordinateSystem 表示坐標系，這里要設定為 'geo'，

• data?data 表示需要展示的資料，可以是一個陣列，里面每個元素代表一條線，?每個元素中都包含兩個屬性：

• fromName: 起點名稱，

• toName: 終點名稱，

• coords: 起點和終點坐標陣列，

• symbol?symbol 表示標記的圖形，可以是一個陣列，里面包含可選的標記型別，

• symbolSize?symbolSize 表示標記的大小，

• lineStyle?lineStyle 表示線的樣式設定，包括線的顏色、粗細等屬性，

• emphasis?emphasis 表示滑鼠懸停在線上時的樣式設定，包括線的顏色、粗細等屬性，?通過以上配置項的設定，就可以實作高鐵出行軌跡圖的效果，需要注意的是，需要在 data 中加入起點和終點的經緯度坐標資訊，并使用 Geo 組件中的 map 屬性設定地圖型別，從而實作正確的坐標系映射，此外，為了展示高鐵行駛路徑，需要加入軌跡影片效果，可以通過 Echarts 中的影片設定來實作，

地圖資料下載鏈接整理

由于Echarts地圖檔案很多，所以不同的版本可能有不同的地圖檔案，可以到官網上查找并下載特定版本的地圖檔案，以下是Echarts官網中V5版本地圖檔案的下載鏈接：

• https://echarts.apache.org/examples/data/echarts/map/json/china.json
• https://echarts.apache.org/examples/data/echarts/map/json/world.json

如果您需要特定省、市的地圖檔案，可以到官網的檔案中查找：

• https://echarts.apache.org/zh/option.html#series-map.map
• https://echarts.apache.org/examples/zh/index.html#chart-type-map

在這些檔案中，您可以找到各省、市的地圖檔案鏈接，如：

• https://echarts.apache.org/examples/data/echarts/map/json/province/anhui.json
• https://echarts.apache.org/examples/data/echarts/map/json/province/beijing.json
• https://echarts.apache.org/examples/data/echarts/map/json/province/chongqing.json

可以根據具體的需求來下載相應的檔案，

之前提供的鏈接可能已經過期或者不正確了，以下是最新的Echarts地圖檔案下載方式：

1. 打開Echarts官網（https://echarts.apache.org/zh/index.html），并找到左側的“下載”選單，點擊進入下載頁面，
2. 在下載頁面中，找到“地圖”分類，可以下載中國地圖、世界地圖、以及各個省、市、自治區、縣的地圖等，選擇需要的地圖檔案并下載，
3. 下載后解壓縮，即可得到對應的JSON檔案，可以通過Echarts或其他資料可視化工具進行使用，

希望這次能夠幫到您，如還有問題歡迎隨時詢問，

標籤：其他

上一篇：Vue2異步更新及nextTick原理

下一篇：微前端專案部署方案