简介：本资源面向数据可视化开发者、前端学习者及需要地图组件的毕设与课程设计人群，提供 ECharts 世界地图、中国地图及各省市地图的 JSON 数据文件，解决地图图表开发中边界数据缺失、区域划分不全的问题。压缩包共 460 个文件，以 409 个 json 地图数据为核心，辅以 39 个 js 脚本、9 个 html 示例页面及少量说明文档，整体约 9.93MB，涵盖世界、中国、广东、广州等多层级地图，可直接引入 ECharts 实现区域着色、数据下钻与交互展示。目前已有 420 人学习下载，适合作为地图可视化项目的现成素材库，帮助读者省去手动整理地理边界数据的时间，快速搭建从全球到省市的多级地图看板，也可用于教学演示与工程实训中的地图模块开发。
1. 从一份“地图包”说起：echarts 省市地图 json 文件到底怎么落地
做数据大屏或者课程设计时，最让人抓狂的往往不是图表配置，而是地图底图找不到。尤其是 echarts 在 5.x 之后官方不再内置地图 JSON，很多新手照着老教程敲echarts/map/js/china.js直接报错，项目卡在第一步。我手里这份资源就是一个典型的“地图 JSON 合集包”，里面既有world.html、china.html这类直接可跑的示例页，也有chinaJs.html、guangDongJs.html、guangZhou.html这种按省市拆分的版本，配套的.json文件覆盖了世界、中国以及广东、广州等省市级别。它解决的核心问题很具体：让你不用满网找底图，拿到就能在 echarts 里注册地图并渲染。适合正在做毕设、课程大作业、数据可视化面板的开发者，也适合想快速验证某个省份数据分布的进阶学习者。下面我按“文件怎么用 → 参数怎么调 → 坑在哪”的顺序拆一遍。
2. 地图 JSON 的加载机制与三种注册方式
2.1 为什么不能直接import一个 json 就完事
echarts 渲染地图分两步：先注册地图数据，再在series里通过map: '地图名'引用。注册的本质是把一份符合 GeoJSON 规范的地理边界数据塞进 echarts 内部注册表。很多人以为把.json文件丢到项目里，import china from './china.json'就能用，结果控制台报Map china not exists。原因在于 echarts 只认echarts.registerMap('china', geoJson)这一步，import 进来的对象只是普通数据，没有触发注册。
这份资源里的china.html和chinaJs.html其实代表了两种典型做法。chinaJs.html对应的是老版本 echarts 的china.js写法，那个文件内部执行了echarts.registerMap('china', ...)，所以引入后直接可用；而纯.json文件必须自己调注册接口。理解这个区别，后面选文件就不会懵。
2.2 三种注册方式与对应文件选择
第一种，直接引入已注册的 JS 文件。资源里的guangDongJs.html、chinaJs.html属于这类，适合快速跑通 demo，缺点是地图名固定、不方便按需裁剪。
第二种，手动注册 JSON。这是目前最推荐的方式，代码如下：
// 假设页面已引入 echarts.min.js import * as echarts from 'echarts'; import chinaJson from './json/china.json'; // 路径按实际调整 // 注册地图，第一个参数是自定义地图名，后续 series.map 要用同一个名字 echarts.registerMap('china', chinaJson); const chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china', // 必须与 registerMap 的第一个参数一致 roam: true, // 允许缩放和拖拽 label: { show: true } // 显示省份名称 }] });逻辑说明：registerMap的第二个参数必须是标准 GeoJSON，包含type: 'FeatureCollection'和features数组。参数上，map名字随意但必须前后一致；roam控制交互，做全国大屏时建议开，做固定展示可关掉省性能。
第三种，异步加载 JSON 再注册。适合 JSON 体积大、想按需加载的场景：
fetch('./json/guangDong.json') .then(res => res.json()) .then(geoJson => { echarts.registerMap('guangDong', geoJson); chart.setOption({ series: [{ type: 'map', map: 'guangDong' }] }); });注意：异步注册必须在setOption之前完成，否则同样报地图不存在。我一般会把注册封装成一个 Promise，避免时序翻车。
2.3 世界地图与省市地图的命名差异
资源里world.html和worldJs.html对应世界地图。世界地图的 GeoJSON 里name字段是英文国家名，而中国省市地图的name是中文省名或市名。这意味着你的数据里name必须和 GeoJSON 里的写法完全一致，否则地图上不会着色。常见做法是先用console.log(geoJson.features.map(f => f.properties.name))把名字打出来，再对照自己的数据改。这一步看着笨，但能省掉大量“数据明明有、地图就是不上色”的排查时间。
3. 把数据绑到地图上：series 配置与视觉映射
3.1 从一份示例数据到地图着色
地图注册好只是有了底图，真正让地图“说话”的是series.data。以广东省为例，假设你有一组各市销售额：
const data = [ { name: '广州市', value: 320 }, { name: '深圳市', value: 410 }, { name: '佛山市', value: 180 } ]; chart.setOption({ visualMap: { min: 0, max: 500, left: 20, bottom: 20, text: ['高', '低'], calculable: true, // 显示拖拽手柄 inRange: { color: ['#e0f3f8', '#4575b4'] } }, series: [{ type: 'map', map: 'guangDong', data: data }] });逻辑说明：visualMap负责把数值映射成颜色，min/max决定色带范围，inRange.color是渐变色数组。参数上，calculable: true会多出一个可拖拽的筛选条，做交互大屏时很实用；如果只是静态展示，设成false更干净。series.data里的name必须和 GeoJSON 的properties.name完全匹配，多一个字少一个字都不行。
3.2 省市下钻的两种实现思路
资源里同时有china.html和guangDong.html、guangZhou.html，这其实暗示了下钻场景。常见做法有两种：一是点击省份后重新registerMap并替换series.map，二是用多个图表实例切换显示。第一种更省资源，核心代码：
chart.on('click', params => { if (params.name === '广东省') { fetch('./json/guangDong.json') .then(res => res.json()) .then(geo => { echarts.registerMap('guangDong', geo); chart.setOption({ series: [{ type: 'map', map: 'guangDong' }] }); }); } });注意：下钻后原来的visualMap范围可能不再适用，需要根据新数据重新设min/max，否则颜色会失真。我一般会在下钻回调里同步更新visualMap，避免出现“全省一个色”的尴尬。
3.3 地图与散点、飞线的组合
纯地图着色有时不够，做物流或分布图时常要叠加散点。echarts 支持在geo组件上叠加scatter或lines：
option = { geo: { map: 'china', roam: true, itemStyle: { areaColor: '#f3f3f3' } }, series: [ { type: 'scatter', coordinateSystem: 'geo', // 关键：指定坐标系为 geo data: [{ name: '北京', value: [116.4, 39.9, 100] }] } ] };参数说明：coordinateSystem: 'geo'是散点能落到地图上的前提；value数组前两位是经纬度，第三位是数值。如果散点不显示，先检查经纬度顺序是不是写反了，这是血泪经验里排第一的翻车点。
4. 避坑与排查：地图不显示、名字对不上、版本冲突
4.1 现象：控制台报Map xxx not exists
原因：没有调用registerMap，或者注册的名字和series.map不一致。解决：在setOption之前打印echarts.getMap('你的地图名')，返回undefined就说明没注册成功。另外注意 echarts 5 不再自带地图数据，老教程里的china.js直接引入法在新版本会失效。
4.2 现象：地图出来了，但数据不上色
原因：series.data里的name和 GeoJSON 里的properties.name不匹配。解决：把 GeoJSON 的features遍历一遍，打印所有name，再对照数据源改。常见差异包括“省”字有无、简称与全称混用，比如“广东”和“广东省”。
4.3 现象：地图变形或位置偏移
原因：GeoJSON 坐标系不是 WGS84，或者投影方式与 echarts 默认不一致。解决：优先使用资源里已验证的 JSON 文件，不要随意混用不同来源的边界数据。如果必须换，用echarts.registerMap前先确认features里的坐标是经纬度且范围合理。
4.4 现象：下钻后返回上一级，地图空白
原因：下钻时覆盖了series.map，返回时没有重新注册上级地图。解决：把每一级的 GeoJSON 缓存起来，返回时重新registerMap并setOption。我一般会用一个对象存{ name: geoJson }，避免重复请求。
4.5 现象：页面卡顿，拖拽缩放不流畅
原因：全国地图 GeoJSON 体积大，加上label.show: true和roam: true同时开启，渲染压力翻倍。解决：做全国视图时关掉label，只在emphasis里显示；或者用geo组件替代series.map，前者在复杂交互下性能更好。
5. 进阶技巧：用geoJSON裁剪与自定义区域
5.1 只保留需要的省份
全国地图 JSON 往往几百 KB，如果项目只涉及几个省，可以裁剪。思路是过滤features：
const raw = require('./json/china.json'); const keep = ['广东省', '广西壮族自治区', '海南省']; const clipped = { type: 'FeatureCollection', features: raw.features.filter(f => keep.includes(f.properties.name)) }; echarts.registerMap('southChina', clipped);逻辑说明：filter按properties.name保留目标区域，注册成新地图名后使用。参数上，keep数组里的名字必须和原始 JSON 完全一致。这样能把体积降下来，加载更快。
5.2 用geo组件做多图联动
当页面同时有地图和柱状图时，用geo作为公共坐标系，通过dispatchAction联动：
chart.on('click', params => { chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: params.name }); });注意：geoIndex对应geo组件在 option 里的索引，多个 geo 时要数清楚。这个技巧在做“点击省份、右侧图表刷新”的看板时特别顺手。
5.3 验证地图数据是否完整
拿到一份陌生 JSON，我习惯先跑一段校验：
const geo = require('./json/china.json'); console.log('类型:', geo.type); console.log('区域数:', geo.features.length); console.log('前五个名字:', geo.features.slice(0, 5).map(f => f.properties.name));如果type不是FeatureCollection，或者features为空，这份文件基本不能用。区域数也能帮你判断是否被裁剪过。从那以后我每次引入新的地图 JSON，都强制走一遍这个校验，确认名字列表和我的数据源能对上，再往下写业务代码。希望帮到你。
本文还有配套的精品资源，点击获取
