<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts地图选择器</title>
</head>
<style type="text/css">
body {
margin: 0;
}
html,
body,
#main {
width:500px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<button class="back">返回</button>
<div id="main"></div>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/hzchange.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let name = "";
let id = '';
let path = '';
let back = 2;
$(".back").click(function() {
cb('中国', 1, 0); //中国地图
});
var chart = echarts.init(document.getElementById('main'));
cb('中国', 1, 0); //中国地图
chart.on('click', function(params) {
if (params.seriesName == '中国') {
path = 'map/json/china.json';
$.get(path, function(data) {
id = data.features[params.dataIndex].id;
name = checkPin(params.data.name);
cb(name, id, 1);
})
} else {
if (id) {
if (Number(id.substring(id.length - 4)) == 0) {
path = 'map/json/province/' + params.seriesName + '.json';
if (isZxCity(params.seriesName)) {
selCity(id, params);
} else {
$.get(path, function(data) {
id = data.features[params.dataIndex].id;
name = checkPin(params.seriesName);
cb(name, id, 2);
})
}
} else {
selCity(id, params);
}
} else {
path = 'map/json/province/' + params.seriesName + '.json';
$.get(path, function(data) {
id = data.features[params.dataIndex].id;
name = checkPin(params.seriesName);
cb(name, id, 2);
})
}
}
});
function convertEname(keyword) {
var full = pinyin.getFullChars(keyword); //获取全写拼音
return full;
}
function isZxCity(city) { //判断是否是直辖市以及特别行政区
let cityArr = ['beijing', 'tianjin', 'shanghai', 'chongqing', 'taiwan', 'xianggang', 'aomen'];
if (cityArr.includes(city)) {
return true
}
}
function checkPin(name) {//处理特殊省份拼音识别有误问题
if (name == '山西') {
name = 'shanxi';
} else if (name == '陕西') {
name = 'shanxi1';
} else if (name == '重庆') {
name = 'chongqing';
} else if (name == '内蒙古') {
name = 'neimenggu';
} else if (name == '西藏') {
name = 'xizang';
} else {
name = convertEname(name);
}
let str = '';
for (let i = 0; i < name.length; i++) {
str = str + name[i].toLowerCase()
}
return str
}
function selCity(id, params) { //给出选择的县区
path = 'map/json/citys/' + id + '.json';
$.get(path, function(data) {
alert(params.data.name);
})
}
function cb(name, id, type) {
if (type == 0) {
path = 'map/json/china.json';
} else if (type == 1) {
path = 'map/json/province/' + name + '.json';
} else {
path = 'map/json/citys/' + id + '.json';
}
if (path != "") {
$.get(path, function(json) {
var data = [];
for (var i = 0; i < json.features.length; i++) {
var info = json.features[i].properties;
data.push({
id: info.id,
name: info.name
});
}
echarts.registerMap(name, json);
var option = {
series: [{
name: name,
map: name,
type: 'map',
label: {
show: true,
fontSize: 10,
position: 'inside'
},
emphasis: {
itemStyle: {
areaColor: '#eee',
borderColor: '#000',
borderWidth: 1,
borderType: 'solid',
shadowBlur: 10,
shadowColor: '#ddd',
shadowOffsetX: 10,
shadowOffsetY: 10,
opacity: 1
}
},
data: data
}]
};
chart.setOption(option, false);
});
}
}
</script>
</body>
</html>
echart省市区三级地图下钻
猜你喜欢
转载自blog.csdn.net/qq_35086913/article/details/110439369
今日推荐
周排行