ECharts世界地图以中国为中心：配置方法与避坑指南

简介：这份资源是面向数据可视化开发者与前端工程师的 ECharts 世界地图定制文件，核心在于将世界地图的默认中心调整为中国，便于在展示涉及中国及周边区域的数据时获得更直观的全球视角。压缩包共 420 个文件，以 380 个 json 地图数据与 40 个 js 脚本为主，json 负责存储各国家、省份及城市的坐标与属性信息，js 则提供地图加载与配置逻辑，整体约 4.34MB。内容涵盖以中国为中心的世界地图脚本，以及中国省级、市级行政区域的地图数据，可支撑从全球到省市的多层级地图绘制。目前已有 3155 人学习下载，适合需要快速接入地图图表、关注中国区位展示的分析类项目参考使用，能帮助读者省去自行整理地图数据与中心点配置的环节，直接用于数据绑定与交互样式调整。

1. 以中国为中心的 ECharts 世界地图：一个被低估的默认视角问题

做数据大屏的人迟早会撞上这个需求：世界地图要展示全球业务分布，但默认的 ECharts 世界地图把美洲放在左边、中国挤在右侧边缘，投到会议室大屏上，老板第一眼看到的是大西洋而不是亚太。这不是审美问题，是信息层级问题——你的数据重心在东亚，地图却把视觉重心给了西半球。

world.js是 ECharts 生态里常用的世界地图 GeoJSON 注册文件，配合geo或series-map使用。默认投影下经度 0 度居中，中国落在东经 73° 到 135° 之间，视觉上偏右。要把它变成"以中国为中心"，核心动作是调整地图的投影中心经度，让东经 105° 附近成为画面中轴。这件事听起来简单，但涉及 GeoJSON 数据、ECharts 配置、投影参数三层，每一层都有坑。下面按"先搞懂数据长什么样、再动手改、最后排错"的顺序讲透。

2. world.js 的数据结构与投影中心到底改的是哪一层

2.1 GeoJSON 里没有"中心点"这个字段

很多人第一反应是去world.js里找一个叫center或centeroid的属性改掉。打开文件你会发现，它就是一个标准 GeoJSON 的FeatureCollection，每个国家是一个Feature，几何数据在geometry.coordinates里，属性在properties里，通常只有name字段。没有任何字段控制"地图中心"。

// world.js 的典型结构（节选，非完整文件） { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "China" }, "geometry": { "type": "Polygon", "coordinates": [[[73.0, 39.0], [135.0, 48.0], /* ... */]] } } // ... 其余国家 ] }

逻辑说明：coordinates是经纬度数组，顺序是[经度, 纬度]。ECharts 拿到这份数据后，会按自己的投影规则把经纬度映射到画布像素。所以"中心"不在数据里，在渲染配置里。

参数说明：properties.name是地图区域名，series-map的name和它对应才能匹配数据。如果你要按国家上色，data里的name必须和这里完全一致，大小写、空格都算。

2.2 ECharts 的 geo 配置才是控制视角的开关

真正决定地图怎么摆的是geo组件或series-map的center和zoom。center接收一个[经度, 纬度]数组，表示把哪个经纬度点放到画布正中央。

// 以中国为中心的 geo 配置 option = { geo: { map: 'world', // 对应 registerMap 时注册的名字 center: [105, 35], // 东经105度、北纬35度放到画布中心 zoom: 1.2, // 缩放级别，1 是默认 roam: true, // 允许鼠标拖拽和滚轮缩放 itemStyle: { areaColor: '#0b1a2b', borderColor: '#1e4a6e' }, emphasis: { itemStyle: { areaColor: '#1e4a6e' } } }, series: [] };

逻辑说明：center: [105, 35]是把中国地理中心附近推到画面正中。为什么是 105 而不是北京的 116？因为要让整个亚太（含东南亚、日韩）都在画面内，取偏西一点更平衡。zoom设为 1.2 是轻微放大，让中国不至于太小。

参数说明：center的经度每增加 1 度，地图整体向左移动约一个像素级距离（取决于画布宽度和 zoom）。zoom大于 1 放大，小于 1 缩小。roam: true打开后用户可以自己拖，但大屏场景通常关掉，避免误操作。

2.3 注册地图这一步不能漏

world.js不会自动生效，必须先注册。

import * as echarts from 'echarts'; import worldJson from './world.js'; // 假设 world.js 导出的是 GeoJSON 对象 // 注册地图，名字叫 'world' echarts.registerMap('world', worldJson); // 之后 geo.map 或 series.map 写 'world' 才能对上

逻辑说明：registerMap的第一个参数是自定义名字，第二个是 GeoJSON 数据。注册名和配置里的map字段必须一致，否则地图区域是空白，控制台可能只报一个很含糊的警告。

