企业官网建设流程全解析

简介：为使用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；做某个国家的详细地图，去 GitHub 对应仓库找独立 JSON；做国内省市下钻，GeoAtlas 一把梭。

3. 从文件到可视化：注册地图与核心配置实操

3.1 registerMap 是接入的第一行代码

拿到 JSON 文件后，第一件事是注册。ECharts 提供了全局方法 registerMap：

import * 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 经常报 "Can't get DOM width or height"。根因是容器还没渲染出来，宽度是 0。常见触发场景是 tab 切换、v-if 控制显示时调用 init。解决办法很简单，等容器可见之后再初始化，或手动触发 resize：

const 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，弱网下体验很差。四条路按优先级排列：

1. 开启 gzip 或 br 压缩传输。GeoJSON 是纯文本，压缩率很高，1MB 文件 gzip 后能到 200KB 左右。
2. 按需加载：进入地图页才 fetch JSON，不要打进主包。
3. 用 mapshaper 降低坐标精度，把小数位从 6 位压到 2-3 位，体积能再砍一半。
4. 渲染侧开 large: true，但世界地图一般用不上，主要还是靠文件瘦身。

4.5 排查速查表

从我个人的使用习惯来说，ECharts 地图数据这块没有高深技术，就是“数据准、名称对、注册好”三件事。但网上教程大多停留在老版本，照搬容易踩坑。我自己的习惯是：拿到任何一份 GeoJSON，先写个十来行的脚本统计 features 数量、name 列表、文件体积，做到心里有数再接图表；上线前再逐个核对关键地区的边界。地图文件就单独放在项目 assets 或 public 目录里，方便后续替换。如果你也正在做地图可视化，希望这篇能帮你少走几步弯路。

本文还有配套的精品资源，点击获取