Echarts5 + vue3实现中国地图

1. 先下载中国地图JSON数据

下载地址

2. 将下载的json放在本地json文件里（vite + vue将chinaMap.json保存在public目录下）

3. 代码实现

<template>
 <div class="echarts-contain map-echarts">
       <charts :option="chinaMapOption"></charts>
  </div>
</template>
const state = reactive({
  seriesData: [
    { name: '北京市', value: 15477.48 },
    { name: '上海市', value: 31686.1 }
  ],
  chinaMapOption: {}
})
const initChinaMap = async () => {
  const res: any = await axios.get('/chinaMap.json')
  echarts.registerMap('china', res.data)
  state.chinaMapOption = {
    // 标题
    title: {
      text: "中国地图",
      left: 'center',
      top: 20
      // subtext: "下载链接",
      // sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
    },
    // 悬浮窗
    tooltip: {
      trigger: 'item',
      formatter: function (params: { name: string, value: unknown }) {
        return `${params.name}: ${params.value || '-'}`
      }
    },
    // echarts大小位置
    grid: {
      left: '10px',
      right: '10px',
      top: '10px',
      bottom: '10px'
    },
    // 图例
    visualMap: {
      min: 800,
      max: 50000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    // 要显示的散点数据
    series: [
      {
        type: 'map',
        map: 'china',
        // 这是要显示的数据
        data: state.seriesData,
        // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
        // nameMap: {
        //   '北京市': "北京重命名",
        //   "天津市": '天津重命名'
        // },
      }
    ]
  }
}

onMounted(() => {
  initChinaMap()
})

const { chinaMapOption } = toRefs(state)