echarts地图实现多级下钻功能

<!--实现全国地图下钻，由于涉及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>