下載echarts jquery
https://github.com/apache/incubator-echarts/archive/4.2.1.zip
https://code.jquery.com/jquery-1.9.1.min.js
下載自定義地圖文件
1.在線獲取縣級Json
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
2.自定義區(qū)域選擇（以下簡稱“工具”）： http://geojson.io/#map=10/26.6778/106.3360
成都新增區(qū)域JSON
https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json
地圖上顯示點(diǎn)
顯示三維地圖
https://www.cnblogs.com/telwanggs/p/11056515.html
基于Echarts插件的省市區(qū)多級地圖下鉆和返回功能實(shí)現(xiàn)
https://blog.csdn.net/mulumeng981/article/details/76400687
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>決策系統(tǒng)</title>
<script src="echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="charts" style="width:500px;height: 400px;"></div>
<script src="index.js"></script>
</body>
</html>
620100.js
/**蘭州市區(qū)縣列表*/
var lanZhou = [
{name: '永登縣', value: "620121"},
{name: '紅古區(qū)', value: "620111"},
{name: '西固區(qū)', value: "620104"},
{name: '安寧區(qū)', value: "620105"},
{name: '皋蘭縣', value: "620122"},
{name: '七里河區(qū)', value: "620103"},
{name: '城關(guān)區(qū)', value: "620102"},
{name: '榆中縣', value: "620123"}
];
js
var myChart = echarts.init(document.getElementById('charts'));
myChart.showLoading();
$.get('620100_full.json', function (usaJson) {
myChart.hideLoading();
echarts.registerMap('LZ', usaJson);
option = {
title: {
text: '蘭州市行政區(qū)域地圖',
subtext: '',
sublink: '',
left: 'center'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = params.value;
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
series: [
{
name: '蘭州市政區(qū)域代碼',
type: 'map',
roam: true,
map: 'LZ',
itemStyle:{
//默認(rèn)顯示地圖地名
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data: lanZhou
}
]
};
myChart.setOption(option);
});
//單擊事件
myChart.on('click', function (params) {
alert(params.value);
});
效果展示
地圖點(diǎn)擊進(jìn)入下級
https://blog.csdn.net/daiqisi/article/details/81017740?utm_source=blogxgwz7