参数说明：如果world.js是用export default导出的对象，直接传；如果是module.exports，注意构建工具的兼容处理。有些版本的world.js是纯 JSON 字符串，需要JSON.parse一次。

3. 从零跑通一个以中国为中心的世界地图

3.1 最小可运行页面

先不接框架，用最朴素的 HTML 加 CDN 方式验证效果，排除构建工具的干扰。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>世界地图-中国中心</title> <!-- 引入 ECharts --> <script src="https://cdn.example.com/echarts.min.js"></script> <!-- 引入 world.js，它内部会调用 registerMap 或暴露全局变量 --> <script src="./world.js"></script> </head> <body> <div id="map" style="width: 100vw; height: 100vh;"></div> <script> var chart = echarts.init(document.getElementById('map')); var option = { backgroundColor: '#06101c', geo: { map: 'world', center: [105, 35], zoom: 1.2, roam: false, label: { show: false }, itemStyle: { areaColor: '#0b1a2b', borderColor: '#1e4a6e', borderWidth: 0.8 }, emphasis: { label: { show: true, color: '#fff' }, itemStyle: { areaColor: '#163a5c' } } }, series: [] }; chart.setOption(option); window.addEventListener('resize', function () { chart.resize(); }); </script> </body> </html>

逻辑说明：geo组件单独存在时不显示数据，只显示底图。series为空数组是合法的，地图照样渲染。resize监听保证窗口变化时画布自适应。

参数说明：backgroundColor是画布底色，深色底更适合大屏。borderWidth太大会让国界线糊成一团，0.8 左右比较克制。emphasis.label.show设为 true 后鼠标悬停才显示国家名，避免默认满屏文字。

3.2 叠加业务数据：用 series-map 还是 geo + scatter

两种常见做法，选错了后面很别扭。

如果只是给不同国家上不同颜色，用series-map最直接：

