[问题探讨]VUE项目基于Echarts Map实现下探到区级(含json数据获取方式)

需求：Echarts Map实现下探到区级(含json数据获取方式)

一，json资源下载

方式1，github clone项目获取
https://github.com/tom-wong666/echarts-map-json

方式2，访问在线示例获取
http://120.77.182.31:8091/

二，Echarts Map实现下探到区级

1,npm安装Echarts

npm install echarts

2，npm安装axios

npm install axios

3，main.js配置axios

import axios from 'axios'

Vue.prototype.$http = axios.create({
  timeout: 25000
})

4，代码实现

<template>
  <div>
    <div class="map-index">
      <span>[</span>
      <span class="area-item" @click="changeMapIndexCode(-1)">中国</span>
      <template v-for="(item,key) in mapIndex">
        <span :key="item.code+'right'">></span>
        <span :key="item.code" class="area-item" @click="changeMapIndexCode(key)">{
  { item.name }}</span>
      </template>
      <span>]</span>
    </div>
    <div id="chinaMap" :style="{width:'100vw', height:'100vh'}"/>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
require('../../static/china.js')
export default {
  name: 'MapDemo',
  data () {
    return {
      mapIndex: [],
      mapIndexCode: '',
      myChart: {},
      areaMapping: {
        安徽: {
          code: 'anhui',
          children: {
            安庆市: {
              code: 'anqing'
            },
            蚌埠市: {
              code: 'bengbu'
            },
            亳州市: {
              code: 'bozhou'
            },
            池州市: {
              code: 'chizhou'
            },
            滁州市: {
              code: 'chuzhou'
            },
            阜阳市: {
              code: 'fuyang'
            },
            淮北市: {
              code: 'huaibei'
            },
            淮南市: {
              code: 'huainan'
            },
            合肥市: {
              code: 'hefei'
            },
            黄山市: {
              code: 'huanshan'
            },
            六安市: {
              code: 'liuan'
            },
            马鞍山市: {
              code: 'maanshan'
            },
            铜陵市: {
              code: 'tongling'
            },
            芜湖市: {
              code: 'wuhu'
            },
            宿州市: {
              code: 'suzhou'
            },
            宣城市: {
              code: 'xuancheng'
            }
          }
        },
        澳门: {
          code: 'aomen'
        },
        北京: {
          code: 'beijing'
        },
        重庆: {
          code: 'chongqing'
        },
        福建: {
          code: 'fujian',
          children: {
            宁德市: {
              code: 'ningde'
            },
            福州市: {
              code: 'fuzhou'
            },
            龙岩市: {
              code: 'longyan'
            },
            南平市: {
              code: 'nanping'
            },
            莆田市: {
              code: 'putian'
            },
            泉州市: {
              code: 'quanzhou'
            },
            三明市: {
              code: 'sanming'
            },
            厦门市: {
              code: 'shamen'
            },
            漳州市: {
              code: 'zhangzhou'
            }
          }
        },
        甘肃: {
          code: 'gansu',
          children: {
            白银市: {
              code: 'baiyin'
            },
            定西市: {
              code: 'dingxi'
            },
            甘南藏族自治州: {
              code: 'gannan'
            },
            嘉峪关市: {
              code: 'jiayuguan'
            },
            金昌市: {
              code: 'jinchang'
            },
            酒泉市: {
              code: 'jiuquan'
            },
            兰州市: {
              code: 'lanzhou'
            },
            临夏回族自治州: {
              code: 'linxia'
            },
            陇南市: {
              code: 'longnan'
            },
            平凉市: {
              code: 'pingliang'
            },
            庆阳市: {
              code: 'qingyang'
            },
            天水市: {
              code: 'tianshui'
            },
            武威市: {
              code: 'wuwei'
            },
            张掖市: {
              code: 'zhangye'
            }
          }
        },
        广东: {
          code: 'guangdong',
          children: {
            深圳市: {
              code: 'shenzhen'
            },
            东莞市: {
              code: 'dongguan'
            },
            潮州市: {
              code: 'chaozhou'
            },
            东沙群岛: {
              code: 'dongsha'
            },
            佛山市: {
              code: 'foshan'
            },
            广州市: {
              code: 'guangzhou'
            },
            河源市: {
              code: 'heyuan'
            },
            惠州市: {
              code: 'huizhou'
            },
            江门市: {
              code: 'jiangmen'
            },
            揭阳市: {
              code: 'jieyang'
            },
            茂名市: {
              code: 'maoming'
            },
            梅州市: {
              code: 'meizhou'
            },
            清远市: {
              code: 'qingyuan'
            },
            汕头市: {
              code: 'shantou'
            },
            汕尾市: {
              code: 'shanwei'
            },
            韶关市: {
              code: 'shaoguan'
            },
            阳江市: {
              code: 'yangjiang'
            },
            云浮市: {
              code: 'yunfu'
            },
            湛江市: {
              code: 'zhanjiang'
            },
            肇庆市: {
              code: 'zhaoqing'
            },
            中山市: {
              code: 'zhongshan'
            },
            珠海市: {
              code: 'zhuhai'
            }
          }
        },
        广西: {
          code: 'guangxi',
          children: {
            百色市: {
              code: 'baise'
            },
            北海市: {
              code: 'beihai'
            },
            崇左市: {
              code: 'chongzuo'
            },
            防城港市: {
              code: 'fangchenggang'
            },
            贵港市: {
              code: 'guigang'
            },
            桂林市: {
              code: 'guilin'
            },
            河池市: {
              code: 'hechi'
            },
            贺州市: {
              code: 'hezhou'
            },
            来宾市: {
              code: 'laibin'