Vue使用echarts地图进阶1（实现单次下钻功能）

echarts地图实现单次下钻功能

效果图：

先来小看一下（也可以不用看，只是帮助一下加深理解），多级下钻和单次下钻跳转json文件的区别：

直接上代码

<!--实现湛江市的简单下钻，只有一层下钻，采用结合axios请求，本地引入JSON方式-->
<template>
	<div>
		<div class="areaRanking1" ref="areaRanking1" :style="{width: '600px', height: '500px',}">
		</div>
		<div>
			<button type="button" @click="cancel">返回父级地图</button>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	var echarts = require('echarts')
	export default {
		name: "areaRanking1",
		mounted() {
			// this.testData("440881");
			this.initChart();//最先展示全部-最大的那个
		},
		data(){
			return{
				//由于是单次下钻，所以没必要请求全部json区域编码信息
				allCode:[
					{name:"廉江市",adcode:"440881"},
					{name:"吴川市",adcode:"440883"},
					{name:"遂溪县",adcode:"440823"},
					{name:"赤坎区",adcode:"440802"},
					{name:"坡头区",adcode:"440804"},
					{name:"霞山区",adcode:"440803"},
					{name:"麻章区",adcode:"440811"},
					{name:"雷州市",adcode:"440882"},
					{name:"徐闻县",adcode:"440825"},
				]
			}
		},
		methods: {
			cancel(){
				this.initChart();
			},
			getLocalJson(jsonName){
				//封装了axios请求，这里是动态请求本地json,故而url是本地路径，Vue3.x以上静态资源一般存在public中，我这里是在public下新建js文件夹，将所有json文件放于其中
				return axios.get(`/js/${jsonName}.json`)
			},
			initEcharts(geoJson, name, chart) {
				let self = this;
				echarts.registerMap(name, geoJson);
				let option = {
					title: {
						text: name,
					},
					tooltip: {
						trigger: 'item',
						//这是自定义弹框内容
						formatter: parms => {
							var str = parms.marker + "" + parms.data.name + "</br>" +
								"数量：" + parms.data.value + "</br>"
							return str;
						}
					},
					visualMap: {
						min: 10,
						max: 1000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered']
						}
					},
					series: [{
						type: 'map',
						map: name,
						label: {
							show: true
						},
						data: [
							{ name: '廉江市', value: 21 },
							{ name: '遂溪县', value: 111 },
							{ name: '吴川市', value: 311 },
							{ name: '坡头区', value: 631 },
							{ name: '赤坎区', value: 791 },
							{ name: '霞山区', value: 411 },
							{ name: '麻章区', value: 31 },
							{ name: '雷州市', value: 421 },
							{ name: '徐闻县', value: 911 }
						],
					}]
				}
				chart.setOption(option);
				chart.off("click");
				chart.on('click',params=>{
					//根据点击区域名称去获取点击区域的行政区域编码
					let clickCode = self.allCode.filter(areaJson => areaJson.name === params.name)[0].adcode;
					this.getLocalJson(clickCode).then(res => {
						self.initEcharts(res.data, params.name, chart)
					}).catch(err => {
						console.log(err,"err")
						this.getLocalJson("440800").then(zhangJiangJson => {
							self.initEcharts(zhangJiangJson.data, params.name, chart)
						})
					})
					console.log(params);
				})
			},
			initChart(){
				let chart = echarts.init(this.$refs.areaRanking1);
				this.getLocalJson("440800").then(zhangJiangJson => {
					this.initEcharts(zhangJiangJson.data, '湛江', chart)
				})
			}
		}
	}
</script>

<style scoped>

</style>

另：若地图需要实现多级下钻，参考这篇