option = { geo: { map: 'world', center: [105, 35], zoom: 1.2, roam: false, itemStyle: { areaColor: '#0b1a2b', borderColor: '#1e4a6e' } }, series: [ { type: 'map', geoIndex: 0, // 关键：复用上面 geo 的投影和位置 data: [ { name: 'China', value: 120 }, { name: 'Japan', value: 80 }, { name: 'United States', value: 200 } ] } ], visualMap: { min: 0, max: 200, inRange: { color: ['#0b1a2b', '#1e4a6e', '#3a8fd4'] }, left: 20, bottom: 20 } };

逻辑说明：geoIndex: 0让series-map复用geo组件的坐标系，这样center和zoom只写一次，不会出现底图和色块错位。visualMap根据value自动映射颜色。

参数说明：data里的name必须和 GeoJSON 的properties.name完全一致。United States不能写成USA或UnitedStates，否则那个国家不会上色，而且不报错，这是最常见的翻车点。

3.3 用散点标出具体城市

城市级数据需要自己提供经纬度，ECharts 不会内置。

series: [ { type: 'effectScatter', coordinateSystem: 'geo', data: [ { name: '北京', value: [116.4, 39.9, 100] }, { name: '新加坡', value: [103.8, 1.3, 60] }, { name: '悉尼', value: [151.2, -33.9, 40] } ], symbolSize: function (val) { return Math.sqrt(val[2]) * 2; // 第三位是数值，开方后控制大小 }, itemStyle: { color: '#3a8fd4' }, rippleEffect: { scale: 3 } } ]

逻辑说明：coordinateSystem: 'geo'表示散点用 geo 的经纬度坐标系。value数组前两位是经纬度，第三位是业务数值。symbolSize用开方是为了让大小差异更平滑，不然大值会大得离谱。

参数说明：rippleEffect.scale控制涟漪扩散范围，3 是中等。effectScatter比普通scatter多了动画，大屏上更抓眼，但点太多会卡，超过 200 个点建议换回scatter。

4. 避坑：以中国为中心时最容易踩的五个问题

4.1 地图整体偏移，中国不在正中间

现象：设了center: [105, 35]，但中国还是偏右，或者整个地图跑到画布外。

原因：center的生效前提是geo或series-map的layoutCenter和layoutSize没有冲突设置。如果同时写了layoutCenter: ['50%', '50%']和center，两者会打架，实际以layoutCenter为准。

解决：二选一。要精确控制经纬度中心就用center，不要写layoutCenter；要按画布百分比定位就用layoutCenter，把center删掉。

4.2 国家名对不上，色块不显示

现象：series.data里写了数据，但地图上没有任何颜色变化，控制台也不报错。

原因：GeoJSON 里的properties.name和你写的name不一致。常见差异：United StatesvsUnited States of America、RussiavsRussian Federation、South KoreavsKorea。

解决：先打印出所有可用名称。

// 在注册地图后，打印所有区域名 echarts.registerMap('world', worldJson); // 通过 getMap 获取已注册的地图信息 var mapInfo = echarts.getMap('world'); console.log(mapInfo.geoJson.features.map(function (f) { return f.properties.name; }));

逻辑说明：getMap返回注册时的地图对象，geoJson.features是原始要素数组。把名字列出来，和你数据里的name逐一比对。

参数说明：不同来源的world.js命名习惯不同，有的用英文全称，有的用缩写。没有统一标准，只能以你手上这份文件为准。

4.3 缩放后边界模糊或锯齿

现象：zoom调到 2 以上，国界线变得毛糙，文字也糊。

原因：ECharts 的 GeoJSON 是矢量，但画布渲染在缩放时如果devicePixelRatio没处理好，会出现插值模糊。

解决：初始化时显式传入像素比。

var chart = echarts.init(document.getElementById('map'), null, { devicePixelRatio: window.devicePixelRatio || 2 });

逻辑说明：devicePixelRatio告诉 ECharts 用几倍像素渲染，高分屏上设 2 或 3 能明显改善边缘。

参数说明：设太高会增加 GPU 负担，大屏一体机通常 1 到 2 就够，4K 屏可以到 2。

4.4 roam 打开后用户拖走回不来

现象：大屏交付后，有人手贱拖了一下，地图跑到角落，不知道怎么复位。

原因：roam: true允许自由拖拽和缩放，没有内置复位按钮。

解决：大屏场景直接roam: false。如果确实需要交互，加一个复位按钮，调用chart.setOption重新设center和zoom，或者用chart.dispatchAction重置。

// 复位按钮逻辑 document.getElementById('reset').addEventListener('click', function () { chart.setOption({ geo: { center: [105, 35], zoom: 1.2 } }); });

逻辑说明：重新setOption会覆盖之前的center和zoom，相当于复位。

参数说明：如果roam是 true，用户缩放后的状态不会自动同步到 option，复位时必须显式写回初始值。

4.5 和 series-map 同时用时底图重复

现象：地图上出现两层国界线，颜色叠加后变深，或者鼠标悬停触发两次高亮。

原因：geo组件和series-map各自渲染了一遍地图。series-map默认会创建自己的坐标系，除非指定geoIndex。

解决：要么只用geo加scatter，要么用series-map时加geoIndex: 0复用geo。不要两个都独立配置。

5. 进阶：让中国中心的世界地图真正好用

5.1 用 projection 微调形变

ECharts 默认用类似墨卡托的投影，高纬度地区会被拉伸。如果你要展示的业务集中在北半球，可以考虑在注册地图前对 GeoJSON 做预处理，或者用geo.projection（部分版本支持）切换投影方式。但大多数业务场景下，默认投影加center调整已经够用，不必过度工程。

5.2 南海诸岛的显示处理

标准world.js对中国区域的几何数据可能不包含南海诸岛的细节。如果业务涉及南海，需要换用更精细的 GeoJSON 数据源，或者在geo上叠加一个专门的中国地图series。常见做法是：世界地图用geo做底，中国区域单独用一份高精度 GeoJSON 注册成china-detail，用series-map叠加，geoIndex指向世界地图的 geo，保证位置对齐。

// 叠加中国精细地图（示意） echarts.registerMap('china-detail', chinaDetailJson); option.series.push({ type: 'map', map: 'china-detail', geoIndex: 0, // 对齐世界地图的投影 data: chinaData, itemStyle: { areaColor: 'transparent', borderColor: '#3a8fd4' } });

逻辑说明：areaColor: 'transparent'让精细地图只显示边界，不遮挡底图颜色。geoIndex: 0保证它和世界地图用同一套投影参数。

参数说明：两份 GeoJSON 的坐标系必须一致（都是 WGS84 经纬度），否则叠加后会错位。

5.3 一个验证中心点是否准确的小技巧

不确定center设多少合适时，先放一个已知经纬度的散点，看它是否落在画布正中。

// 临时验证：在 center 指定的位置放一个红点 series: [{ type: 'scatter', coordinateSystem: 'geo', data: [{ name: 'center-check', value: [105, 35] }], symbolSize: 10, itemStyle: { color: 'red' } }]

如果红点不在画面正中，说明center没生效，回去检查layoutCenter是否冲突。确认后把这个临时 series 删掉。

我自己的习惯是：每次调center都先留这个红点，调完再删。有几次偷懒没留，结果layoutCenter的残留配置让地图偏了半个屏幕，排查了半小时才想起来。这个红点就是地图调试的后悔药，几秒钟的事，能省掉大量玄学排查。希望帮到你。

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