ECharts地图下钻

什么是地图下钻

是一种交互式的数据可视化技术，允许用户从较高层级的地理区域（如国家或省级）逐步深入到更精细的层级（如市、区或者县等），以便查看更详细的数据。用户可以点击某个省份，下钻到市级地图，再进一步下钻到区县级地图。

如何实现地图下钻

准备dom元素

<template>
  <n-button @click="back()" v-if="backBtn">返回上一级</n-button>
  <div id="map-dom" class="map-box"></div>
</template>

准备地图数据

可以通过一个小工具获取  datav.aliyun.com/portal/scho…

复制url，通过请求获取地图所需的数据

先获取地图数据，再初始化echarts图表

设置函数默认参数，后续通过点击地图传过来的值来获取下钻目标所需的数据。

onMounted(() => {
  getMapJson()
})
//获取地图数据
const getMapJson = async (adcode = '100000', _level_ = '') => {
  // district是最后一级
  if (_level_ == 'district') return
  // adcode为 100000 表示中国, 最高层级 所以 backBtn 为 false
  adcode == '100000' ? (backBtn.value = false) : (backBtn.value = true)
  let url = `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`
  let res = await fetch(url)
  let json
  let data
  if (res.ok) {
    json = await res.json()
    data = json.features.map((item) => ({
      name: item.properties.name, 
      adcode: item.properties.adcode,
      parent: item.properties.parent,
      level: item.properties.level,
      _level_: item.properties.level,
    }))
    //获取到 地图数据再初始化echarts
    initCharts(data, json)
  }
}

初始化图表

初始化的时候接收了两个参数，data是给series提供数据，监听echarts点击事件的时候会用到，json是注册地图使用的。

当点击事件触发时会掉接口获取下一级地图所需数据，获取到数据之后再初始化echarts图表，方可显示下一级的地图；

点击的同时要把参数逐级存在数组当中，返回上一级的时候使用

//初始化echarts
const initCharts = async (data, json) => {
  //获取地图数据
  let myChart
  //获取dom
  let dom = document.getElementById('map-dom')
  myChart = echarts.getInstanceByDom(dom) // 获取已有的图表实例
  // 如果有实例，先销毁
  if (myChart) {
    myChart.dispose()
  }
  myChart = echarts.init(dom)
  // 注册地图
  echarts.registerMap('china', json)
  const option = {
    silent: false,
    geo: {
      type: 'map',
      map: 'china',
      roam: true, //允许缩放
      layoutCenter: ['50%', '50%'], // 让地图居中
      layoutSize: '100%', // 调整地图大小（可用 100% 或具体像素值）
      label: {
        show: true,
      },
    },
    series: [
      {
        type: 'map',
        map: 'china', // 地图名称
        geoIndex: 0,
        roam: true,
        data: data, // 地图数据
        label: {
          show: true,
        },
      },
    ],
  }
  myChart.setOption(option, true)
  // 点击地图事件
  myChart.on('click', function (params) {
    if (params.data) {
      const {
        adcode,
        name,
        level,
        parent: { adcode: parentAdcode },
      } = params.data
      if (level != 'district') {
        parentCode.value.push({ parentAdcode, level })
      }
      getMapJson(adcode as string, level as string)
    }
  })
}

 返回上一级

获取上一级的参数

获取到之后删除掉，不然下次还是获取到的还是一样的数据

// 返回上一级
let backBtn = ref(false)
let parentCode = ref([])
const back = () => {
//获取上一级的参数
  let { parentAdcode, level } = parentCode.value.slice(-1)[0]
//获取到之后删除掉，不然下次还是获取到的还是一样的数据
  parentCode.value = parentCode.value.slice(0, -1)
  getMapJson(parentAdcode, level)
}