简介：面向需要在地图上展示全球数据的前端开发者与数据可视化爱好者，这份zip压缩包提供了一套可直接集成的ECharts世界地图资源，合计77个文件，其中39个JS文件用于图表逻辑与交互控制，38个JSON文件保存了GeoJSON格式的国家边界与地理坐标数据，整体仅3.42MB，轻量易加载。已有1639人学习下载。包内除了核心的echarts.js，还包含macarons等经典主题配置，开发者可直接引入后渲染交互式世界地图，实现缩放、平移、点击提示、visualMap颜色映射等功能，无需额外处理复杂的地图数据格式。配套的JSON地理数据覆盖全球主要国家和地区，可直接对应配置项的data数组进行数值填充。使用时可参考资源内典型示例，快速掌握从echarts.init初始化、series地图类型设置到setOption渲染的完整链路，并在此基础之上扩展自定义标注、动态效果等，适合从入门图表展示到多维数据地理分布分析等多种应用场景，是搭建专业地理数据可视化页面的实用工具包。
1. ECharts世界地图js：为什么地图数据要自己找
做可视化大屏遇到世界地图需求，很多人第一反应是打开ECharts官方示例，复制一段world地图配置。但到了自己的项目里，地图往往不显示，或者只显示一片空白。这不是ECharts本身的问题，而是从ECharts 5开始，官方包内不再内置地图数据，世界地图的GeoJSON、JS数据文件需要单独获取和注册。你拿到的这份ECharts世界地图js资源，核心就是解决这件事——里面包含可直接引用的世界地图数据、注册方式，以及配套的配置示例，省去你自己去各个源站翻找、裁剪、适配坐标系的时间和精力。适合正在做大屏报表、需要快速把世界地图跑起来的开发者，也适合想搞清楚地图数据加载链路、避免后续维护踩坑的前端工程师。搞清楚数据从哪来、注册到哪、配置怎么写，后面再换区域、改样式、接数据都顺理成章。
2. 数据源选型：GeoJSON与内置JS的差异和取舍
2.1 ECharts地图的底层逻辑：坐标系与GeoJSON的关系
ECharts里画世界地图，本质上是在一个笛卡尔平面上根据GeoJSON的坐标串绘制多边形。GeoJSON里用经纬度表示边界点，ECharts拿到后通过projection逻辑映射到画布。所以数据源核心必须是一个合法的GeoJSON对象，或者一个导出了该对象并调用registerMap注册的JS文件。
常见的世界地图数据无非两种形态。第一种是纯GeoJSON文件，通常以world.json、world.geo.json命名，里面是FeatureCollection结构，每个Feature代表一个国家或地区，properties里往往带name这类字段。第二种是JS文件，形如world.js，内部会有一段类似{"type":"FeatureCollection",...}的结构，或者直接调用注册方法。区别在于：JSON文件需要你自己fetch或import后再注册，JS文件一般是在引入script标签后就自动完成注册，或者暴露一个全局变量由你手动注册。
我一般建议优先选纯GeoJSON。理由很简单：纯数据文件不跟运行时机绑定，你在Vue、React、原生JS里都能通过fetch或import加载，注册时机自己把控；而JS文件如果是ECharts 4时代那种require('echarts')后直接注册的写法，放在现代打包环境里很容易报错。这份资源里两种形态通常都覆盖了，优先用JSON。
2.2 坐标系与归一化：为什么有的地图变成一团糊
还有一个容易被忽略的坑：数据坐标系。绝大多数世界地图GeoJSON用的都是WGS84经纬度坐标，这对ECharts来说是最标准的输入。但有些第三方源会给你投影后的坐标，或者数据里混着负值、异常大值，画出来要么缩成一团，要么图形严重变形。
判断方法很简单：打开GeoJSON文件，看坐标数组里第一对值大致在什么范围。WGS84的经度范围是-180到180，纬度范围是-90到90。如果看到几百上千的值，说明这份数据是投影过的，不能直接用，需要先做投影反算或者换数据源。
另外注意数据是否经过归一化。有的源站会把地图数据裁切到一张固定大小的画布坐标系里（比如0到1000），跟经纬度差着量级。这种数据即便能显示，后续你做散点图、飞线图时，经纬度坐标坐标的映射也会完全对不上。所以拿到资源后，第一步不是写代码，而是先打开检查坐标值域。
提示：验证数据是否可用，最快的办法是直接用
JSON.parse读取，然后打印features[0].geometry.coordinates[0][0]看一下首对坐标的数值范围。
2.3 文件格式选择：script标签、import与fetch的适用场景
回到这份资源的使用方式。如果你是PC端大屏，页面是纯HTML引入script的写法，可以直接加载world.js，让它自动注册，然后马上配置option。但如果你的项目是Vite、Webpack这类工程化环境，我更建议用import方式引入JSON：
import worldGeoJson from '../assets/map/world.json' echarts.registerMap('world', worldGeoJson)这里的关键是registerMap的第一个参数是你自己定的地图名，第二个参数必须是GeoJSON对象。很多人在工程化项目里直接<script>引JS文件，结果发现全局变量根本没暴露，或者暴露的时机晚于图表初始化，就会报“地图未注册”的错误。
如果是异步加载，就用fetch：
fetch('./map/world.json') .then(res => res.json()) .then(geoJson => { echarts.registerMap('world', geoJson) initChart() })这种方式的好处是地图数据不会阻塞首屏渲染，适合大屏启动时要先拉登录态、用户信息等接口的场景。坏处是你要处理加载失败的兜底逻辑，不然地图区域空白。
选择哪种加载方式，取决于你的项目结构。旧式多页应用用script标签最省事；单页应用用import或fetch更符合模块化管理。这份资源里如果两种文件都有，别犹豫，工程化项目选JSON那个。
3. 注册与渲染：从引入文件到屏幕上的世界地图
3.1 第一步：注册地图与容器初始化
拿到数据、确定加载方式后，注册很简单，但有一个顺序问题必须遵守：先注册地图，再初始化图表实例，最后设置option。反过来会报错或者地图区域什么都不显示。
import * as echarts from 'echarts' import worldGeoJson from '../assets/map/world.json' // 1. 注册地图，名称自己定义，后续series和geo都引用这个名称 echarts.registerMap('world', worldGeoJson) // 2. 初始化实例，绑定到已经设置好宽高的DOM容器 const chart = echarts.init(document.getElementById('mapContainer')) // 3. 配置option const option = { geo: { map: 'world', roam: true, itemStyle: { areaColor: '#1a2b4a', borderColor: '#4a7dbd' } } } chart.setOption(option)在这段代码里，registerMap的第二个参数直接是解析后的GeoJSON对象，注意不是字符串。如果你用fetch拿到的是纯文本，一定要先JSON.parse再传给registerMap，这是最常见的报错来源之一。
geo组件是ECharts里专门用于绘制地图的独立组件，它和series-map的区别在于：geo只管底图展示，不跟数据绑定；series-map则是地图和数据联动，每个区域的颜色、数值都由series.data控制。如果只是想先看到一张干净的世界地图，用geo就够了。后面要做数值分级渲染，再说series。
3.2 第二步：基础视觉参数与区域命名规则
地图显示出来后，一般会先调底图样式。常用的参数集中在itemStyle和emphasis里。
const option = { geo: { map: 'world', roam: true, // 允许缩放和平移 zoom: 1.2, // 初始缩放倍数 center: [0, 20], // 初始视角中心，[经度, 纬度] itemStyle: { areaColor: '#0f1f3d', // 区域填充色 borderColor: '#3c6ea5', // 边界线颜色 borderWidth: 0.6, // 边界线粗细 shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 shadowBlur: 10 }, emphasis: { itemStyle: { areaColor: '#2a5f8f' // 鼠标悬停时的区域高亮色 }, label: { show: true, color: '#fff' } } } }roam接受布尔值或者'scale'、'move'，分别表示是否开启缩放、拖动。大屏场景一般设成true就行，但如果你做的是固定视角的静态展示，关掉会更稳定，避免用户误拖后回不来。
关于区域命名要特别说一句：geo组件不依赖数据时，区域名称来自GeoJSON的properties里的name字段。这份世界地图数据里，国家名大概率是英文，少数源会带中文name。如果你后续要做数据映射，比如data: [{ name: 'China', value: 88 }]，这里的name必须与GeoJSON里的name完全一致，大小写、空格都不能差。很多飞线图点了不显示，就是国家和名字匹配不上。
3.3 第三步：tooltip与数据绑定的前期准备
地图搭配tooltip展示数值是常规操作。用series-map而不是纯geo是实现数据绑定的关键。
const option = { tooltip: { trigger: 'item', formatter: function(params) { return params.name + ': ' + (params.value || '暂无数据') } }, series: [{ type: 'map', map: 'world', roam: true, data: [ { name: 'China', value: 141.2 }, { name: 'Russia', value: 144.8 }, { name: 'Canada', value: 38.2 } ] }] }这时候series-map里的map字段指向你registerMap时定义的名字。tooltip的params.name取的是当前鼠标所在区域的名字，value则是data数组里匹配到的对应值。如果某个区域在data里没有对应项，value就是undefined，formatter里要做兜底显示。这一步把底图和数据打通之后，后续换数据源、加飞线、做涟漪效果，都基于这一层结构展开。
提示：调试阶段可以临时加一行
console.log(params)在formatter里，看看每个区域返回的字段到底有哪些，对排查很有帮助。
4. 业务落地：浦染地图与飞线可视化的参数配置
4.1 数值浦染场景：series-map的分级色彩映射
纯地图底图没有业务含义，真正用在报表里最频繁的是浦染地图，按数值大小给不同国家上深浅不同的颜色。ECharts里做这个不需要引入额外库，靠visualMap组件就行。
const option = { tooltip: { trigger: 'item' }, visualMap: { type: 'piecewise', // 分段型，也可换 continuous 连续型 min: 0, max: 200, left: 20, bottom: 20, textStyle: { color: '#ccc' }, inRange: { color: ['#0f1f3d', '#1f5f8f', '#3fa7d6', '#7fd0d9'] // 低到高 } }, series: [{ type: 'map', map: 'world', data: countryData // [{ name: 'China', value: 141.2 }, ...] }] }type有两种：piecewise适合数据分布离散或者你需要明确分档阈值的场景，continuous适合连续渐变。大屏上通常用piecewise，因为可以明确标注出“多少以上是高值”，视觉上更直观。inRange.color数组的顺序是低值到高值，从左到右依次对应，不要写反了，不然低值反而最刺眼。
有个很容易踩的细节：visualMap的显示位置如果设置了left和bottom，在大屏不同分辨率下位置会漂移。我一般习惯放到图表的grid区域外，并且单独用一个div容器绝对定位放图例，而不是完全依赖visualMap自带的渲染位置。如果你做的是自适应大屏，建议在resize回调里重新计算位置，或者干脆不用visualMap的图例组件，自己画一个静态图例。
4.2 飞线地图场景：散点、涟漪与markLine的坐标体系
飞线图的业务需求很典型：从某个国家出发，箭头指向另一个国家，中间带一条有动画效果的曲线。这个功能在ECharts里用series-effectScatter画起点和终点、series-lines画飞线最顺手。
这里有个必须理解的概念：series-lines里每条线的coords坐标数组用的不是国家名，而是经纬度。所以你要么自己准备一份国家中心点的经纬度映射表，要么在地图初始化后通过ECharts的API取坐标。
const option = { geo: { map: 'world', roam: true, itemStyle: { areaColor: '#1a2b4a' } }, series: [ { type: 'lines', coordinateSystem: 'geo', data: [ { coords: [[116.40, 39.90], [-74.00, 40.71]] } ], lineStyle: { color: '#ffd700', width: 1.5, opacity: 0.8, curveness: 0.3 // 曲线弯曲程度 }, effect: { show: true, period: 4, // 动画周期秒数 trailLength: 0.4, // 拖尾长度 symbol: 'arrow', // 箭头样式 color: '#fff' } }, { type: 'effectScatter', coordinateSystem: 'geo', data: [ { name: '北京', value: [116.40, 39.90] }, { name: '纽约', value: [-74.00, 40.71] } ], symbolSize: 10, rippleEffect: { brushType: 'stroke', scale: 3 } } ] }关键点在这：series-lines的coordinateSystem必须设为'geo'，数据里是coords字段，里面的两点就是线段的起点和终点，顺序不要反。curveness越大线越弯，一般0.2到0.4看起来自然，太直像直线，太弯又显得夸张。effectScatter也是同样的coordinateSystem，但数据格式变成value: [经度, 纬度]，注意经纬度顺序，写反了会跑到非洲去。
飞线数据量大时有个性能注意点：effect的动画在每一帧都会重新计算路径，成百上千条线同时动画会明显卡顿。我一般把不重要的线去掉effect，只保留主要干线的动画，或者把period调成6到8秒降低刷新频率。
4.3 地图与数据更新的联动：setOption的正确姿势
业务场景里，地图底图通常不变，但上面的数据会每隔几秒刷新。很多人直接在setOption里整个替换option对象，结果地图重新渲染、飞线要重画，还会闪屏。正确做法是用merge方式局部更新。
// 首次初始化时全量设置 chart.setOption({ geo: { ... }, series: [ { type: 'map', map: 'world', data: countryData }, { type: 'lines', coordinateSystem: 'geo', data: [] } ] }) // 后续数据更新时只传变化的字段 chart.setOption({ series: [ { data: newCountryData }, { data: newLinesData } ] })注意，ECharts的setOption默认就是merge模式，不是覆盖模式。所以你第二次setOption时，只写series里的data字段，它会把原有配置合并更新。这里有个细节值得提醒：如果新数据里某个国家消失了，旧的国家颜色还会残留，因为它没有被覆盖。这种情况你需要将对应数据项置为null，或者重新全量设置geo的data。我处理这类问题时，一般先chart.clear()再重新setOption，毕竟大屏数据量不大，重建成本可控，反而逻辑更清爽。
另外，如果地图数据变化后你发现旧的飞线还在，多半是lines的data没被正确覆盖。检查一下是否在series里漏传了对应的索引，或者为了省代码直接用了同一个变量名，结果引用的是同一个数组对象，没有生成新数组。这个坑很低级，但确实出现频率不低。
5. 避坑手册：注册无效、坐标跑偏与加载失败的排查
5.1 registerMap重复注册导致样式错乱
现象：页面里有多个图表实例，都用了world地图。第一个实例显示正常，后面的实例区域颜色不对，或者边界错乱，甚至部分国家消失。
原因：同一份GeoJSON被重复注册到同一个地图名下，后面的注册覆盖了前面的。如果两次注册的数据源不同（比如一份来自本地裁剪后的JSON，一份来自CDN默认数据），后来者会让你所有实例都跟着变样。
解决：全局只注册一次，把registerMap放到模块初始化位置，而不是放进每个组件的初始化函数里。如果实在需要多份不同裁剪范围的地图，用不同的名字注册，比如world和world-simplified，实例分别引用各自的名字。
// 在应用入口统一注册 if (window.__worldMapRegistered) return echarts.registerMap('world', worldGeoJson) window.__worldMapRegistered = true用模块加载的话，直接利用模块缓存特性，在map.js文件里导出一个初始化函数，内部判断是否已注册过。这个做法在多页面大屏里尤其重要。
5.2 地图区域一片空白，控制台也没有报错
现象：option里geo配好了，map: 'world'也对，图表其他部分正常，就是地图区域空无一物。
原因：大概率是GeoJSON还没加载完成就执行了setOption。尤其常见于在Vue的created钩子里拉了接口数据，然后同步去初始化图表，但地图JSON是通过fetch异步拿的，时序上晚于setOption。
解决：把初始化动作放到fetch的回调里，或者用async/await包裹，确保registerMap执行完成后再初始化：
async function initMap() { const res = await fetch('./map/world.json') const geoJson = await res.json() echarts.registerMap('world', geoJson) const chart = echarts.init(document.getElementById('map')) chart.setOption(option) }还有一个隐蔽情况：生成的DOM容器display:none，图表初始化时宽度高度计算为0，导致地图画不出来。这种问题排查方式很简单，临时把容器display改成block，看看是不是这个问题。
5.3 散点位置跑到海里，经纬度对不上
现象：数据里的坐标明明是北京的纬度39.9、经度116.4，但散点跑到俄罗斯或者非洲去了，看起来完全是随机分布。
原因：第一种是经纬度写反。GeoJSON的顺序是[经度, 纬度]，但很多接口返回的顺序是纬度在前。第二种是地图数据本身不是WGS84坐标，而是做了某种投影变换。
解决：先固定测试一组已知坐标，比如北京就是[116.40, 39.90]，如果点位不在预期位置，先交换经纬度试试。如果交换后依然不对，逐层检查地图JSON坐标范围。我一般会写一小段脚本把GeoJSON里所有坐标的min/max打出来，看经度范围是否在-180到180之间。
function checkGeoRange(geoJson) { let minLng = Infinity, maxLng = -Infinity let minLat = Infinity, maxLat = -Infinity geoJson.features.forEach(f => { const coords = f.geometry.coordinates // 简单遍历，只处理Polygon和MultiPolygon const arr = f.geometry.type === 'Polygon' ? [coords] : coords arr.forEach(poly => poly[0].forEach(([lng, lat]) => { if (lng < minLng) minLng = lng if (lng > maxLng) maxLng = lng if (lat < minLat) minLat = lat if (lat > maxLat) maxLat = lat })) }) console.log('经度范围:', minLng, maxLng, '纬度范围:', minLat, maxLat) }打印结果如果经度范围在0到360，那是数据把西经表示成了大于180的值，需要做一次换算。如果范围在0到1000之类，说明数据不是经纬度坐标，趁早换数据源。
5.4 飞线不显示或者飞了一半消失
现象：series-lines配置了，coords也有数据，但页面上看不到飞线，或者线只画了一半。
原因：lines的终点坐标超出了GeoJSON定义的区域范围，或者飞线的首尾落在海面上。还有一种情况是data数组里的coords没写完整，少了一对坐标。
解决：先用effectScatter把coords里的点分别渲染出来，确认起点和终点都在陆地上。如果点位正常，接着检查lines的data结构，确保每项是{ coords: [...] }而不是裸数组。最后看lineStyle里的opacity和width，值太小人眼基本看不见。
飞线消失的另一个常见坑：zlevel设置高于geo组件的层级时，飞线会渲染在地图下面，被区域颜色盖住。我一般把series里的所有层统一不设zlevel，或者设同一个值，依靠series的声明顺序决定层级，省得出这类玄学问题。
5.5 地图在打包后生产环境加载失败
现象：本地开发环境一切正常，npm run build之后放到服务器上，地图区域空白，Network面板里提示JSON文件404。
原因：地图JSON被放在src/assets下通过import引入还好，但如果是用fetch请求相对路径，比如fetch('./map/world.json')，打包后文件路径变了，或者没有被打进dist目录。
解决：如果文件小，直接import当成模块资源处理。如果文件大，把地图JSON放到public目录，用绝对路径引用。我通常的做法是把地图JSON放在public/data/world.json，代码里写死/data/world.json，这样打包后路径不会变，CDN部署时也方便。注意文件名不要加哈希，因为fetch请求的路径是静态字符串。
6. 进阶技巧：地图瘦身与热更新
地图数据太大影响首屏加载是大屏项目的常见痛点。世界地图的GeoJSON原始文件动辄几百KB，实际使用中部分小岛国根本用不上。我一般会写一个随机抽稀脚本，把用不到的区域从features里过滤掉，再跑一遍数据压缩。
// 过滤掉不需要的国家，只保留features里name在名单中的区域 const fs = require('fs') const geoJson = JSON.parse(fs.readFileSync('world.json', 'utf-8')) const keepList = ['China', 'Russia', 'Canada', 'United States of America'] const filteredFeatures = geoJson.features.filter(f => { return keepList.includes(f.properties.name) }) const newGeoJson = { type: 'FeatureCollection', features: filteredFeatures } fs.writeFileSync('world-simplified.json', JSON.stringify(newGeoJson))过滤后如果文件还是大，考虑用地图抽稀工具对边界坐标做简化，把坐标点数量降下来。不过这里注意，抽稀力度过大会让国界线失真，飞线起飞降落点位落在外观边界之外。我一般把简化后边界与原始数据的偏差控制在10公里以内，肉眼看不出来，体积却能降一半以上。
实时数据联动的场景里，我还习惯在setOption前做一次数据合法性检查，筛掉null、NaN和超出经纬度范围的脏数据。这个习惯帮我在演示现场避开好几次数据接口异常导致的地图“地震”——所有点都飞到坐标系的角落堆成一团。从那以后，每次接新数据源，我都强制走一遍坐标范围校验和离线点位抽验，地图数据本身没问题了，剩下的就是业务数据的常态化治理。希望这些经验对你也有用，少踩几个我已经替你踩过的坑。
本文还有配套的精品资源，点击获取
