vue2和echarts结合的全国三级下钻代码

以下是一个简单的 Vue2 和 Echarts 结合的全国三级下钻代码示例：

<template>
  <div>
    <div ref="chart" style="height: 500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chartData: null,
      chartInstance: null
    }
  },
  mounted() {
    this.loadChartData()
  },
  methods: {
    loadChartData() {
      // 加载数据
      const url = '/api/chart-data'
      axios.get(url).then(response => {
        if (response.data) {
          this.chartData = response.data
          this.renderChart()
        }
      })
    },
    renderChart() {
      // 绘制图表
      this.chartInstance = echarts.init(this.$refs.chart)
      this.chartInstance.setOption({
        title: {
          text: '全国三级下钻'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode: 'single',
            label: {
              show: true
            },
            data: this.chartData
          }
        ]
      })
      this.chartInstance.on('click', params => {
        // 点击事件，获取下一级数据并更新图表
        const name = params.name
        const url = '/api/chart-data?name=' + name
        axios.get(url).then(response => {
          if (response.data) {
            this.chartData = response.data
            this.chartInstance.setOption({
              series: [
                {
                  name: name,
                  type: 'map',
                  mapType: name,
                  label: {
                    show: true
                  },
                  data: this.chartData
                }
              ]
            })
          }
        })
      })
    }
  }
}
</script>

该示例假设已经有一个 API 接口 `/api/chart-data`，可以返回一个类似以下格式的数据：

{
  "北京": 100,
  "上海": 200,
  "广东": 300,
  // ...
}

点击某个省份时，会重新请求 `/api/chart-data` 接口，并传递省份名称作为参数，以获取该省份下一级的数据。数据格式可以相同，只需要将 `mapType` 属性设置为省份名称即可。

这只是一个简单的示例，实际应用中需要根据具体业务进行修改和优化。