近期項目中有個大屏展示的需求，需要顯示行政區的地圖。苦苦尋找的過程中發現此方面資料很少且大部分在CSDN上付費下載，著實麻煩，特此總結，供大家參考。

直接上圖

關鍵知識點

geo數據

geo是echarts渲染數據的格式，geo是數據基礎，有基礎數據就很容易實現上圖效果了。

visualMap

visualMap 是視覺映射組件，用于進行『視覺編碼』，也就是將數據映射到視覺元素(視覺通道)，地圖的渲染依賴于此配置。

// 基于準備好的dom，初始化echarts實例

$.get("../geo/市含縣/320800_full.json", function(huaianJson) {

echarts.registerMap("huaian", huaianJson);

var chart = echarts.init(document.getElementById("echartMap"));

chart.setOption({

backgroundColor: "#404a59",

visualMap: {

type: "continuous",

min: 0,

max: 100,

text: ["High", "Low"],

realtime: false,

calculable: true,

color: ["#3ADEF1", "#0089FC", "#0057FE"],

show: false

},

series: [

{

type: "map",

mapType: "huaian",

roam: false,

label: {

normal: {

show: true,

color: "#fff"

},

emphasis: {

show: true

}

},

itemStyle: {

emphasis: { label: { show: true } }

},

data: [

{ name: "金湖縣", value: 80 },

{ name: "盱眙縣", value: 50 },

{ name: "漣水縣", value: 80 },

{ name: "洪澤區", value: 70 },

{ name: "淮陰區", value: 80 },

{ name: "淮安區", value: 40 },

{ name: "清江浦區", value: 50 }

]

}

]

});

});

復制代碼

如何拿到geo數據

不得不感謝阿里提供的便利點擊。你可以獲得2種json數據，xxx.json和xxx_full.json。區別在于xxx.json只有當前行政區的輪廓數據，xxx_full.json包含子行政區的數據。

批量下載

手動下載著實麻煩，特提供下載工具。

點此傳送門獲取所有行政區域的數據。或執行npm run create 重新下載最新數據。

總結

以上是生活随笔為你收集整理的echart 地图 某个地区_一站式解决echarts实现区域地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。