简介本资源面向数据可视化开发者、前端学习者及需要地图组件的毕设与课程设计人群提供 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或linesoption { 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如果项目只涉及几个省可以裁剪。思路是过滤featuresconst 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都强制走一遍这个校验确认名字列表和我的数据源能对上再往下写业务代码。希望帮到你。本文还有配套的精品资源点击获取