vue2+echarts全国三级下钻代码

好的，以下是一个简单的 Vue.js 2 和 ECharts 实现的全国三级下钻地图的代码示例：

<template>
  <div id="map-container" style="height: 100%;"></div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/map/js/china';

export default {
  name: 'MapComponent',
  data() {
    return {
      mapChart: null,
      geoJson: null,
      provinceJson: null,
      cityJson: null,
      selectedProvince: '',
      selectedCity: ''
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.mapChart = echarts.init(document.getElementById('map-container'));

      // 加载地图数据
      echarts.registerMap('china', this.geoJson, {
        // 下钻到省级地图
        '河北': this.provinceJson,
        '山西': this.provinceJson,
        '内蒙古': this.provinceJson,
        // 下钻到市级地图
        '石家庄市': this.cityJson,
        '唐山市': this.cityJson,
        '秦皇岛市': this.cityJson
      });

      // 绘制地图
      this.mapChart.setOption({
        series: [{
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            areaColor: '#ccc'
          },
          emphasis: {
            itemStyle: {
              borderWidth: 2,
              areaColor: '#eee'
            }
          },
          data: [{
            name: '河北',
            selected: true
          }, {
            name: '山西',
            selected: false
          }, {
            name: '内蒙古',
            selected: false
          }]
        }]
      });

      // 监听地图点击事件
      this.mapChart.on('click', params => {
        if (params.seriesType === 'map') {
          if (!this.selectedProvince) {
            // 下钻到省级地图
            this.selectedProvince = params.name;
            this.mapChart.setOption({
              series: [{
                type: 'map',
                map: params.name,
                label: {
                  show: true
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1,
                  areaColor: '#ccc'
                },
                emphasis: {
                  itemStyle: {
                    borderWidth: 2,
                    areaColor: '#eee'
                  }
                },
                data: [{
                  name: params.name,
                  selected: true
                }]
              }]
            });
          } else if (!this.selectedCity) {
            // 下钻到市级地图
            this.selectedCity = params.name;
            this.mapChart.setOption({
              series: [{
                type: 'map',
                map: params.name,
                label: {
                  show: true
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1,
                  areaColor: '#ccc'
                },
                emphasis: {
                  itemStyle: {
                    borderWidth: 2,
                    areaColor: '#eee'
                  }
                },
                data: [{
                  name: params.name,
                  selected: true
                }]
              }]
            });
          }
        }
      });
    }
  }
};
</script>

在这个示例中，我们使用了 ECharts 的 `map` 类型系列来绘制地图，通过 `echarts.registerMap` 方法加载地图数据，并通过监听地图的点击事件来下钻到省级或市级地图。在这里，我提供的只是一个简单的示例，您可以根据需要进行修改和扩展。