企业官网建设流程全解析

简介：这份 ECharts 世界地图资源将中国设为地图中心，面向需要在中国视角下展示全球与省市数据的前端开发者和数据分析人员，可解决默认世界地图重心偏西、不便于突出中国位置的问题。压缩包共420个文件，其中380个为 JSON 格式的省市边界与坐标数据，40个为 JS 格式的地图配置，整体约4.34MB，涵盖世界地图与各省市地图脚本，便于按地域灵活加载。配合 ECharts 主库使用时，可快速实现以中国为中心的交互式世界地图，支持地图缩放、平移、区域选中与提示窗等常见交互，也能无缝下钻到中国各省市行政区域，适合中国市场分析、全球业务布局、物流和贸易数据展示等场景。文件按省市拆分，目录结构清晰，开发者可按需引入单个或组合使用；已有3153人学习下载，是搭建中国视角地图应用的实用基础资源。 做数据可视化大屏的时候，世界地图是个逃不开的场景。但不少人在ECharts里第一次把world.js加载出来，都会愣一下：地图跑出来不是以中国为中心，画布正中央怼着大西洋，中国缩在最右边，还得手动拖回来。项目需求文档里写着“以中国为中心”，你以为这只是个zoom设置问题，实际处理起来却发现ECharts没有直接给你一个“中国居中”的开关。这篇就来把这件事彻底说透：world.js怎么正确加载、ECharts地图的坐标体系是怎么回事、center和zoom到底怎么配才能让中国稳稳落在画布中央，以及我实际项目中踩过的几个坑，都一并整理出来。

1. 为什么ECharts的世界地图默认不把中国放中间

1.1 地图组件的显示逻辑和坐标系

ECharts里的地图组件，本质上是在一个平面上做经纬度坐标映射。世界地图的经纬度范围大概是经度-180到180，纬度-90到90，而地图数据本身只规定了每个区域的边界坐标，并不会告诉你画布上应该先显示哪一块。ECharts默认的view控制逻辑，是在没有显式指定center和zoom的情况下，尽可能把整个GeoJSON的边界范围撑满整个画布。

问题就出在这里：整个世界地图的边界范围太宽了，东西向跨了360度，中国所在的东经73度到135度这一段，在整个跨度里只占中间偏右的一小块。当整张世界地图被压缩进画布时，中国自然就被挤到了右侧，而地图的中心点会落在经度0度附近——也就是大西洋上空。很多人第一次看到这个结果，第一反应是去翻注册代码，怀疑是不是world.js的数据有问题，其实数据没毛病，纯粹是没有设置“观察视角”。

1.2 常规操作为什么都不靠谱

既然默认位置不对，常见的补救办法是让用户手动拖拽，或者在地图上加个按钮让用户点击后通过dispatchAction回到中国位置。这两种方案看着省事，实际上在项目里都很难用。

手动拖拽的问题在于，每次刷新页面都要重新拖一次，给客户的演示体验很差。按钮复位的方式稍微好一点，但本质上是把问题后置了，用户打开大屏的第一眼看到的仍然不是中国为中心。还有人会想到直接去修改world.js源码，把经纬度坐标整体往左偏移，这种做法伤害很大，地图区域之间的相对位置会被改乱，标签对不齐，点位偏移得让人抓狂，不到万不得已真的别碰。正确做法是用ECharts提供的center和zoom配置，把地图的视角直接拉到中国区域。

2. world.js从哪里拿、怎么注册才不出错

2.1 不同来源的地图数据文件差异

首先要明确一点，ECharts从5.0版本开始，官方包就不再内置地图数据了。也就是说，你从npm装一个最新的echarts，里面是找不到world.js的。网上搜出来的world.js大多是适配ECharts 4.x时代的老版本，它内部自带了一段注册逻辑，只要用script标签引入就能用。如果你项目里还是ECharts 4.x，直接按老方式引入没有问题。

但如果用的是ECharts 5.x，就需要手动加载地图数据并调用echarts.registerMap('world', data)来注册。加载方式有两种：一种是直接找JSON格式的world.json通过fetch或axios异步获取；另一种是用script标签引老版本world.js。要注意的是，老版本world.js在5.x下虽然能用，但它的GeoJSON数据精度和边界细节相对粗糙，在某些高分辨率大屏上会显得边缘锯齿明显，有条件的话建议直接拿规范的GeoJSON数据。

数据源方面我建议优先选择阿里云DataV的GeoAtlas，它提供了按国家/地区拆分的GeoJSON，数据更新及时，准确性也高。其次是npm上维护的echarts-map-json这类社区包。不要随便从不知名网站下载地图文件，那些数据可能是几年前从某个老项目里扒出来的，少几个岛屿区域是小事，国家边界画错了就是大事。

