在数据大屏、数据可视化后台、政务统计系统开发中，地图可视化是高频刚需功能。无论是展示全国数据分布、区域数据统计、省份高亮、悬浮提示，都离不开地图组件。
很多小伙伴开发时都会遇到两个核心难题：
✅ 找不到稳定、最新、完整的地图 GeoJson 数据源
✅ Vue 中引入 ECharts 地图报错、渲染空白、层级错乱、适配异常
今天这篇干货教程，手把手带你从零实现 Vue3 + ECharts 5 地图可视化，提供官方可用的完整 china.json 下载地址，附带可直接复制的完整源码、样式美化、交互优化，新手也能一键跑通！
一、技术栈介绍
本次地图可视化方案采用前端主流技术组合，轻量化、易部署、适配所有Vue项目：
- Vue：主流前端工程化框架，组件化开发，复用性极强
- ECharts 5：百度开源可视化图表库，兼容地图渲染、丰富交互配置
- GeoJson数据源：阿里云最新行政区边界数据，覆盖全国省份、边界完整无缺失
二、核心资源：最新全国地图 GeoJson 地址
网上很多旧版 china.json 存在边界缺失、省份不全、数据过期 等问题，本次给大家提供阿里云 DATAV 官方最新完整版地址，可直接访问、下载、项目远程引入：
✅ 全国完整版 GeoJson 地址
https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
该数据源优势：
- 数据完整：包含全国所有省级行政区边界坐标
- 精度更高：边界平滑无锯齿，适配大屏展示
- 稳定可用：官方CDN地址，长期有效，无需本地缓存
- 适配ECharts：完美匹配地图渲染规则，无适配报错
三、环境搭建与依赖安装
1、安装ECharts
在Vue项目根目录执行安装命令，推荐安装最新稳定版：
csharp
npm install echarts --save
# or
yarn add echarts2、全局/局部引入
日常开发推荐局部引入，减小项目打包体积，性能更优。
3、下载GeoJson数据
打开全国完整版 GeoJson 地址地址，另存为china.json，存放在 /assets/map目录下
四、完整可运行代码（Vue3通用适配）
下面提供开箱即用的完整组件代码，包含：地图初始化、导入加载GeoJson、省份颜色渐变、悬浮tooltip、高亮效果、窗口自适应，直接复制到项目即可运行。
xml
<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}<br/>数值：{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
导入本地静态json文件静态资源。
2、基础交互能力
- 拖拽+缩放：开启 roam: true，支持鼠标滚轮缩放、拖拽平移
- 悬浮高亮：鼠标悬浮省份自动高亮，文字变色
- Tooltip提示：悬浮展示省份名称+对应统计数据
- 颜色渐变：通过 visualMap 实现数据大小对应深浅配色，数据可视化效果直观
3、自适应适配
监听浏览器窗口 resize 事件，窗口大小变化时自动重绘地图，适配PC端、大屏展示场景，不会出现变形、留白问题。
4、内存优化
组件销毁时移除监听事件、销毁ECharts实例，有效避免页面切换造成的内存泄漏问题，适配后台系统多页面切换场景。
六、常见踩坑问题解决方案
问题1：地图渲染空白、不显示
✅ 原因：GeoJson数据过期、注册名称不匹配、容器宽高未设置
✅ 解决：使用本文提供的最新阿里云地址，确保容器设置明确宽高，不可为0
问题2：省份边界缺失、图形错乱
✅ 原因：使用精简版、老旧GeoJson数据
✅ 解决：替换为 100000_full.json 完整版数据，边界完整无缺失
问题3：窗口缩放地图变形
✅ 解决：必须绑定 resize 事件，实时调用 resize() 方法重绘
问题4：控制台报错 registerMap 失败
✅ 解决：确保先加载完GeoJson数据，再执行 registerMap 和 setOption，采用async/await异步执行保证顺序
七、拓展进阶玩法
基于当前基础地图，可快速拓展企业级可视化需求：
- 省份下钻联动：点击省份切换对应市级地图
- 动态轮播高亮：自动轮播高亮各个省份数据
- 标记点位：添加城市坐标点位、气泡标注
- 飞线动画：实现全国数据流向、物流迁徙可视化
- 自定义配色：适配暗黑大屏、浅色后台等不同UI风格
八、写在最后
Vue3 + ECharts 地图可视化是前端数据大屏的必备技能，而一份稳定完整的 GeoJson 数据源是开发的关键。
本文提供的阿里云官方完整版地图数据，完美解决了大部分开发者地图渲染异常、数据缺失的问题，搭配开箱即用的完整代码，无需繁琐配置，快速实现高质量全国地图可视化效果。
码字不易，欢迎点赞、转发、收藏！