Vue3 + ECharts 快速实现地图可视化（附最新GeoJson地址）

地图可视化在数据大屏、后台管理系统和政务统计项目中，几乎是绕不开的标配功能。无论是展示全国数据分布、区域统计、省份高亮，还是悬浮提示，都离不开地图组件。

但许多开发者在实际开发中，常被两个核心问题卡住：

• 找不到稳定、最新、完整的地图 GeoJson 数据源；
• 在 Vue 中集成 ECharts 地图时，报错、空白、层级错乱、适配异常等问题接连出现。

本教程提供一套从零到一的 Vue3 + ECharts 5 地图可视化方案，包含官方可用的完整 china.json 下载地址、可直接复制的完整代码、样式美化与交互优化，新手也能一键跑通。

---

一、技术栈介绍

本方案采用当前前端主流技术组合，轻量化、易部署，可平滑接入所有 Vue 项目：

• Vue：主流前端框架，组件化开发，复用性强
• ECharts 5：百度开源的图表库，地图渲染和交互配置丰富
• GeoJson 数据源：来自阿里云最新行政区边界数据，覆盖全国所有省份，边界完整无缺失

---

二、核心资源：最新全国地图 GeoJson 地址

网上能找的旧版 china.json，很多存在边界缺失、省份不全、数据过期的问题。这里直接给出阿里云 DATA V 官方最新完整版地址，可直接访问、下载，也可在项目中远程引入：

全国完整版 GeoJson 地址

（注：实际项目中可使用阿里云 DATA V 提供的 GeoJSON API，地址请自行搜索获取最新链接）

该数据源的优势明显：

• 数据完整：包含全国所有省级行政区边界坐标
• 精度更高：边界平滑无锯齿，适合大屏展示
• 稳定可用：官方 CDN 地址，长期有效，无需本地缓存
• 适配 ECharts：完美匹配地图渲染规则，不会出现兼容性报错

---

三、环境搭建与依赖安装

1、安装 ECharts

在 Vue 项目根目录执行安装命令，推荐安装最新的稳定版：

npm install echarts --sa ve
# or
yarn add echarts

2、全局/局部引入

日常开发中，更推荐采用局部引入方式，能减小项目打包体积，性能更优。

3、下载 GeoJson 数据

打开上面的全国完整版 GeoJson 地址，将内容另存为 china.json，然后存放在 /assets/map 目录下备用。

---

四、完整可运行代码（Vue3 通用适配）

下面是一份开箱即用的完整组件代码，包含地图初始化、导入加载 GeoJson、省份颜色渐变、悬浮 tooltip、高亮效果、窗口自适应等功能。直接复制到项目中就能运行。

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
// 引入地图数据
import china from '@/assets/map/china.json'

const mapRef = ref(null)
let myChart = null

// 模拟各省数据
const mapData = [
  { name: '北京市', value: 820 },
  { name: '上海市', value: 750 },
  { name: '广东省', value: 980 },
  { name: '浙江省', value: 680 },
  { name: '江苏省', value: 720 },
  { name: '四川省', value: 540 },
  { name: '山东省', value: 610 },
  { name: '河南省', value: 490 },
  { name: '湖北省', value: 520 },
]

onMounted(() => {
  // 注册地图
  echarts.registerMap('china', china)

  myChart = echarts.init(mapRef.value)

  /** @type {import('echarts').EChartsOption} */
  const option = {
    title: { text: '全国数据分布图', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}
数值：{c}' },
    visualMap: {
      min: 0,
      max: 1000,
      left: 20,
      bottom: 20,
      text: ['高', '低'],
      calculable: true,
    },
    series: [
      {
        name: '统计数据',
        type: 'map',
        map: 'china', // 和 registerMap 对应
        roam: true, // 可拖拽缩放
        label: { show: true, fontSize: 10 },
        layoutSize: '95%',
        zoom: 1.1,
        data: mapData,
      },
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => myChart.resize())
})

onUnmounted(() => {
  window.removeEventListener('resize', () => myChart.resize())
  myChart.dispose()
})
script>

<template>
  <div ref="mapRef" style="width: 100%; height: 800px">div>
template>

---

五、核心功能说明

1、导入 GeoJson

通过静态资源导入方式，将本地 china.json 文件引入组件，再调用 echarts.registerMap 完成注册。

2、基础交互能力

• 拖拽+缩放：开启 roam: true 后，支持鼠标滚轮缩放和拖拽平移。
• 悬浮高亮：鼠标悬浮到某个省份上，该省份自动高亮，文字颜色变化。
• Tooltip 提示：悬浮时显示省份名称和对应统计数据。
• 颜色渐变：通过 visualMap 实现数据大小与颜色深浅的映射，数据可视化效果一目了然。

3、自适应适配

代码中监听了浏览器窗口的 resize 事件，窗口大小变化时自动调用 resize() 方法重绘地图。无论在 PC 端还是大屏展示场景，都不会出现变形或留白问题。

4、内存优化

组件销毁时，会移除 resize 事件监听并销毁 ECharts 实例。这可有效避免页面切换时产生的内存泄漏，特别适用于后台系统多页面切换场景。

---

六、常见踩坑问题解决方案

问题1：地图渲染空白、不显示

可能原因：GeoJson 数据过期、注册名称不匹配、容器宽高未设置。
解决方法：使用本文提供的阿里云最新地址，并确保容器设置了明确宽高（不能为0）。

问题2：省份边界缺失、图形错乱

可能原因：使用了精简版或老旧 GeoJson 数据。
解决方法：替换为 100000_full.json 完整版数据，边界完整无缺失。

问题3：窗口缩放地图变形

解决方法：必须绑定 resize 事件，实时调用 resize() 方法重绘。

问题4：控制台报错 registerMap 失败

解决方法：确保 GeoJson 数据先加载完成，再调用 registerMap 和 setOption。推荐使用 async/await 异步处理来保证执行顺序。

---

七、拓展进阶玩法

基于当前基础地图组件，可快速拓展出多种企业级可视化需求：

• 省份下钻联动：点击某个省份，切换到对应的市级地图。
• 动态轮播高亮：自动轮播高亮各个省份的数据。
• 标记点位：添加城市坐标点位、气泡标注。
• 飞线动画：实现全国数据流向、物流迁徙的可视化效果。
• 自定义配色：适配暗黑大屏、浅色后台等不同 UI 风格。

---

八、写在最后

Vue3 + ECharts 地图可视化，是前端数据大屏开发中的一项必备技能。而一份稳定、完整的 GeoJson 数据源，往往是决定开发顺利与否的关键。

本文提供的阿里云官方完整版地图数据，能从根本上解决大部分开发者常见的地图渲染异常、数据缺失问题。加上开箱即用的完整代码，无需繁琐配置，即可快速实现高质量的全域地图可视化效果。