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

echarts地图实现单次下钻功能

由于涉及的JSON文件不多，所以结合axios，按需动态请求本地JSON文件

效果图：

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

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

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

1、该页面涉及到的关键函数有三个：getGeoJson()、initChart()、initEcharts()
2、该页面结合了axios动态请求json文件数据
3、封装了axios请求，这里是动态请求本地json,故而url是本地路径，Vue3.x以上静态资源一般存在public中，我这里是在public下新建js文件夹，将所有json文件放于其中，路径不用加上public（如目标文件名称是440800.json，url就是“/js/440800.json”），如图所示：


4、api路径代理设置（这一步也可以不用写，看自己所需）
默认路径相对路径都是写为’/api/xxx’，旧版本下会在vue.config.js下配置proxy属性，但Vue新版本这个js文件已经不在目录下了，需要我们手动新建一个JS文件，内容如下

直接上代码

<!--实现湛江市的简单下钻，只有一层下钻，采用结合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>

另：若地图需要实现多级下钻，参考这篇Vue使用echarts地图进阶2（实现多级下钻功能）