[JavaScript知识库]Vue使用echarts地图进阶2（实现多级下钻功能）

echarts地图实现多级下钻功能

点击下钻效果图：

先来小看一下，多级下钻和单次下钻跳转json文件的区别：

1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己，只有孩子们组成)

2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己，没有孩子们)

直接上代码

1、该页面涉及到的关键函数有三个：getGeoJson()、initChart()、initEcharts()
2、该页面结合了axios动态请求json文件数据

<!--实现全国地图下钻，由于涉及JSON文件较多，所以就直接引用在线JSON https://geo.datav.aliyun.com/areas_v3/bound/-->
<template>
	<div>
		<div class="areaRankingAll" ref="areaRankingAll" :style="{width: '700px', height: '500px',}">
		</div>
		<div>
			<button type="button" @click="cancel">返回上一级</button>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'//采用axios动态请求数据
	var echarts = require('echarts')
	export default {
		name: "areaRankingAll",
		mounted() {
			this.initChart();//初始化地图
		},
		data(){
			return{
				myChart: null,
				//线上请求JSON文件数据地址
				publicUrl:"https://geo.datav.aliyun.com/areas_v3/bound/",
				//allCode 区域行政编码信息
				allCode:[
					// {name:"廉江市",adcode:"440881"}
				],
			}
		},
		methods: {
			cancel(){
				this.initChart();
			},
			getGeoJson(jsonName){
				return axios.get(this.publicUrl+jsonName)
			},
			initEcharts(geoJson, name, chart) {
				let self = this;
				// this.myChart = echarts.init(this.$refs.areaRankingAll);
				echarts.registerMap(name, geoJson);
				let option = {
					title: {
						text: name,
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}<br/>{c} (数量)'
					},
					visualMap: {
						min: 100,
						max: 5000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered']
						}
					},
					series: [{
						type: 'map',
						map: name,
						label: {
							// show: true
						},
						data: [],
					}]
				}
				chart.setOption(option);
				chart.off("click");
				chart.on('click',params=>{
					//点击区域时的行政编码，然后再进行匹配
					let clickCode = self.allCode.filter(areaJson => areaJson.name === params.name)[0].adcode;
					//1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
					//2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
					//声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
					self.getGeoJson(clickCode + '_full.json').then(res =>{
						self.initEcharts(res.data, params.name, chart)
					}).catch(err =>{
						console.log(err,"err")
						self.getGeoJson('100000_full.json').then(China => {
							self.initEcharts(China.data, '中华人民共和国', chart)
						})
					})
					console.log(params);
				})
			},
			//带头函数-初始化
			initChart(){
				let chart = echarts.init(this.$refs.areaRankingAll);
				//this.allCode获取所有的区域编码信息
				this.getGeoJson('all.json').then(all => {
					this.allCode = all.data;
				});
				//初始化地图展示
				this.getGeoJson('100000_full.json').then(China => {
					this.initEcharts(China.data, '中华人民共和国', chart);
				});
			}
		}
	}
</script>

<style scoped>

</style>

另：若实现地图只下钻一次，并且不展示目标下钻区域的子区域，参考这篇Vue使用echarts地图进阶1（实现单次下钻功能）