vue3使用Echarts地图

参考已有的文献：

Echarts 绘制地图（中国、省市、区县），保姆级教程！_echarts地图-CSDN博客

博主前置的简单配置：

vue3安装Echarts与部分配置-CSDN博客

一、下载地图数据

先下载地图，博主使用的地图数据地址：

DataV.GeoAtlas地理小工具系列

选好自己需要的地图模块，然后复制链接，新开页签保存，或者直接点击下载。

其他模式可自行探索了解，博主本人没用过☹。

二、具体使用

这边是直接调用的本地的地图数据，如果是调用在线数据就得用别的方式了，不过Echarts的使用是差不多的：（博主自己学到的方法，可能不是最优方式）

<template>
  <!-- <dv-border-box-13 class="map-echarts" style="width: 800px; height: 600px;"> -->
  <div ref="shengZhengRef" id="ShengZheng" style="height: 100%; width: 100%"></div>
  <!-- </dv-border-box-13> -->
</template>

<script lang="ts" setup>
  import { onMounted, inject, ref } from 'vue'
  // 前置配置
  import type { ECharts } from '@/types/echarts'
  // 调用的已下载的本地数据
  import ShengZheng from '@/assets/json/深圳市.json'
  // 引入绘制地图所需的数据类型
  import type { GeoJSONSourceInput } from 'echarts/types/src/coord/geo/geoTypes.d.ts'

  const shengZhengRef = ref()
  const myMaps = ref()
  const echarts = inject<ECharts>('$echarts')

  onMounted(() => {
    if (!echarts || !shengZhengRef.value) return

    const dom = document.getElementById('ShengZheng')
    myMaps.value = echarts.init(dom, 'dark')
    // 显示加载动画
    myMaps.value.showLoading()
    console.log(ShengZheng)
    // 注册地图
    echarts.registerMap('ShengZHeng', ShengZheng as GeoJSONSourceInput)
    const option = {
      // 标题
      title: {
        text: '深圳社畜数量',
        subtext: 'Data from 2025',
        sublink: 'https://www.www.com',
        textStyle: {
          color: 'red',
          fontSize: 20,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: 16,
        },
      },
      // 提示框
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (人)',
      },
      // 工具栏
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: {
            readOnly: false,
          },
          restore: {},
          saveAsImage: {},
        },
      },
      // 视觉地图 颜色
      visualMap: {
        min: 100,
        max: 5000,
        text: ['高', '低'],
        realtime: false,
        calculable: false,
        inRange: {
          color: ['white', 'lightskyblue', 'yellow', 'red'],
        },
      },
      // 图表数据
      series: [
        {
          name: '深圳',
          type: 'map',
          map: 'ShengZHeng',
          label: {
            show: true,
          },
          data: [
            {
              name: '罗湖区',
              value: 100,
            },
            {
              name: '福田区',
              value: 2000,
            },
            {
              name: '不会收到货',
              value: 4000,
            },
            {
              name: '会收到货',
              value: 400,
            },
            {
              name: '龙岗区',
              value: 2000,
            },
            {
              name: '盐田区',
              value: 1200,
            },
            {
              name: '龙华区',
              value: 5000,
            },
            {
              name: '坪山区',
              value: 400,
            },
            {
              name: '光明区',
              value: 3000,
            },
          ],
        },
      ],
      // 自定义区域名称，地图数据南山区映射为 '不会收到货'
      nameMap: {
        宝安区: '会收到货',
        南山区: '不会收到货',
      },
    }
    myMaps.value.hideLoading()
    myMaps.value.setOption(option)
  })
</script>

<style scoped>
  .map-echarts:deep() .border-box-content #ShengZheng {
    margin: 30px auto;
  }
</style>

最终展示效果：

三

下次更新Echarts更新数据相关的内容，这个感觉还是有点麻烦的，如果想用好的话。

学的想睡觉😪，博主是菜狗，有啥建议欢迎提出讨论。