echart省市区三级地图下钻

<!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省市区三级地图下钻

猜你喜欢
