简介为使用Echarts进行数据可视化的前端开发者与数据分析师提供可直接复用的世界地图JSON文件解决绘制世界地图时地理数据难搜集、格式不兼容、版本不匹配等问题。压缩包为RAR格式内含1个JSON文件包体仅279KB解压后可直接嵌入项目适用于全球业务分布、大屏数据展示、国际物流轨迹等可视化场景在搭建跨国业务看板、统计海外用户分布或展示全球合作伙伴时尤为实用。JSON数据涵盖世界主要国家边界与区域信息结构清晰经过实际项目验证可配合Echarts地图组件快速渲染支持自定义样式、区域选中和数据下钻等常见交互需求内置的边界数据可满足常见国家的页面展示与数据联动。无需重新整理或转换数据格式下载后即可将精力集中于业务逻辑与视觉效果优化也便于团队内部统一维护和复用。目前已有1705人学习/下载适合中级开发者快速调用也可作为团队通用的地图数据资产沉淀复用。 做数据可视化这几年跟 ECharts 世界地图 JSON 文件打交道的次数比我吃过的夜宵还多。尤其是大屏项目十有八九要把业务数据落到地图上。前阵子接了个全球业务分布的大屏需求很普通世界地图上按国家染色再挂几条飞线。结果第一步就卡住了——ECharts 从 5.x 开始不再内置世界地图数据官方示例里那个 world 地图需要你自己准备 JSON 文件。这期间我把世界地图和十几个主要国家的 GeoJSON 文件翻来覆去折腾了一遍今天就把这件事彻底讲透地图 JSON 是什么、从哪下载、怎么接进 ECharts、以及最容易踩的坑。不管你是刚接触 ECharts 的新人还是已经做过多个大屏的老手这份实操笔记应该都用得上。1. 地图 JSON 到底是什么——先搞明白你下载的文件里装的是啥1.1 GeoJSON 结构拆解ECharts 用的地图文件本质上就是 GeoJSON。GeoJSON 是一种用 JSON 描述地理空间数据的标准格式它最常见的顶层结构叫 FeatureCollection翻译过来是“要素集合”。一个要素对应一个图形区域世界地图里的要素是各个国家中国地图里的要素是各个省级行政区。一个典型的 feature 看起来是这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: China, cp: [104.1954, 35.8617], adcode: 100000 }, geometry: { type: MultiPolygon, coordinates: [ [ [[110.2, 21.5], [110.4, 21.8], [110.6, 21.3]] ] ] } } ] }这里最关键的是 coordinates 字段。它是一组经纬度坐标数组每个坐标写成 [经度, 纬度] 的形式。对于一个多边形区域坐标按顺序围成一个闭合形状如果区域跨越了 180 度经线或者国家有海外领地数据源会用 MultiPolygon 记录多个独立的多边形。ECharts 在渲染时会逐个读取 coordinates 生成几何路径再用 properties.name 作为区域名字。所以拿到一份地图 JSON你只需要关心三点第一coordinates 描述形状不能乱动第二properties.name 是区域名必须唯一第三如果文件里有两个 feature 重名渲染时后一个会把前一个覆盖掉。这三点是排查地图问题的基础后面会反复用到。1.2 为什么从 ECharts 5 开始地图数据要自己找2019 年之前接触 ECharts 的朋友应该有印象4.x 时代内置了 world.json、china.json 和不少省份地图引入一个包就能画。但从 ECharts 5 开始官方策略变了内置地图数据被移除你需要自己准备、自己注册。官方解释是地图数据维护成本高边界和产权问题不应跟着框架一起发布。这个变化带来的直接后果是网上大量老教程里的示例代码跑不起来了。你把代码原样抄下来地图区域一片空白控制台还不报错原因就是少了 registerMap 这一步。所以现在做地图可视化第一步永远是解决数据源而不是急着调 option。1.3 世界地图文件比想象中“大”世界地图 JSON 不像普通配置那么轻量。我自己常用的带中文标注的世界地图文件体积通常在 800KB 到 1.5MB 之间主要是多边形边界点太细有些数据源光是中国一个区域就有几千个坐标点。如果打包进主包或者直接 script 引文件加载体验都不会太好这块我在性能优化小节展开。还有一个容易忽略的点世界地图和国家地图通常是“分而治之”的。你下载的 world.json 包含全世界所有国家的要素但是要单独展示美国、日本、德国这种大国时业内主流做法是下载对应国家的独立 JSON而不是从 world.json 里按 name 去筛。虽然技术上筛得出来但世界地图里单个国家的边界裁剪精度、坐标范围未必适合做国家级别的可视化所以各大开源项目都会按国家把文件拆好。2. 从哪搞到靠谱的世界地图和国家地图 JSON含渠道对比2.1 首选阿里云 DataV.GeoAtlas第一个要推荐的渠道是阿里云 DataV 的 GeoAtlas 地理小工具。它提供世界地图、中国地图到每个市区县的 GeoJSON 数据界面很朴素左边选区域右侧给出 JSON API 地址和下载按钮。它最大的优势是规范。每个 feature 的 properties 都带 name中文、adcode行政区划代码、cp中心点经纬度等字段。adcode 在国内省市地图的联动场景里非常有用比如你可以拿它做地市下钻。世界地图也是完整中文名省去手动翻译的麻烦。不过GeoAtlas 的世界地图在正式环境使用前我还是建议人工核对一遍边界。这类数据源会持续更新但地图边界这种事上线前自己验证一次比出了问题再补救成本低得多。2.2 GitHub 开源仓库里的“国家独立包”如果你需要“主要国家的独立 JSON”GitHub 上最常用的就是 echarts-maps 这类仓库。它把世界地图按国家拆开文件命名基本是英文国家名比如 usa.json、japan.json、germany.json。基础地理信息变化不频繁这类仓库的更新频率参差也不影响使用。下载时我建议选未压缩的源码版本别直接用 dist 目录里的压缩产物。压缩后的文件字段名会变短比如 properties 变成 p调试时非常难受。先用原始 GeoJSON 做开发上线前再考虑通过 gzip 或传输层压缩来减体积前端代码里不需要做二次压缩。2.3 五分钟数据源自查清单不管从哪下载我拿到地图文件后都会先做一遍检查避免做了一半才发现数据有坑用编辑器或在线校验工具打开确认是合法 JSON不是 HTML 错误页。搜索 properties.name确认包含你要展示的国家/地区名称。确认中国边界完整。国外一些开源数据源可能会在边界上缺斤少两这个必须在开发前盯一眼。检查经纬度范围经度应该在 -180 到 180 之间纬度在 -90 到 90 之间。如果出现三位数纬度或超过 180 的经度这份数据基本是坏的。查看文件体积超过 5MB 直接考虑换精简版。2.4 常见渠道横向对比渠道覆盖范围语言优点注意点阿里云 GeoAtlas世界/中国/省市区中文为主规范、含 adcode上线前自检边界GitHub 开源仓库世界国家独立包英文为主国家独立文件好找更新不固定官网示例世界地图 demo英文能快速跑通只有世界没有国家自制/裁剪工具按需定制自定义体积最小学习成本高我的建议很直接做世界地图优先用 GeoAtlas做某个国家的详细地图去 GitHub 对应仓库找独立 JSON做国内省市下钻GeoAtlas 一把梭。3. 从文件到可视化注册地图与核心配置实操3.1 registerMap 是接入的第一行代码拿到 JSON 文件后第一件事是注册。ECharts 提供了全局方法 registerMapimport * as echarts from echarts; import worldJson from ./map/world.json; echarts.registerMap(world, worldJson);registerMap 的名字这里是world是后续所有配置引用的 key。注册完成后geo 组件和 map 系列都可以直接用这个名字option { geo: { map: world, roam: true, itemStyle: { areaColor: #1a2a6c, borderColor: #fff } } };两个细节容易踩一是同一个页面重复注册同名 key 会覆盖之前的地图二是如果你要同时展示世界地图和中国地图注册名要起成world和china配置时别串。3.2 中英文名称对齐新手翻车重灾区世界地图里 properties.name 可能是英文也可能是中文这取决于你下载的版本。ECharts 的 map 系列按名称匹配数据项如果 JSON 里是 China 而你数据里叫“中国”这个国家就显示不了数值只有默认底色。解决办法无非三种换用带中文 name 的 JSON、写脚本把数据源转换成中文、或者用 nameMap 做映射。我个人的习惯是统一中文名。写一个简单的 Node 脚本遍历 features把 properties.name 从英文翻译成中文存成新 JSON。这样做的好处是后续 option 里写起来直观也不用每次都做中英文对照。注意脚本跑完要重新检查一遍 name 是否有重名或空值。3.3 visualMap 上色与 pieces 分段数据挂上之后最常用的就是给地图染色。连续渐变用 visualMap 的 continuous 类型就行但如果要按业务阈值分段用 pieces 更合适visualMap: { type: piecewise, pieces: [ { min: 500, label: 高, color: #ff4d4f }, { min: 100, max: 500, label: 中, color: #faad14 }, { max: 100, label: 低, color: #52c41a } ], left: 20, bottom: 20 }配置之后会自动生成图例非常直观。有个小坑pieces 数组里的顺序会直接影响图例显示顺序建议从高到低写让图例靠上的就是高值段。另外visualMap 默认取 series.data 里的 value。如果你的字段叫 count 或 sales要么在数据接入时重构成 { name, value }要么在 series 里做一次映射。前者更简单直观。3.4 在地图上叠加散点和飞线大部分地图项目不会只画一个纯色底图。要在世界地图上标业务点、画航线我的方案是 geo scatter/lines 组合而不是把所有东西塞进 map 系列。散点的核心配置如下series: [ { type: scatter, coordinateSystem: geo, data: [ { name: 北京点, value: [116.4, 39.9, 100] }, { name: 纽约点, value: [-74.0, 40.7, 80] } ], symbolSize: function (val) { return val[2] / 10; } } ]散点 data 的 value 是 [经度, 纬度, 数值] 的组合geo 坐标系会自动把点放到正确位置。飞线用 lines 系列加 effect 做流动效果坐标同样是 [经度, 纬度]。这个组合的好处是地图本体和业务数据分离换地图时业务数据不用大改。4. 地图不显示、点不动常见问题与排查技巧实录4.1 区域空白、没边框先查 name地图区域渲染成空白九成是名称没对上。排查顺序先 console.log 一个 feature 的 properties.name再去看 series.data 的 name两者一致才有数值。如果文件本身有问题用地图形工具预览一下就能看出来预览正常说明问题一定在 name 匹配。4.2 DOM 尺寸为 0 的报错页面隐藏或移动端初始化时ECharts 经常报 Cant get DOM width or height。根因是容器还没渲染出来宽度是 0。常见触发场景是 tab 切换、v-if 控制显示时调用 init。解决办法很简单等容器可见之后再初始化或手动触发 resizeconst chart echarts.init(dom); setTimeout(() chart.resize(), 200); new ResizeObserver(() { chart.resize(); }).observe(dom);在 uniapp 或者 web-view 环境里用 ECharts 时这个问题出现得更频繁记得在页面 onReady 且当前 tab 被激活后再初始化。4.3 移动端地图点不动、手势冲突地图在移动端经常出现滑动没反应、点不到点的问题通常是 touch 事件和页面滚动冲突。我的三个处理方向把 roam 改成scale只允许缩放不允许平移。通过按钮控制缩放级别直接关掉 roam。在容器样式上加touch-action: pan-y把纵向滚动留给页面缩放和横向手势交给图表。实测下来第三种方案在 H5 里最稳。但 native app 的 webview 兼容性因系统而异建议多拿几台真机测。4.4 地图加载慢从文件瘦身开始世界地图 JSON 文件动辄几百 KB弱网下体验很差。四条路按优先级排列开启 gzip 或 br 压缩传输。GeoJSON 是纯文本压缩率很高1MB 文件 gzip 后能到 200KB 左右。按需加载进入地图页才 fetch JSON不要打进主包。用 mapshaper 降低坐标精度把小数位从 6 位压到 2-3 位体积能再砍一半。渲染侧开 large: true但世界地图一般用不上主要还是靠文件瘦身。4.5 排查速查表现象可能原因解决方向整片空白无边框数据未注册或 name 不匹配检查 registerMap 和 data name有边框但不上色series.data 与地图 name 不一致统一命名格式拖动/缩放失灵手势冲突或 roam 设置错误调整 roam、touch-action小岛或飞地消失坐标精度被过度压缩降低压缩比例浏览器报跨域本地 file 协议直接打开起本地静态服务器从我个人的使用习惯来说ECharts 地图数据这块没有高深技术就是“数据准、名称对、注册好”三件事。但网上教程大多停留在老版本照搬容易踩坑。我自己的习惯是拿到任何一份 GeoJSON先写个十来行的脚本统计 features 数量、name 列表、文件体积做到心里有数再接图表上线前再逐个核对关键地区的边界。地图文件就单独放在项目 assets 或 public 目录里方便后续替换。如果你也正在做地图可视化希望这篇能帮你少走几步弯路。本文还有配套的精品资源点击获取 ECharts世界地图GeoJSON实战：下载、注册与排查指南
简介为使用Echarts进行数据可视化的前端开发者与数据分析师提供可直接复用的世界地图JSON文件解决绘制世界地图时地理数据难搜集、格式不兼容、版本不匹配等问题。压缩包为RAR格式内含1个JSON文件包体仅279KB解压后可直接嵌入项目适用于全球业务分布、大屏数据展示、国际物流轨迹等可视化场景在搭建跨国业务看板、统计海外用户分布或展示全球合作伙伴时尤为实用。JSON数据涵盖世界主要国家边界与区域信息结构清晰经过实际项目验证可配合Echarts地图组件快速渲染支持自定义样式、区域选中和数据下钻等常见交互需求内置的边界数据可满足常见国家的页面展示与数据联动。无需重新整理或转换数据格式下载后即可将精力集中于业务逻辑与视觉效果优化也便于团队内部统一维护和复用。目前已有1705人学习/下载适合中级开发者快速调用也可作为团队通用的地图数据资产沉淀复用。 做数据可视化这几年跟 ECharts 世界地图 JSON 文件打交道的次数比我吃过的夜宵还多。尤其是大屏项目十有八九要把业务数据落到地图上。前阵子接了个全球业务分布的大屏需求很普通世界地图上按国家染色再挂几条飞线。结果第一步就卡住了——ECharts 从 5.x 开始不再内置世界地图数据官方示例里那个 world 地图需要你自己准备 JSON 文件。这期间我把世界地图和十几个主要国家的 GeoJSON 文件翻来覆去折腾了一遍今天就把这件事彻底讲透地图 JSON 是什么、从哪下载、怎么接进 ECharts、以及最容易踩的坑。不管你是刚接触 ECharts 的新人还是已经做过多个大屏的老手这份实操笔记应该都用得上。1. 地图 JSON 到底是什么——先搞明白你下载的文件里装的是啥1.1 GeoJSON 结构拆解ECharts 用的地图文件本质上就是 GeoJSON。GeoJSON 是一种用 JSON 描述地理空间数据的标准格式它最常见的顶层结构叫 FeatureCollection翻译过来是“要素集合”。一个要素对应一个图形区域世界地图里的要素是各个国家中国地图里的要素是各个省级行政区。一个典型的 feature 看起来是这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: China, cp: [104.1954, 35.8617], adcode: 100000 }, geometry: { type: MultiPolygon, coordinates: [ [ [[110.2, 21.5], [110.4, 21.8], [110.6, 21.3]] ] ] } } ] }这里最关键的是 coordinates 字段。它是一组经纬度坐标数组每个坐标写成 [经度, 纬度] 的形式。对于一个多边形区域坐标按顺序围成一个闭合形状如果区域跨越了 180 度经线或者国家有海外领地数据源会用 MultiPolygon 记录多个独立的多边形。ECharts 在渲染时会逐个读取 coordinates 生成几何路径再用 properties.name 作为区域名字。所以拿到一份地图 JSON你只需要关心三点第一coordinates 描述形状不能乱动第二properties.name 是区域名必须唯一第三如果文件里有两个 feature 重名渲染时后一个会把前一个覆盖掉。这三点是排查地图问题的基础后面会反复用到。1.2 为什么从 ECharts 5 开始地图数据要自己找2019 年之前接触 ECharts 的朋友应该有印象4.x 时代内置了 world.json、china.json 和不少省份地图引入一个包就能画。但从 ECharts 5 开始官方策略变了内置地图数据被移除你需要自己准备、自己注册。官方解释是地图数据维护成本高边界和产权问题不应跟着框架一起发布。这个变化带来的直接后果是网上大量老教程里的示例代码跑不起来了。你把代码原样抄下来地图区域一片空白控制台还不报错原因就是少了 registerMap 这一步。所以现在做地图可视化第一步永远是解决数据源而不是急着调 option。1.3 世界地图文件比想象中“大”世界地图 JSON 不像普通配置那么轻量。我自己常用的带中文标注的世界地图文件体积通常在 800KB 到 1.5MB 之间主要是多边形边界点太细有些数据源光是中国一个区域就有几千个坐标点。如果打包进主包或者直接 script 引文件加载体验都不会太好这块我在性能优化小节展开。还有一个容易忽略的点世界地图和国家地图通常是“分而治之”的。你下载的 world.json 包含全世界所有国家的要素但是要单独展示美国、日本、德国这种大国时业内主流做法是下载对应国家的独立 JSON而不是从 world.json 里按 name 去筛。虽然技术上筛得出来但世界地图里单个国家的边界裁剪精度、坐标范围未必适合做国家级别的可视化所以各大开源项目都会按国家把文件拆好。2. 从哪搞到靠谱的世界地图和国家地图 JSON含渠道对比2.1 首选阿里云 DataV.GeoAtlas第一个要推荐的渠道是阿里云 DataV 的 GeoAtlas 地理小工具。它提供世界地图、中国地图到每个市区县的 GeoJSON 数据界面很朴素左边选区域右侧给出 JSON API 地址和下载按钮。它最大的优势是规范。每个 feature 的 properties 都带 name中文、adcode行政区划代码、cp中心点经纬度等字段。adcode 在国内省市地图的联动场景里非常有用比如你可以拿它做地市下钻。世界地图也是完整中文名省去手动翻译的麻烦。不过GeoAtlas 的世界地图在正式环境使用前我还是建议人工核对一遍边界。这类数据源会持续更新但地图边界这种事上线前自己验证一次比出了问题再补救成本低得多。2.2 GitHub 开源仓库里的“国家独立包”如果你需要“主要国家的独立 JSON”GitHub 上最常用的就是 echarts-maps 这类仓库。它把世界地图按国家拆开文件命名基本是英文国家名比如 usa.json、japan.json、germany.json。基础地理信息变化不频繁这类仓库的更新频率参差也不影响使用。下载时我建议选未压缩的源码版本别直接用 dist 目录里的压缩产物。压缩后的文件字段名会变短比如 properties 变成 p调试时非常难受。先用原始 GeoJSON 做开发上线前再考虑通过 gzip 或传输层压缩来减体积前端代码里不需要做二次压缩。2.3 五分钟数据源自查清单不管从哪下载我拿到地图文件后都会先做一遍检查避免做了一半才发现数据有坑用编辑器或在线校验工具打开确认是合法 JSON不是 HTML 错误页。搜索 properties.name确认包含你要展示的国家/地区名称。确认中国边界完整。国外一些开源数据源可能会在边界上缺斤少两这个必须在开发前盯一眼。检查经纬度范围经度应该在 -180 到 180 之间纬度在 -90 到 90 之间。如果出现三位数纬度或超过 180 的经度这份数据基本是坏的。查看文件体积超过 5MB 直接考虑换精简版。2.4 常见渠道横向对比渠道覆盖范围语言优点注意点阿里云 GeoAtlas世界/中国/省市区中文为主规范、含 adcode上线前自检边界GitHub 开源仓库世界国家独立包英文为主国家独立文件好找更新不固定官网示例世界地图 demo英文能快速跑通只有世界没有国家自制/裁剪工具按需定制自定义体积最小学习成本高我的建议很直接做世界地图优先用 GeoAtlas做某个国家的详细地图去 GitHub 对应仓库找独立 JSON做国内省市下钻GeoAtlas 一把梭。3. 从文件到可视化注册地图与核心配置实操3.1 registerMap 是接入的第一行代码拿到 JSON 文件后第一件事是注册。ECharts 提供了全局方法 registerMapimport * as echarts from echarts; import worldJson from ./map/world.json; echarts.registerMap(world, worldJson);registerMap 的名字这里是world是后续所有配置引用的 key。注册完成后geo 组件和 map 系列都可以直接用这个名字option { geo: { map: world, roam: true, itemStyle: { areaColor: #1a2a6c, borderColor: #fff } } };两个细节容易踩一是同一个页面重复注册同名 key 会覆盖之前的地图二是如果你要同时展示世界地图和中国地图注册名要起成world和china配置时别串。3.2 中英文名称对齐新手翻车重灾区世界地图里 properties.name 可能是英文也可能是中文这取决于你下载的版本。ECharts 的 map 系列按名称匹配数据项如果 JSON 里是 China 而你数据里叫“中国”这个国家就显示不了数值只有默认底色。解决办法无非三种换用带中文 name 的 JSON、写脚本把数据源转换成中文、或者用 nameMap 做映射。我个人的习惯是统一中文名。写一个简单的 Node 脚本遍历 features把 properties.name 从英文翻译成中文存成新 JSON。这样做的好处是后续 option 里写起来直观也不用每次都做中英文对照。注意脚本跑完要重新检查一遍 name 是否有重名或空值。3.3 visualMap 上色与 pieces 分段数据挂上之后最常用的就是给地图染色。连续渐变用 visualMap 的 continuous 类型就行但如果要按业务阈值分段用 pieces 更合适visualMap: { type: piecewise, pieces: [ { min: 500, label: 高, color: #ff4d4f }, { min: 100, max: 500, label: 中, color: #faad14 }, { max: 100, label: 低, color: #52c41a } ], left: 20, bottom: 20 }配置之后会自动生成图例非常直观。有个小坑pieces 数组里的顺序会直接影响图例显示顺序建议从高到低写让图例靠上的就是高值段。另外visualMap 默认取 series.data 里的 value。如果你的字段叫 count 或 sales要么在数据接入时重构成 { name, value }要么在 series 里做一次映射。前者更简单直观。3.4 在地图上叠加散点和飞线大部分地图项目不会只画一个纯色底图。要在世界地图上标业务点、画航线我的方案是 geo scatter/lines 组合而不是把所有东西塞进 map 系列。散点的核心配置如下series: [ { type: scatter, coordinateSystem: geo, data: [ { name: 北京点, value: [116.4, 39.9, 100] }, { name: 纽约点, value: [-74.0, 40.7, 80] } ], symbolSize: function (val) { return val[2] / 10; } } ]散点 data 的 value 是 [经度, 纬度, 数值] 的组合geo 坐标系会自动把点放到正确位置。飞线用 lines 系列加 effect 做流动效果坐标同样是 [经度, 纬度]。这个组合的好处是地图本体和业务数据分离换地图时业务数据不用大改。4. 地图不显示、点不动常见问题与排查技巧实录4.1 区域空白、没边框先查 name地图区域渲染成空白九成是名称没对上。排查顺序先 console.log 一个 feature 的 properties.name再去看 series.data 的 name两者一致才有数值。如果文件本身有问题用地图形工具预览一下就能看出来预览正常说明问题一定在 name 匹配。4.2 DOM 尺寸为 0 的报错页面隐藏或移动端初始化时ECharts 经常报 Cant get DOM width or height。根因是容器还没渲染出来宽度是 0。常见触发场景是 tab 切换、v-if 控制显示时调用 init。解决办法很简单等容器可见之后再初始化或手动触发 resizeconst chart echarts.init(dom); setTimeout(() chart.resize(), 200); new ResizeObserver(() { chart.resize(); }).observe(dom);在 uniapp 或者 web-view 环境里用 ECharts 时这个问题出现得更频繁记得在页面 onReady 且当前 tab 被激活后再初始化。4.3 移动端地图点不动、手势冲突地图在移动端经常出现滑动没反应、点不到点的问题通常是 touch 事件和页面滚动冲突。我的三个处理方向把 roam 改成scale只允许缩放不允许平移。通过按钮控制缩放级别直接关掉 roam。在容器样式上加touch-action: pan-y把纵向滚动留给页面缩放和横向手势交给图表。实测下来第三种方案在 H5 里最稳。但 native app 的 webview 兼容性因系统而异建议多拿几台真机测。4.4 地图加载慢从文件瘦身开始世界地图 JSON 文件动辄几百 KB弱网下体验很差。四条路按优先级排列开启 gzip 或 br 压缩传输。GeoJSON 是纯文本压缩率很高1MB 文件 gzip 后能到 200KB 左右。按需加载进入地图页才 fetch JSON不要打进主包。用 mapshaper 降低坐标精度把小数位从 6 位压到 2-3 位体积能再砍一半。渲染侧开 large: true但世界地图一般用不上主要还是靠文件瘦身。4.5 排查速查表现象可能原因解决方向整片空白无边框数据未注册或 name 不匹配检查 registerMap 和 data name有边框但不上色series.data 与地图 name 不一致统一命名格式拖动/缩放失灵手势冲突或 roam 设置错误调整 roam、touch-action小岛或飞地消失坐标精度被过度压缩降低压缩比例浏览器报跨域本地 file 协议直接打开起本地静态服务器从我个人的使用习惯来说ECharts 地图数据这块没有高深技术就是“数据准、名称对、注册好”三件事。但网上教程大多停留在老版本照搬容易踩坑。我自己的习惯是拿到任何一份 GeoJSON先写个十来行的脚本统计 features 数量、name 列表、文件体积做到心里有数再接图表上线前再逐个核对关键地区的边界。地图文件就单独放在项目 assets 或 public 目录里方便后续替换。如果你也正在做地图可视化希望这篇能帮你少走几步弯路。本文还有配套的精品资源点击获取