<!--實現全國地圖下鑽，由於涉及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>