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)