echart 地图 某个地区_一站式解决echarts实现区域地图
近期項(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)題。
- 上一篇： Crazepony的理念
- 下一篇： 如何在Linux终端里用Shell和C输