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(实现单次下钻功能)