Echarts的Map學習記錄 Map介紹 Echarts 中的地圖（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 是提示框組件，主要用於設置滑鼠懸停在地圖上時，顯示的提示信息。比如：

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版本地圖文件的下載鏈接：

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

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

可以根據具體的需求來下載相應的文件。

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

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

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

登峰造極的成就源於自律

Echarts中的Map學習記錄