写一份vue+echats的三级下钻地图

好的，下面是一份简单的vue+echarts的三级下钻地图代码：

首先，我们需要在vue项目中引入echarts：

npm install echarts --save

然后，在.vue文件中引入echarts：

import echarts from 'echarts'

接下来，我们需要准备三个地图文件，分别表示全国、省份和城市的地图。这些地图文件可以在echarts官方网站上下载。

在.vue文件中，我们需要定义一个echarts实例和地图数据，然后根据用户的选择，动态加载不同级别的地图：

<template>
  <div>
    <div ref="mapContainer" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      map: null,
      mapData: null,
      provinceData: null,
      cityData: null,
      level: 0, // 0表示全国地图，1表示省份地图，2表示城市地图
      selectedProvince: '', // 选中的省份
      selectedCity: '' // 选中的城市
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      // 加载全国地图数据
      this.loadMapData('/static/map/china.json').then(data => {
        this.mapData = data
        this.renderMap()
      })
    },

    // 加载地图数据
    loadMapData(url) {
      return new Promise(resolve => {
        this.$http.get(url).then(response => {
          resolve(response.data)
        })
      })
    },

    // 渲染地图
    renderMap() {
      this.map = echarts.init(this.$refs.mapContainer)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            selectedMode: 'single',
            label: {
              show: true,
              color: '#000'
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              }
            },
            data: this.mapData
          }
        ]
      }
      this.map.setOption(option)
      this.addMapEvent()
    },

    // 添加地图事件
    addMapEvent() {
      this.map.on('click', params => {
        if (params.name === '南海诸岛') {
          return
        }
        if (this.level === 0) {
          this.selectedProvince = params.name
          this.loadProvinceMap(params.name)
        } else if (this.level === 1) {
          this.selectedCity = params.name
          this.loadCityMap(this.selectedProvince, params.name)
        }
      })
    },

    // 加载省份地图
    loadProvinceMap(name) {
      let url = `/static/map/province/${name}.json`
      this.loadMapData(url).then(data => {
        this.provinceData = data
        this.renderProvinceMap()
        this.level = 1
      })
    },

    // 渲染省份地图
    renderProvinceMap() {
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            type: 'map',
            map: this.selectedProvince,
            selectedMode: 'single',
            label: {
              show: true,
              color: '#000'
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              }
            },
            data: this.provinceData
          }
        ]
      }
      this.map.setOption(option)
    },

    // 加载城市地图
    loadCityMap(province, name) {
      let url = `/static/map/city/${province}/${name}.json`
      this.loadMapData(url).then(data => {
        this.cityData = data
        this.renderCityMap()
        this.level = 2
      })
    },

    // 渲染城市地图
    renderCityMap() {
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            type: 'map',
            map: this.selectedCity,
            selectedMode: 'single',
            label: {
              show: true,
              color: '#000'
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#ccc'
              }
            },
            data: this.cityData
          }
        ]
      }
      this.map.setOption(option)
    }
  }
}
</script>

在上面的代码中，我们定义了一个地图组件，包含一个地图容器和一些方法。当用户点击地图上的某个区域时，会根据该区域的级别加载不同级别的地图数据，并渲染出相应的地图。

需要注意的是，我们在渲染地图时，需要先初始化echarts实例，并将地图数据传递给echarts实例的setOption方法。同时，为了实现地图的下钻效果，我们需要在地图上添加click事件，并根据用户的选择加载不同级别的地图数据。