01?背景

在數據可視化項目里面經常會用到地圖隨機選中或地圖定時選中的效果，結合各個地圖api 和可視化庫對比發(fā)現：用ECharts的地圖組件實現較為簡單。

地圖組件一直是 ECharts 中使用非常廣泛的組件。一般地圖組件會使用存儲了經緯度的 GeoJSON 格式的數據，而 ECharts 則計算出合適的顯示區(qū)域然后把經緯度線性映射到這個區(qū)域，這是一種最簡單的地圖投影方式。

02?最終效果

看著這種效果，是不是覺得很酷！話不多說，馬上開始！

03?準備工作

安裝ECharts

下載最新版本的ECharts(官網)

https://echarts.apache.org/zh/download.html

下載經緯度數據

下載中國經緯度的 GeoJSON json數據(國內在高德地圖下載)

http://datav.aliyun.com/portal/school/atlas/area_selector

重命名文件

把下載的json文件保存到項目目錄并命名為geojson.json，數據里面存儲了國內34個省級行政區(qū)域的地理經緯度坐標信息。

代碼

如果實在不知道代碼怎么寫？沒關系，小趣已經幫大家準備好了，可以參考著來哦~

04?代碼

index.html

mapdemo.js

05?寫在最后

ECharts不僅能做出地圖隨機選擇和高亮的效果，在其他數據可視化場景下的表現也是很棒的！有興趣的小伙伴可以自行研究一下~