近期項(xiàng)目中有個(gè)大屏展示的需求，需要顯示行政區(qū)的地圖。苦苦尋找的過(guò)程中發(fā)現(xiàn)此方面資料很少且大部分在CSDN上付費(fèi)下載，著實(shí)麻煩，特此總結(jié)，供大家參考。

直接上圖

關(guān)鍵知識(shí)點(diǎn)

geo數(shù)據(jù)

geo是echarts渲染數(shù)據(jù)的格式，geo是數(shù)據(jù)基礎(chǔ)，有基礎(chǔ)數(shù)據(jù)就很容易實(shí)現(xiàn)上圖效果了。

visualMap

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

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

$.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: "洪澤區(qū)", value: 70 },

{ name: "淮陰區(qū)", value: 80 },

{ name: "淮安區(qū)", value: 40 },

{ name: "清江浦區(qū)", value: 50 }

]

}

]

});

});

復(fù)制代碼

如何拿到geo數(shù)據(jù)

不得不感謝阿里提供的便利點(diǎn)擊。你可以獲得2種json數(shù)據(jù)，xxx.json和xxx_full.json。區(qū)別在于xxx.json只有當(dāng)前行政區(qū)的輪廓數(shù)據(jù)，xxx_full.json包含子行政區(qū)的數(shù)據(jù)。

批量下載

手動(dòng)下載著實(shí)麻煩，特提供下載工具。

點(diǎn)此傳送門獲取所有行政區(qū)域的數(shù)據(jù)。或執(zhí)行npm run create 重新下載最新數(shù)據(jù)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。