近期項目中有個大屏展現的需求,須要顯示行政區的地圖。苦苦尋找的過程當中發現此方面資料不多且大部分在CSDN上付費下載,着實麻煩,特此總結,供你們參考。javascript
geo是echarts渲染數據的格式,geo是數據基礎,有基礎數據就很容易實現上圖效果了。java
visualMap 是視覺映射組件,用於進行『視覺編碼』,也就是將數據映射到視覺元素(視覺通道),地圖的渲染依賴於此配置。git
<script type="text/javascript">
// 基於準備好的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 }
]
}
]
});
});
</script>
複製代碼
不得不感謝阿里提供的便利點擊。你能夠得到2種json數據,xxx.json和xxx_full.json。區別在於xxx.json只有當前行政區的輪廓數據,xxx_full.json包含子行政區的數據。github
手動下載着實麻煩,特提供下載工具。 點此傳送門獲取全部行政區域的數據。或執行npm run create 從新下載最新數據。npm