简介这份资源是面向前端开发与数据可视化学习者的中国地图数据包聚焦 ECharts 地理图表与 H5 应用场景解决地图底图数据获取与渲染配置的问题。压缩包共 76 个文件以 38 个 json 与 37 个 js 为主另有 1 个 txt 说明整体约 2.71MBjson 文件承载中国及各省份、城市、世界范围的地理坐标与边界结构js 文件则对应地图初始化、轮廓绘制与交互逻辑代码可直接引入项目使用。目前已有 1834 人学习下载。借助这些数据开发者能快速实现省份颜色填充、区域高亮、悬浮提示等效果并在此基础上叠加经济指标、人口数据等业务信息构建响应式动态地图适用于数据分析报告、新闻展示与教学演示等场景对提升 ECharts 地图开发与地理信息可视化能力有实际参考价值。1. 拿到「最新中国地图jsjson数据文件.zip」先别急着解压它到底解决什么问题做 ECharts 中国地图可视化的人几乎都经历过同一个卡点代码写完了echarts.registerMap(china, geoJson)一跑控制台报Map china not exists或者地图出来了但南海诸岛、港澳台边界缺一块。问题不在 ECharts而在你手上没有一份完整、合规、能直接喂给registerMap的地理边界数据。这个 zip 包要解决的就是「地图底图数据从哪来、怎么用、怎么和 ECharts 对接」这件事。它本质是一份中国省级行政区域的 GeoJSON 边界数据外加一份可直接script引入的 JS 版本。GeoJSON 是 JSON 格式的地理数据用FeatureCollection描述每个省的Polygon或MultiPolygon坐标JS 版本则是把同样的数据包成window.chinaMapData {...}或echarts.registerMap的调用形式省去你手动 fetch 的步骤。适合三类人做数据大屏的前端、用 ECharts 做区域分布图的运营分析、以及需要离线部署内网、无外网 CDN的场景。下面从数据长什么样讲到怎么跑通、参数怎么调、坑在哪。2. 拆开这个包GeoJSON 与 JS 两种格式的取舍和字段含义2.1 GeoJSON 的 FeatureCollection 结构长什么样一份标准的中国地图 GeoJSON顶层是FeatureCollectionfeatures数组里每个元素是一个省。关键字段只有四个type、properties、geometry、以及properties里的name。name是 ECharts 做数据映射时的匹配键写错一个字那个省就渲染不出颜色。{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 广东省, adcode: 440000, center: [113.280637, 23.125178], level: province }, geometry: { type: MultiPolygon, coordinates: [ [ [[113.1, 23.3], [113.2, 23.4], [113.15, 23.25]] ] ] } } ] }properties.name是 EChartsseries.data里name字段的匹配依据必须和你的业务数据完全一致。adcode是行政区划代码做下钻联动时用它比用中文名稳。center是省份中心点经纬度打点、标线、飞线动画全靠它。geometry.type通常是MultiPolygon因为一个省可能有岛屿坐标是[经度, 纬度]顺序别写反。2.2 JS 版本为什么更适合直接引入JS 版本把 JSON 包成了变量或注册调用好处是省掉一次异步请求页面加载即用。常见两种写法一种是纯数据变量// china-map.js —— 挂到全局供后续 registerMap 使用 window.chinaMapData { type: FeatureCollection, features: [ /* 同 GeoJSON 结构 */ ] };另一种是直接注册引入即生效// 依赖已加载的 echarts 全局对象 echarts.registerMap(china, { /* FeatureCollection */ });第一种更灵活你可以在注册前对数据做裁剪比如只保留华东几省第二种省事但要求echarts必须先加载。选哪个取决于你是否需要动态改数据。内网大屏我一般用第一种把数据文件和业务代码解耦。2.3 两种格式的对比与选型维度GeoJSON (.json)JS 版本 (.js)加载方式fetch / import异步script同步引入可读性纯数据工具友好带变量包装需去壳离线部署需处理跨域直接可用动态裁剪加载后随意改需先拿到变量再改体积略小多几行包装选型结论做静态大屏、内网部署用 JS 版本最省心做需要按权限裁剪区域、或数据来自后端的用 GeoJSON 走 fetch。别两个都引重复注册同名 map 会覆盖排查起来很费时间。3. 用 ECharts 把这份地图数据跑起来的最小可复现路径3.1 引入顺序与 registerMap 的正确姿势ECharts 地图渲染分两步先注册地图数据再在 option 里用geo或series-map引用。注册必须在setOption之前完成否则报Map china not exists。下面是最小可跑通页面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title中国地图最小示例/title !-- 1. 先加载 echarts -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script !-- 2. 再加载地图数据JS 版本内部调用 registerMap -- script src./china-map.js/script /head body div idmap stylewidth: 900px; height: 600px;/div script // 3. 数据注册完成后才能初始化并 setOption const chart echarts.init(document.getElementById(map)); chart.setOption({ series: [{ type: map, map: china, // 必须和 registerMap 的第一个参数一致 roam: true, // 允许缩放拖动 label: { show: false }, itemStyle: { areaColor: #e8f0fe, borderColor: #8ab4f8 }, emphasis: { itemStyle: { areaColor: #fdd663 } } }] }); /script /body /html逻辑说明echarts.init只负责创建画布真正决定画哪张地图的是series.map的值它去 ECharts 内部的 map 注册表里查。registerMap(china, data)就是往这张表里塞数据。参数上roam: true开启鼠标缩放平移大屏常用label.show控制省名显示数据密集时关掉更干净emphasis是 hover 高亮样式不配的话默认是灰色视觉上很突兀。3.2 把业务数据映射到省份颜色光有底图没意义真正要的是「哪个省数值高颜色就深」。这靠series.data和visualMap配合。chart.setOption({ visualMap: { min: 0, max: 1000, left: 20, bottom: 20, text: [高, 低], inRange: { color: [#e8f0fe, #8ab4f8, #1a73e8] // 由浅到深 }, calculable: true }, series: [{ type: map, map: china, data: [ { name: 广东省, value: 980 }, { name: 江苏省, value: 760 }, { name: 四川省, value: 430 } ] }] });逻辑说明visualMap把value映射到inRange.color的渐变色带上min/max决定映射区间。series.data里的name必须和 GeoJSON 的properties.name逐字一致差一个「省」字或繁简体那个省就是默认色。参数上calculable: true让用户能拖动筛选做交互大屏时很实用inRange.color建议三到五档太多档人眼分不清。3.3 下钻到市级数据裁剪与二次注册省级地图点进去看市级是数据大屏的常见需求。做法是准备一份市级 GeoJSON点击省时用chart.on(click)拿到省名再注册对应市的地图。chart.on(click, function (params) { if (params.componentType ! series) return; const province params.name; // 例如「广东省」 // 假设 cityDataMap 是 { 广东省: {...市级FeatureCollection} } const cityGeo cityDataMap[province]; if (!cityGeo) return; echarts.registerMap(province, cityGeo); // 用省名当新 map 名 chart.setOption({ series: [{ type: map, map: province, // 切到刚注册的市级地图 data: cityValueMap[province] || [] }] }); });逻辑说明registerMap的 map 名可以自定义这里直接用省名避免命名冲突。params.name来自点击的省份和 GeoJSON 的name一致才能对上。参数上市级数据体积比省级大很多别一次性全加载按需 fetch 或按需注册。返回上一级时重新registerMap(china, ...)再 setOption 即可ECharts 不会自动帮你回退。4. 避坑与排查地图数据接入最常见的 5 个翻车现场4.1 报错 Map china not exists现象控制台明确报Map china not exists地图区域一片空白。原因registerMap没执行或执行在setOption之后。JS 版本如果script放在echarts.init之后注册就晚了。解决把地图数据脚本放在 echarts 之后、业务脚本之前用 fetch 加载 GeoJSON 时把setOption写进.then()里别写在 fetch 外面。4.2 地图出来了但某个省没颜色现象底图正常业务数据里明明有「内蒙古」地图上就是不上色。原因properties.name和series.data.name不一致常见于「内蒙古自治区」vs「内蒙古」、「广西壮族自治区」vs「广西」。解决打印 GeoJSON 里所有name值和你的数据做一次 diff统一成短名或全名。这个坑我踩过不止一次血泪经验是先对齐名字再谈样式。4.3 南海诸岛和边界显示不全现象地图右下角缺南海诸岛或九段线没画出来。原因部分精简版 GeoJSON 为了减小体积裁掉了南海部分。解决换用完整版数据或在 option 里单独加一个geo图层补上。合规的地图展示有明确要求别用来源不明的裁剪数据这是底线问题不是技术问题。4.4 内网部署时 fetch 报跨域现象本地file://打开或内网服务器加载.json报 CORS。原因浏览器对file://和跨域 fetch 有限制。解决改用 JS 版本直接script引入绕开 fetch或者把 JSON 放到同源服务器下。内网大屏我一般直接用 JS 版本省掉这整类问题。4.5 地图渲染卡顿、拖动掉帧现象省级地图还好一切到市级或全国县级拖动就卡。原因坐标点太多MultiPolygon顶点数上万SVG 渲染扛不住。解决切 Canvas 渲染ECharts 默认就是 canvas确认没被改成 svg对精度要求不高的场景用简化过的边界数据roam时关掉label和emphasis的复杂样式。参数上series.map的silent: true能关掉鼠标事件纯展示时提速明显。5. 进阶让中国地图数据在真实大屏里稳住的三个技巧第一个技巧是数据与底图解耦。别把业务数值写死在 option 里用dataset或外部变量注入地图数据只负责「形状」业务数据只负责「颜色」。这样换数据不用动地图代码换地图也不用动业务逻辑。我习惯把registerMap封装成一个loadMap(name, url)函数返回 Promise业务侧await后再 setOption加载顺序再也不会乱。第二个技巧是坐标校验。properties.center是打点和飞线的锚点但不同来源的数据 center 精度不一有的偏到隔壁省。上线前用一个小脚本把所有 center 打在地图上肉眼过一遍偏得离谱的手动修。这个动作花十分钟能省掉上线后被业务方追问「为什么这个点飘到海里」的后悔药。第三个技巧是版本与体积管理。全国省级 GeoJSON 通常在几百 KB 到 1MB 出头市级、县级会成倍增长。别把全国县级数据一次性打进主包按需加载。判断标准很简单首屏只需要省级那就只引省级下钻时再请求。下面这个加载函数是我常用的骨架。// 按需加载并注册地图避免主包体积膨胀 const mapCache {}; async function loadMap(mapName, url) { if (mapCache[mapName]) return mapCache[mapName]; // 命中缓存直接返回 const res await fetch(url); if (!res.ok) throw new Error(地图数据加载失败: ${url}); const geoJson await res.json(); echarts.registerMap(mapName, geoJson); mapCache[mapName] geoJson; // 缓存避免重复请求 return geoJson; } // 使用先加载再渲染 loadMap(china, /geo/china.json).then(() { chart.setOption({ series: [{ type: map, map: china }] }); });逻辑说明mapCache用对象做内存缓存同一个地图只 fetch 一次。registerMap放在 fetch 成功之后保证顺序。参数上url建议走同源或 CDN内网就换成 JS 版本。异常分支里throw出去让调用方能感知失败别静默吞掉。最后说个习惯每次拿到一份新的地图数据先别写业务用最小示例把它单独渲染出来确认边界完整、名字对得上、南海诸岛在。这一步过了后面所有样式和数据映射才有意义。地图数据这东西底子不对上层怎么调都是玄学。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/25 9:41:34 · 阅读 1.2k ECharts中国地图数据包：GeoJSON与JS格式解析及接入实战
简介这份资源是面向前端开发与数据可视化学习者的中国地图数据包聚焦 ECharts 地理图表与 H5 应用场景解决地图底图数据获取与渲染配置的问题。压缩包共 76 个文件以 38 个 json 与 37 个 js 为主另有 1 个 txt 说明整体约 2.71MBjson 文件承载中国及各省份、城市、世界范围的地理坐标与边界结构js 文件则对应地图初始化、轮廓绘制与交互逻辑代码可直接引入项目使用。目前已有 1834 人学习下载。借助这些数据开发者能快速实现省份颜色填充、区域高亮、悬浮提示等效果并在此基础上叠加经济指标、人口数据等业务信息构建响应式动态地图适用于数据分析报告、新闻展示与教学演示等场景对提升 ECharts 地图开发与地理信息可视化能力有实际参考价值。1. 拿到「最新中国地图jsjson数据文件.zip」先别急着解压它到底解决什么问题做 ECharts 中国地图可视化的人几乎都经历过同一个卡点代码写完了echarts.registerMap(china, geoJson)一跑控制台报Map china not exists或者地图出来了但南海诸岛、港澳台边界缺一块。问题不在 ECharts而在你手上没有一份完整、合规、能直接喂给registerMap的地理边界数据。这个 zip 包要解决的就是「地图底图数据从哪来、怎么用、怎么和 ECharts 对接」这件事。它本质是一份中国省级行政区域的 GeoJSON 边界数据外加一份可直接script引入的 JS 版本。GeoJSON 是 JSON 格式的地理数据用FeatureCollection描述每个省的Polygon或MultiPolygon坐标JS 版本则是把同样的数据包成window.chinaMapData {...}或echarts.registerMap的调用形式省去你手动 fetch 的步骤。适合三类人做数据大屏的前端、用 ECharts 做区域分布图的运营分析、以及需要离线部署内网、无外网 CDN的场景。下面从数据长什么样讲到怎么跑通、参数怎么调、坑在哪。2. 拆开这个包GeoJSON 与 JS 两种格式的取舍和字段含义2.1 GeoJSON 的 FeatureCollection 结构长什么样一份标准的中国地图 GeoJSON顶层是FeatureCollectionfeatures数组里每个元素是一个省。关键字段只有四个type、properties、geometry、以及properties里的name。name是 ECharts 做数据映射时的匹配键写错一个字那个省就渲染不出颜色。{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 广东省, adcode: 440000, center: [113.280637, 23.125178], level: province }, geometry: { type: MultiPolygon, coordinates: [ [ [[113.1, 23.3], [113.2, 23.4], [113.15, 23.25]] ] ] } } ] }properties.name是 EChartsseries.data里name字段的匹配依据必须和你的业务数据完全一致。adcode是行政区划代码做下钻联动时用它比用中文名稳。center是省份中心点经纬度打点、标线、飞线动画全靠它。geometry.type通常是MultiPolygon因为一个省可能有岛屿坐标是[经度, 纬度]顺序别写反。2.2 JS 版本为什么更适合直接引入JS 版本把 JSON 包成了变量或注册调用好处是省掉一次异步请求页面加载即用。常见两种写法一种是纯数据变量// china-map.js —— 挂到全局供后续 registerMap 使用 window.chinaMapData { type: FeatureCollection, features: [ /* 同 GeoJSON 结构 */ ] };另一种是直接注册引入即生效// 依赖已加载的 echarts 全局对象 echarts.registerMap(china, { /* FeatureCollection */ });第一种更灵活你可以在注册前对数据做裁剪比如只保留华东几省第二种省事但要求echarts必须先加载。选哪个取决于你是否需要动态改数据。内网大屏我一般用第一种把数据文件和业务代码解耦。2.3 两种格式的对比与选型维度GeoJSON (.json)JS 版本 (.js)加载方式fetch / import异步script同步引入可读性纯数据工具友好带变量包装需去壳离线部署需处理跨域直接可用动态裁剪加载后随意改需先拿到变量再改体积略小多几行包装选型结论做静态大屏、内网部署用 JS 版本最省心做需要按权限裁剪区域、或数据来自后端的用 GeoJSON 走 fetch。别两个都引重复注册同名 map 会覆盖排查起来很费时间。3. 用 ECharts 把这份地图数据跑起来的最小可复现路径3.1 引入顺序与 registerMap 的正确姿势ECharts 地图渲染分两步先注册地图数据再在 option 里用geo或series-map引用。注册必须在setOption之前完成否则报Map china not exists。下面是最小可跑通页面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title中国地图最小示例/title !-- 1. 先加载 echarts -- script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script !-- 2. 再加载地图数据JS 版本内部调用 registerMap -- script src./china-map.js/script /head body div idmap stylewidth: 900px; height: 600px;/div script // 3. 数据注册完成后才能初始化并 setOption const chart echarts.init(document.getElementById(map)); chart.setOption({ series: [{ type: map, map: china, // 必须和 registerMap 的第一个参数一致 roam: true, // 允许缩放拖动 label: { show: false }, itemStyle: { areaColor: #e8f0fe, borderColor: #8ab4f8 }, emphasis: { itemStyle: { areaColor: #fdd663 } } }] }); /script /body /html逻辑说明echarts.init只负责创建画布真正决定画哪张地图的是series.map的值它去 ECharts 内部的 map 注册表里查。registerMap(china, data)就是往这张表里塞数据。参数上roam: true开启鼠标缩放平移大屏常用label.show控制省名显示数据密集时关掉更干净emphasis是 hover 高亮样式不配的话默认是灰色视觉上很突兀。3.2 把业务数据映射到省份颜色光有底图没意义真正要的是「哪个省数值高颜色就深」。这靠series.data和visualMap配合。chart.setOption({ visualMap: { min: 0, max: 1000, left: 20, bottom: 20, text: [高, 低], inRange: { color: [#e8f0fe, #8ab4f8, #1a73e8] // 由浅到深 }, calculable: true }, series: [{ type: map, map: china, data: [ { name: 广东省, value: 980 }, { name: 江苏省, value: 760 }, { name: 四川省, value: 430 } ] }] });逻辑说明visualMap把value映射到inRange.color的渐变色带上min/max决定映射区间。series.data里的name必须和 GeoJSON 的properties.name逐字一致差一个「省」字或繁简体那个省就是默认色。参数上calculable: true让用户能拖动筛选做交互大屏时很实用inRange.color建议三到五档太多档人眼分不清。3.3 下钻到市级数据裁剪与二次注册省级地图点进去看市级是数据大屏的常见需求。做法是准备一份市级 GeoJSON点击省时用chart.on(click)拿到省名再注册对应市的地图。chart.on(click, function (params) { if (params.componentType ! series) return; const province params.name; // 例如「广东省」 // 假设 cityDataMap 是 { 广东省: {...市级FeatureCollection} } const cityGeo cityDataMap[province]; if (!cityGeo) return; echarts.registerMap(province, cityGeo); // 用省名当新 map 名 chart.setOption({ series: [{ type: map, map: province, // 切到刚注册的市级地图 data: cityValueMap[province] || [] }] }); });逻辑说明registerMap的 map 名可以自定义这里直接用省名避免命名冲突。params.name来自点击的省份和 GeoJSON 的name一致才能对上。参数上市级数据体积比省级大很多别一次性全加载按需 fetch 或按需注册。返回上一级时重新registerMap(china, ...)再 setOption 即可ECharts 不会自动帮你回退。4. 避坑与排查地图数据接入最常见的 5 个翻车现场4.1 报错 Map china not exists现象控制台明确报Map china not exists地图区域一片空白。原因registerMap没执行或执行在setOption之后。JS 版本如果script放在echarts.init之后注册就晚了。解决把地图数据脚本放在 echarts 之后、业务脚本之前用 fetch 加载 GeoJSON 时把setOption写进.then()里别写在 fetch 外面。4.2 地图出来了但某个省没颜色现象底图正常业务数据里明明有「内蒙古」地图上就是不上色。原因properties.name和series.data.name不一致常见于「内蒙古自治区」vs「内蒙古」、「广西壮族自治区」vs「广西」。解决打印 GeoJSON 里所有name值和你的数据做一次 diff统一成短名或全名。这个坑我踩过不止一次血泪经验是先对齐名字再谈样式。4.3 南海诸岛和边界显示不全现象地图右下角缺南海诸岛或九段线没画出来。原因部分精简版 GeoJSON 为了减小体积裁掉了南海部分。解决换用完整版数据或在 option 里单独加一个geo图层补上。合规的地图展示有明确要求别用来源不明的裁剪数据这是底线问题不是技术问题。4.4 内网部署时 fetch 报跨域现象本地file://打开或内网服务器加载.json报 CORS。原因浏览器对file://和跨域 fetch 有限制。解决改用 JS 版本直接script引入绕开 fetch或者把 JSON 放到同源服务器下。内网大屏我一般直接用 JS 版本省掉这整类问题。4.5 地图渲染卡顿、拖动掉帧现象省级地图还好一切到市级或全国县级拖动就卡。原因坐标点太多MultiPolygon顶点数上万SVG 渲染扛不住。解决切 Canvas 渲染ECharts 默认就是 canvas确认没被改成 svg对精度要求不高的场景用简化过的边界数据roam时关掉label和emphasis的复杂样式。参数上series.map的silent: true能关掉鼠标事件纯展示时提速明显。5. 进阶让中国地图数据在真实大屏里稳住的三个技巧第一个技巧是数据与底图解耦。别把业务数值写死在 option 里用dataset或外部变量注入地图数据只负责「形状」业务数据只负责「颜色」。这样换数据不用动地图代码换地图也不用动业务逻辑。我习惯把registerMap封装成一个loadMap(name, url)函数返回 Promise业务侧await后再 setOption加载顺序再也不会乱。第二个技巧是坐标校验。properties.center是打点和飞线的锚点但不同来源的数据 center 精度不一有的偏到隔壁省。上线前用一个小脚本把所有 center 打在地图上肉眼过一遍偏得离谱的手动修。这个动作花十分钟能省掉上线后被业务方追问「为什么这个点飘到海里」的后悔药。第三个技巧是版本与体积管理。全国省级 GeoJSON 通常在几百 KB 到 1MB 出头市级、县级会成倍增长。别把全国县级数据一次性打进主包按需加载。判断标准很简单首屏只需要省级那就只引省级下钻时再请求。下面这个加载函数是我常用的骨架。// 按需加载并注册地图避免主包体积膨胀 const mapCache {}; async function loadMap(mapName, url) { if (mapCache[mapName]) return mapCache[mapName]; // 命中缓存直接返回 const res await fetch(url); if (!res.ok) throw new Error(地图数据加载失败: ${url}); const geoJson await res.json(); echarts.registerMap(mapName, geoJson); mapCache[mapName] geoJson; // 缓存避免重复请求 return geoJson; } // 使用先加载再渲染 loadMap(china, /geo/china.json).then(() { chart.setOption({ series: [{ type: map, map: china }] }); });逻辑说明mapCache用对象做内存缓存同一个地图只 fetch 一次。registerMap放在 fetch 成功之后保证顺序。参数上url建议走同源或 CDN内网就换成 JS 版本。异常分支里throw出去让调用方能感知失败别静默吞掉。最后说个习惯每次拿到一份新的地图数据先别写业务用最小示例把它单独渲染出来确认边界完整、名字对得上、南海诸岛在。这一步过了后面所有样式和数据映射才有意义。地图数据这东西底子不对上层怎么调都是玄学。希望帮到你。本文还有配套的精品资源点击获取