2.2 registerMap注册流程的关键细节

无论是JSON还是JS格式，最终都要走注册这一步。JSON格式的注册代码如下：

import * as echarts from 'echarts'; import worldJson from './world.json'; // 注册地图数据，第一个参数是地图名称，setOption时要用同一个名称 echarts.registerMap('world', worldJson);

这里最容易被忽略的是，注册名必须和setOption里使用的名称完全一致。我见过有人在registerMap里写的是'world'，在setOption里写的是'World'或者'worldMap'，结果地图区域一个都渲染不出来，控制台也不报错，排查半天才意识到是两个名称不匹配。

另外，如果项目里用的是script标签的引入方式，会存在一个加载顺序的问题：必须先加载echarts.min.js，再加载world.js。因为老版本world.js内部会直接调用echarts.registerMap来完成注册，如果此时echarts对象还没挂到window上，就会抛出echarts is not defined。这种问题在本地开发环境可能不一定会出现，一到线上部署，加载慢或者缓存顺序不一致就容易翻车。稳妥的做法是使用动态import或者统一通过JSON方式加载，让代码来控制注册时机。

3. center和zoom的取值逻辑：让中国“居中”的两种理解

3.1 理解一：整个世界地图完整显示，中国位于视觉中心

“以中国为中心”这个需求，不同语境下其实是两种完全不同的效果。

第一种是“整张世界地图都要露出来，中国放在画布的中间视觉焦点区域”。这种效果通常用在全球业务分布大屏上，需要同时看到各大洲，但视觉重心要落在中国。配置方式是这样的：

geo: { map: 'world', center: [104, 35], zoom: 1.6, roam: true }

center参数是一个经纬度数组，[经度, 纬度]。中国的几何中心大约在东经104度、北纬35度附近（大致在甘肃、陕西交界区域），把这里的经纬度作为center，地图就会以这个点为画布中心来展开。zoom的取值要根据你画布的实际宽高来定，宽1000px出头、高700px左右的容器，1.5到1.8是经验值，既不会让中国显得太扁，也不会把非洲和欧洲挤出画面太远。

3.2 理解二：加载世界地图，但打开就自动聚焦中国区域

第二种需求更常见：虽然加载的是世界地图，但页面打开后要把中国区域拉近放大，看起来就像直接显示中国地图一样，用户可以手动拖拽或缩放去看其他国家。这种效果适合那种“默认展示国内业务，同时也想看海外分布”的场景。

配置上center还是[104, 35]，但zoom要拉大不少，3到5都是可选的，取决于你希望中国区域在画布中占据多大面积。我自己的经验是，在1920x1080的大屏上，zoom设4.2左右，中国的轮廓正好铺满大部分画布，边界留有一定余量，视觉效果最舒服。如果你不确定该设多少，可以先用roam开启鼠标缩放，手动在页面上拖拽到满意的视角，然后在监听事件里把当前center和zoom打出来，填回配置里固化。这也是最直观的调试方式。

3.3 容器的宽高比会影响最终显示效果

还有一个很多人没注意的变量：容器宽高比。同样一组center和zoom，在方形容器和超宽屏上显示出来的中国位置会产生偏移。因为zoom是按比例同时缩放经纬度跨度的，如果容器很宽很扁，中国虽然横向居中，但上下会显得空旷；如果容器接近正方形，中国的位置会偏上偏下更明显。

这就需要一个动态适配的思路。基础的适配方式是按比例换算：以基准容器宽度算出一个基础zoom，然后根据实际容器宽度除以基准宽度，适当调整zoom的倍数。更省事的做法是监听resize事件后重新计算zoom，我用的伪代码逻辑是：

function calcZoom(containerWidth) { // 基准宽度1920时zoom为1.6，宽度每减少一半，zoom增加约0.4 return 1.6 + Math.max(0, Math.log2(1920 / containerWidth) * 0.4); }

这个公式不是官方算法，是我自己根据多个项目效果拟合出来的，经验值，但能保证大多数情况下中国不会跑偏。你可以按自己项目的实际视觉效果微调系数。

4. 地图数据亮起来：geo与series.map两种联动方式

4.1 geo组件和map系列怎么选

世界地图的视觉需求很少只是孤零零画一张底图，通常还要叠加数据。这时就要决定用哪一套配置体系。

geo组件定位是“地理坐标系底层容器”，适合用来做散点图、涟漪图、飞线图的底图。它的优势是地图和坐标系的职责分离，series里放scatter、effectScatter、lines等系列时，数据只要带经纬度，ECharts会自动映射到geo底图上，不需要额外指定坐标转换。

series里直接type: 'map'的方式则更适合做区域染色，比如按国家显示业务量高低，用visualMap控制颜色深浅。它的好处是数据直接通过name匹配国家名称，写起来最直观，但缺点是如果同时还要在地图上叠加飞线，配置会变得比较复杂，需要额外指定geoIndex来让飞线系列和地图共用同一个地理坐标系。

实际项目里我习惯的组合是：geo负责显示地图边界和视觉基底，series里的effectScatter或lines系列负责业务数据的动态效果，区域染色通过其他维度另外处理。这样地图作为“地理定位基础设施”的角色更清晰，后续维护起来也容易扩展。

4.2 涟漪散点效果怎么做才不抢戏

世界地图上加业务点位，最常用的就是effectScatter涟漪散点。配置上需要注意几个细节。

第一个是symbolSize，点位大小要根据zoom调整。世界地图缩放级别较低时，一个20像素的点在中国地图上可能只覆盖一个省，但放到世界地图上可能就遮住整个太平洋区域。所以不要把symbolSize写死，而是根据zoom做联动，zoom越大点位越大，反之则缩小。

第二个是涟漪效果的重绘粒度。如果数据点很多，几十个以上，全部开启涟漪会显得画面很乱。我的做法是让重点国家或Top级别的数据点用effectScatter，次要数据点用普通scatter，两层叠加，既保留视觉层次又不至于糊成一团。

series: [ { name: '重点标记', type: 'effectScatter', coordinateSystem: 'geo', data: [/* 带经纬度的数据 */], symbolSize: 12, rippleEffect: { brushType: 'stroke', scale: 3.5 } }, { name: '普通标记', type: 'scatter', coordinateSystem: 'geo', data: [/* 普通数据 */], symbolSize: 5 } ]

5. 一份开箱即用的完整示例（含代码）

5.1 完整代码示例

综合前面的知识点，给一份可直接复制运行的完整示例。这里使用ECharts 5.x配合JSON方式加载地图数据，用geo组件配合effectScatter做涟漪散点，中国作为中心出现。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>ECharts世界地图示例（中国为中心）</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #0b1a2a; } #mapChart { width: 100%; height: 100%; } </style> </head> <body> <div id="mapChart"></div> <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script> <script> // 说明：worldJson 可以从 DataV GeoAtlas 或相关地图数据源获取 // 这里为了示例直观，用 fetch 模拟异步加载 const worldJsonUrl = 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/json/world.json'; fetch(worldJsonUrl) .then(response => response.json()) .then(worldJson => { echarts.registerMap('world', worldJson); initChart(); }) .catch(err => { console.error('地图数据加载失败：', err); }); function initChart() { const chart = echarts.init(document.getElementById('mapChart')); const pointData = [ { name: '北京', value: [116.4, 39.9, 120] }, { name: '上海', value: [121.47, 31.23, 98] }, { name: '伦敦', value: [-0.12, 51.5, 66] }, { name: '纽约', value: [-74, 40.7, 52] }, { name: '新加坡', value: [103.8, 1.35, 45] } ]; const option = { // 深色背景贴合大屏风格 tooltip: { trigger: 'item', formatter: function (params) { if (params.seriesType === 'scatter') { return params.name + '：' + (params.value[2] || ''); } return params.name; } }, geo: { map: 'world', center: [104, 35], zoom: 1.8, roam: true, itemStyle: { areaColor: '#1a3d5c', borderColor: '#4d7eb3', borderWidth: 0.8 }, emphasis: { label: { show: false }, itemStyle: { areaColor: '#2c5c8f' } }, // 区域名称默认隐藏，鼠标移上再显示 label: { show: false } }, series: [ { name: '重点点位', type: 'effectScatter', coordinateSystem: 'geo', data: pointData, symbolSize: 12, rippleEffect: { brushType: 'stroke', scale: 3.5 }, itemStyle: { color: '#ffcf4d', shadowBlur: 10, shadowColor: '#ffcf4d' }, label: { show: true, position: 'right', formatter: '{b}', color: '#fff', fontSize: 12 } }, { name: '普通点位', type: 'scatter', coordinateSystem: 'geo', data: pointData, symbolSize: 5, itemStyle: { color: '#7ee6ff' } } ] }; chart.setOption(option); window.addEventListener('resize', function () { chart.resize(); }); } </script> </body> </html>

5.2 运行效果和参数微调方向

跑起来之后，右侧世界地图的中国区域应该正好处于画布视线焦点，周围分布着几个涟漪点位。想要调整中国在画布中的占比，主要改zoom；想要让中国上下位置更精准，微调center数组里的纬度值。我这里用的center是经验值，不是通过算法精确计算的，不同宽高比下你可以手动微调。

另外，如果地图加载出来所有区域都是同一个颜色，可以先检查一下GeoJSON的每个feature里是否包含name属性。有些地图数据源给的是英文名或当地语言名，和你的业务数据国家名对不上，会导致区域染色或tooltip显示不正常。解决办法是在注册前对数据做一次名称映射，统一替换成你系统里用的标准国家名。

6. 实际项目里最容易踩的坑排名，我替你先趟一遍

6.1 地图加载白屏的排查顺序

世界地图白屏这个问题，出现频率不低。我遇到过的原因按概率排序如下：

第一，registerMap没有在地图初始化之前完成。异步加载JSON时，fetch还在返回的路上，代码就已经执行到setOption，此时注册表里没有world这张地图，渲染结果就是空白。解决方向不是把setOption延迟，而是把初始化逻辑放到fetch的then回调里，像上面的示例代码一样。

第二，地图名称不匹配。注册名和setOption用的名称大小写或拼写不一致，ECharts不会报错，只会默默不画。刚才提过，这里必须再强调一遍。

第三，DOM容器尺寸为0。很多组件是初始display:none，或者父容器flex布局还没撑开，此时echarts.init拿到的容器宽高都是0，画出来就是空白。最常见于Tab切换页签里的图表，解决办法是在容器可见之后主动调用chart.resize()。

有人说地图白屏是不是echarts版本问题，我实际排查下来版本导致的白屏相对少见，更多还是上面三种情况。

6.2 点位经纬度偏移

世界地图上叠加散点，经纬度数据本身错了，点位就会跑到海里去。这个看似低级的问题，原因是经纬度顺序搞反了。GeoJSON标准以及ECharts的value数组里，统一是[x, y]也就是[经度, 纬度]。但很多业务系统里给的数据是“纬度, 经度”，尤其是接手别人接口时最容易踩坑。拿到数据后先看一个国家比如北京的经纬度，如果出现[39.9, 116.4]这样的顺序，多半就是反了，写个map函数swap一下就行。

另外一个隐蔽的坑是：部分散点值不是[经度, 纬度]格式，而是直接传了[经度, 纬度, 数值]，ECharts识别前两位做坐标定位，第三位是数值，这个顺序也不能乱。

6.3 响应式放大缩小之后中心点偏了

我做项目时遇到过这样一个问题：窗口尺寸改变后调用chart.resize()，地图确实跟着变了，但原来居中的中国区域不再居中，整体向右下角偏出了一段距离。原因是容器宽高比例改变后，视口中心和经纬度中心的对应关系被重新计算了。特别是从宽屏切到窄屏，中国会明显往左偏。

应对方案前面提到过，监听窗口变化后，不仅要resize，还要根据新的容器宽高重新计算center和zoom，再通过chart.setOption更新。如果把地图组件封装成了Vue或者React组件，记得在组件的resize回调里同时触发这两个更新，不要只调用echarts自带的resize方法。

说到Vue项目，还有一点补充一下：如果你用的是Vue2项目且集成的是limeui这样的UI组件库，图表容器的高度经常会被组件自身的默认样式覆盖。建议显式给图表容器设置一个高度，或者用calc()计算剩余高度，避免echarts初始化时拿到高度为0的值。

6.4 大屏适配时的字体和标注大小

地图上的国家名称、点位label，在大屏适配时也要跟着缩放。很多大屏项目用rem方案，但ECharts canvas里的文字标注默认用px，不会跟随html的font-size变化。我的做法是在resize回调里根据屏幕宽度换算出一个scale系数，动态设置label的fontSize。

具体的换算逻辑不复杂：取设计稿基准宽度1920，当前宽度和1920的比值就是scale系数，label的fontSize乘以这个系数后重新setOption。如果只是普通后台页面而非大屏，也可以不处理，用户浏览器缩放或页面宽度变化时，ECharts自带的resize已经能满足大部分需求。

关于世界地图数据的一个补充建议

不同来源的GeoJSON，数据的精细程度差别很大。有的世界地图数据里外蒙古和中国的边界非常粗糙，有的连一些太平洋小岛国都缺失，做点位展示时就会出现数据存在但地图上找不到区域的情况。

我一般是准备两套地图数据：展示世界全貌用通用world.json，对某个区域需要精细展示时再动态加载该区域的精细GeoJSON叠加到geo组件上。比如用户点击某个国家，就让地图平滑移动到该国家并放大，用registerMap注册该国精细地图后重新绘制。这种交互在ECharts里是支持动态切换的，只要重新调用registerMap并setOption新的地图名称就行。

最后分享一个调试技巧：ECharts地图相关配置弄不清楚的时候，把roam设为true，自己在页面上把地图拖到想要的位置、缩放到合适的级别，然后在控制台里用chart.getOption().geo[0].center和chart.getOption().geo[0].zoom打印出当前视角的准确参数，拿回配置里直接固化。这套方法比对着文档猜参数值效率高得多，我在好几个大屏项目里都是这么快速定下初始视角的。

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