北京某科技公司想用echarts绘制自己的城市运营地图却发现官方只有全国地图束手无策这篇文章手把手教你从申请区域数据到完成自定义地图绘制全流程实战教程
前言：别慌，这问题太常见了
兄弟，你是不是也遇到过这种抓狂的情况——公司让做一个城市运营大屏，领导指着大屏说”这里要看到北京各个区的实时数据”，你打开ECharts官网示例一找，好家伙，全是什么”中国地图”“世界地图”，愣是找不到一个单独的”北京市地图”。
我当时也是，差点就想直接拿全国地图凑合算了，把北京那块放大。结果领导一看：”这北京怎么还带着河北呢？”
那一刻，我是真的绝望。
但后来我研究透了，发现这玩意儿其实就三步：找数据、注册地图、画图。今天我就把这整个过程掰开了揉碎了讲给你听，保证你看完就能上手，不用再到处求人了。
第一步：搞懂ECharts地图的原理
在你动手之前，你得先明白ECharts地图到底是怎么工作的。
ECharts本身并不内置所有地区的地图数据。它提供了一个框架，需要你自己提供地图的GeoJSON数据，然后告诉ECharts”这是我的地图”，它才能画出来。
你可以把GeoJSON想象成一张”电子地图底图”，它用一套标准的JSON格式，把某个区域的边界坐标、区县划分、地名信息全都描述清楚了。ECharts拿到这个数据，就能把这些多边形画到页面上。
所以，核心问题就变成了：北京的GeoJSON数据从哪儿来？
第二步：获取北京市的GeoJSON数据
2.1 推荐方案：直接下载现成的
说实话，大多数时候你不需要自己申请，因为已经有人帮你做好了。
我最常用的几个来源：
方案A：阿里云DataV.GeoAtlas（推荐）
这个网站是阿里开源的，专门提供中国各省市县区的GeoJSON数据，而且数据非常规范，跟ECharts的配合度极高。
访问地址：http://datav.aliyun.com/portal/school/atlas/area_selector
操作很简单：
- 在地图上点击”北京市”
- 在右侧面板选择你想展示的层级（北京市、区、街道）
- 点击下载GeoJSON
我下载了一个北京市全量的区县数据，文件大概300多KB，里面包含了北京市16个区（东城、西城、朝阳、海淀、丰台、石景山、顺义、通州、大兴、昌平、门头沟、房山、平谷、怀柔、密云、延庆）的完整边界。
方案B：高德地图开放平台申请
如果你需要的数据特别精准，或者需要最新的行政区划（比如某些区刚合并或拆分），可以去高德开放平台申请。
申请地址：https://www.amap.com/
进入高德开放平台后：
- 注册并登录账号
- 进入”控制台”，创建一个新应用
- 在应用里添加”web端(JS API)“类型的Key
- 使用高德提供的”区域查询”接口，输入”北京市”，可以获取到对应边界的坐标数据
不过说实话，高德的接口返回的是坐标点序列，还需要你自己转换成GeoJSON格式，比DataV麻烦不少。除非你有特殊需求，否则我不推荐普通场景用这个。
方案C：Natural Earth数据源（国际通用）
如果你需要更宏观的视角，或者做跨境地图，Natural Earth是个不错的选择：
- 网址：
https://www.naturalearthdata.com/ - 提供1:10m、1:50m、1:110m不同精度的全球边界数据
- 中国的省级和市级数据都有
2.2 验证你下载的GeoJSON是否可用
拿到GeoJSON文件后，别急着往代码里塞，先验证一下。
你可以用这个在线工具检查：https://geojson.io/
把下载好的文件拖进去，看看：
- 地图能不能正常渲染
- 北京16个区是不是都显示出来了
- 边界是否完整，有没有奇怪的缺口
我第一次用的时候就栽了一个跟头——下载的数据里，某个区的边界坐标顺序是反的，导致渲染出来有个区变成了”洞”。用工具检查一眼就能看出来。
第三步：注册自定义地图到ECharts
这是最关键的一步，很多人卡在这里就是因为不知道ECharts怎么”认识”你提供的地图。
3.1 基础注册方法
ECharts提供了一个全局方法 echarts.registerMap()，它就是用来告诉ECharts”这张地图叫这个名字，数据在这”。
// 假设你下载的文件叫 beijing.json，内容如下：
// {
// "type": "FeatureCollection",
// "features": [
// {
// "type": "Feature",
// "properties": { "name": "朝阳区", "adcode": "110105" },
// "geometry": { ... }
// },
// // 其他15个区...
// ]
// }
// 第一步：注册地图
// 第一个参数是地图名称（后面引用时用这个名字）
// 第二个参数是GeoJSON数据
echarts.registerMap('beijing', beijingGeoJSON);
3.2 完整的项目结构
让我们把整个项目搭起来。假设你的项目结构是这样的：
project/
├── index.html
├── js/
│ └── echarts.min.js // ECharts库（建议用4.x或5.x版本）
├── data/
│ └── beijing.json // 北京GeoJSON数据文件
└── css/
└── style.css
第四步：编写完整的地图绘制代码
4.1 基础版：只显示地图
先来个最简单的，让你看到地图亮起来。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京市运营地图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0d1b2a;
font-family: 'Microsoft YaHei', sans-serif;
}
#map-container {
width: 100vw;
height: 100vh;
position: relative;
}
#beijing-map {
width: 100%;
height: 100%;
}
/* 标题样式 */
.map-title {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
color: #00e5ff;
font-size: 28px;
font-weight: bold;
letter-spacing: 4px;
text-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
z-index: 10;
pointer-events: none;
}
</style>
</head>
<body>
<div id="map-container">
<div class="map-title">北京市城市运营监控中心</div>
<div id="beijing-map"></div>
</div>
<script src="js/echarts.min.js"></script>
<script>
// 初始化ECharts实例
const chartDom = document.getElementById('beijing-map');
const myChart = echarts.init(chartDom);
// 显示加载状态
myChart.showLoading();
// 异步加载GeoJSON数据
fetch('data/beijing.json')
.then(response => {
if (!response.ok) {
throw new Error('GeoJSON文件加载失败: ' + response.statusText);
}
return response.json();
})
.then(geoJSON => {
// 隐藏加载动画
myChart.hideLoading();
// 注册地图，名称为 'beijing'
echarts.registerMap('beijing', geoJSON);
// 配置项
const option = {
backgroundColor: '#0d1b2a',
tooltip: {
trigger: 'item',
formatter: '{b}',
backgroundColor: 'rgba(0,0,0,0.7)',
borderColor: '#00e5ff',
textStyle: { color: '#fff' }
},
// 视觉映射组件 - 根据数值自动变色
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
textStyle: { color: '#aaa' },
inRange: {
color: ['#0d1b2a', '#1a5276', '#2980b9', '#00e5ff']
},
calculable: true
},
series: [
{
name: '北京市各区数据',
type: 'map',
map: 'beijing', // 这里引用刚才注册的名字
roam: true, // 允许缩放和平移
zoom: 1.2,
label: {
show: true,
color: '#fff',
fontSize: 12
},
// 每个区域的样式
itemStyle: {
borderColor: '#00e5ff',
borderWidth: 1,
areaColor: '#1a3a5c'
},
// 鼠标悬停时的样式
emphasis: {
label: {
color: '#00e5ff',
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
areaColor: '#0a3d5c',
shadowBlur: 20,
shadowColor: 'rgba(0, 229, 255, 0.5)'
}
},
// 示例数据 - 实际项目中替换为真实数据
data: [
{ name: '朝阳区', value: 850 },
{ name: '海淀区', value: 720 },
{ name: '东城区', value: 450 },
{ name: '西城区', value: 480 },
{ name: '丰台区', value: 560 },
{ name: '石景山区', value: 230 },
{ name: '顺义区', value: 310 },
{ name: '通州区', value: 390 },
{ name: '大兴区', value: 420 },
{ name: '昌平区', value: 350 },
{ name: '门头沟区', value: 120 },
{ name: '房山区', value: 280 },
{ name: '平谷区', value: 95 },
{ name: '怀柔区', value: 150 },
{ name: '密云区', value: 80 },
{ name: '延庆区', value: 65 }
]
}
]
};
myChart.setOption(option);
})
.catch(error => {
myChart.hideLoading();
console.error('地图加载失败:', error);
// 降级方案：提示用户
myChart.setOption({
title: {
text: '地图数据加载失败，请检查 beijing.json 文件',
left: 'center',
top: 'center',
textStyle: { color: '#ff4d4d', fontSize: 18 }
}
});
});
// 响应式调整
window.addEventListener('resize', () => {
myChart.resize();
});
</script>
</body>
</html>
4.2 进阶版：叠加散点标记和流向线
光有地图是不够的，运营大屏通常需要展示具体点位和数据流向。
// 在上面的option中，追加更多series
const option = {
// ... 上面已有的配置 ...
series: [
// 系列1：地图底图
{
name: '北京市地图',
type: 'map',
map: 'beijing',
roam: true,
zoom: 1.2,
label: { show: true, color: '#fff', fontSize: 11 },
itemStyle: {
borderColor: 'rgba(0,229,255,0.4)',
borderWidth: 0.8,
areaColor: 'rgba(26,58,92,0.6)'
},
emphasis: {
label: { color: '#00e5ff', fontSize: 13 },
itemStyle: {
areaColor: 'rgba(10,61,92,0.9)',
shadowBlur: 15,
shadowColor: 'rgba(0,229,255,0.4)'
}
},
// 让某些区默认高亮（比如核心业务区）
selectedMode: 'single',
select: {
itemStyle: { areaColor: '#0a3d5c' },
label: { color: '#00e5ff' }
},
data: [
{ name: '朝阳区', value: 850 },
{ name: '海淀区', value: 720 },
{ name: '东城区', value: 450 },
{ name: '西城区', value: 480 },
{ name: '丰台区', value: 560 },
{ name: '石景山区', value: 230 },
{ name: '顺义区', value: 310 },
{ name: '通州区', value: 390 },
{ name: '大兴区', value: 420 },
{ name: '昌平区', value: 350 },
{ name: '门头沟区', value: 120 },
{ name: '房山区', value: 280 },
{ name: '平谷区', value: 95 },
{ name: '怀柔区', value: 150 },
{ name: '密云区', value: 80 },
{ name: '延庆区', value: 65 }
]
},
// 系列2：散点标记 - 代表各个运营站点
{
name: '运营站点',
type: 'effectScatter',
coordinateSystem: 'geo', // 使用地理坐标系
geoIndex: 0, // 关联到第一个series（地图）
symbolSize: function (val, params) {
// 根据数值动态调整点的大小
return Math.max(8, val[2] / 30);
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
scale: 3,
period: 4
},
hoverAnimation: true,
label: {
show: true,
formatter: '{b}',
position: 'right',
color: '#ffd700',
fontSize: 11
},
itemStyle: {
color: '#ffd700',
shadowBlur: 10,
shadowColor: '#ffd700'
},
emphasis: {
scale: true
},
data: [
// [经度, 纬度, 数值, 名称]
{ value: [116.48, 39.92, 95, '朝阳CBD站'], name: '朝阳CBD站' },
{ value: [116.31, 39.96, 88, '海淀中关村站'], name: '海淀中关村站' },
{ value: [116.41, 39.91, 76, '西城金融街站'], name: '西城金融街站' },
{ value: [116.28, 39.90, 65, '丰台科技园区站'], name: '丰台科技园区站' },
{ value: [116.49, 39.98, 72, '亚运村站'], name: '亚运村站' },
{ value: [116.63, 39.90, 58, '通州万达广场站'], name: '通州万达广场站' },
{ value: [116.19, 39.90, 45, '石景山游乐园站'], name: '石景山游乐园站' },
{ value: [116.58, 40.12, 40, '顺义城区站'], name: '顺义城区站' },
{ value: [116.22, 40.09, 55, '昌平回龙观站'], name: '昌平回龙观站' },
{ value: [116.34, 39.77, 48, '大兴亦庄站'], name: '大兴亦庄站' }
]
},
// 系列3：流向线 - 展示数据从各站流向市级中心
{
name: '数据流向',
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
polyline: false,
lineStyle: {
color: '#00e5ff',
width: 1,
curveness: 0.2,
opacity: 0.6
},
effect: {
show: true,
period: 4,
trailLength: 0.1,
symbol: 'arrow',
symbolSize: 5,
color: '#00e5ff'
},
data: [
// 从各站点流向市级指挥中心（假设在东城区）
{
coords: [
[116.48, 39.92], // 朝阳
[116.42, 39.92] // 市级中心
]
},
{
coords: [
[116.31, 39.96],
[116.42, 39.92]
]
},
{
coords: [
[116.41, 39.91],
[116.42, 39.92]
]
},
{
coords: [
[116.28, 39.90],
[116.42, 39.92]
]
},
{
coords: [
[116.49, 39.98],
[116.42, 39.92]
]
},
{
coords: [
[116.63, 39.90],
[116.42, 39.92]
]
},
{
coords: [
[116.19, 39.90],
[116.42, 39.92]
]
},
{
coords: [
[116.58, 40.12],
[116.42, 39.92]
]
},
{
coords: [
[116.22, 40.09],
[116.42, 39.92]
]
},
{
coords: [
[116.34, 39.77],
[116.42, 39.92]
]
}
]
},
// 系列4：市级中心高亮标记
{
name: '指挥中心',
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'pin',
symbolSize: 30,
label: {
show: true,
formatter: '指挥中心',
color: '#ff4757',
fontSize: 13,
fontWeight: 'bold',
position: 'bottom'
},
itemStyle: {
color: '#ff4757',
shadowBlur: 20,
shadowColor: '#ff4757'
},
data: [
{ name: '指挥中心', value: [116.42, 39.92] }
]
}
]
};
4.3 关键知识点：coordinateSystem和geoIndex
上面代码里有两个你可能不太懂的属性，我单独讲一下：
coordinateSystem: 'geo'
这个属性告诉ECharts：”这个系列要用地理坐标系”。ECharts的散点图和线系列默认用的是直角坐标系（就是普通的x/y轴），但如果你要往地图上插点或画线，就得告诉它用地理坐标系。
geoIndex: 0
当你的图表里同时有多个series用了地图，ECharts需要知道每个散点/线条系列具体关联的是哪一张地图。geoIndex: 0表示”我关联的是第一个用了map类型的series”。
如果你的地图在第二个series，那就写geoIndex: 1。
第五步：处理常见问题
5.1 地图显示不出来，一片空白
这是最常见的问题。按下面的顺序排查：
1. 检查fetch请求是否成功
- 打开浏览器开发者工具（F12）
- 看Network面板，beijing.json是不是200状态
- 如果不是，检查文件路径是否正确
2. 检查GeoJSON格式是否标准
- 用 geojson.io 打开验证
- 确认type是"FeatureCollection"
- 确认每个feature有geometry和properties
3. 检查registerMap是否成功
- 在registerMap后console.log验证
- 尝试在setOption后立即打印option确认map名称匹配
5.2 地名显示错位或乱码
这通常是GeoJSON里properties.name字段的名称和你series.data里name字段的名称不一致导致的。
// GeoJSON里可能是这样的：
properties: { name: "北京市朝阳区" }
// 但你的data里写的是：
{ name: '朝阳区', value: 850 }
// ECharts匹配不上，就不会关联数据
解决方法：确保两边的名称完全一致。你可以在加载数据后打印一下所有区的名称来检查：
.then(geoJSON => {
// 打印所有区域的名称，确认一下
geoJSON.features.forEach(feature => {
console.log(feature.properties.name);
});
echarts.registerMap('beijing', geoJSON);
// ...
})
5.3 地图方向不对或位置偏移
这通常是坐标系统的问题。北京的GeoJSON默认使用的是WGS84坐标系（就是GPS用的那个），ECharts原生支持这个坐标系。
但如果你从某些第三方平台获取的数据可能是GCJ-02坐标系（高德用的）或BD-09坐标系（百度用的），就需要先做坐标转换：
// GCJ-02 转 WGS84 的算法
function gcj02ToWgs84(gcjLat, gcjLon) {
const a = 6378245.0; // 长半轴
const ee = 0.00669342162296594323; // 偏心率平方
let dLon = transformLat(gcjLon - 105.0, gcjLat - 35.0);
let dLat = transformLon(gcjLon - 105.0, gcjLat - 35.0);
const radLat = gcjLat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
const sqrtMagic = Math.sqrt(magic);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
return {
lat: gcjLat - dLat,
lon: gcjLon - dLon
};
}
function transformLat(x, y) {
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
return ret;
}
function transformLon(x, y) {
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
return ret;
}
如果你用的是DataV的数据，一般不用担心这个问题，它默认就是WGS84。
第六步：真实项目场景实战
说完了基础，咱们来点干货。假设你是在做北京市城市交通运营监控大屏，需要在地图上实时展示各区的拥堵指数，并且每隔几秒刷新一次数据。
// 模拟实时数据更新
class TrafficMonitor {
constructor(chart) {
this.chart = chart;
// 北京市16个区的初始数据
this.districts = [
{ name: '朝阳区', baseValue: 850, current: 850 },
{ name: '海淀区', baseValue: 720, current: 720 },
{ name: '东城区', baseValue: 450, current: 450 },
{ name: '西城区', baseValue: 480, current: 480 },
{ name: '丰台区', baseValue: 560, current: 560 },
{ name: '石景山区', baseValue: 230, current: 230 },
{ name: '顺义区', baseValue: 310, current: 310 },
{ name: '通州区', baseValue: 390, current: 390 },
{ name: '大兴区', baseValue: 420, current: 420 },
{ name: '昌平区', baseValue: 350, current: 350 },
{ name: '门头沟区', baseValue: 120, current: 120 },
{ name: '房山区', baseValue: 280, current: 280 },
{ name: '平谷区', baseValue: 95, current: 95 },
{ name: '怀柔区', baseValue: 150, current: 150 },
{ name: '密云区', baseValue: 80, current: 80 },
{ name: '延庆区', baseValue: 65, current: 65 }
];
this.timer = null;
}
// 模拟从API获取数据
async fetchData() {
// 实际项目中替换为你的真实API
// const res = await fetch('https://api.example.com/beijing/traffic');
// const data = await res.json();
// 这里用随机波动模拟实时数据
return this.districts.map(d => ({
name: d.name,
value: Math.max(50, Math.min(1000, d.current + (Math.random() - 0.5) * 100))
}));
}
// 更新地图数据
async update() {
const newData = await this.fetchData();
this.chart.setOption({
series: [{
data: newData.map(d => ({
name: d.name,
value: Math.round(d.value)
}))
}]
}, false); // false表示不合并，直接替换
}
// 启动实时刷新
start(interval = 3000) {
this.update(); // 立即更新一次
this.timer = setInterval(() => this.update(), interval);
console.log(`交通监控数据每 ${interval}ms 刷新一次`);
}
// 停止刷新
stop() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
}
// 在页面加载后使用
document.addEventListener('DOMContentLoaded', () => {
const chart = echarts.init(document.getElementById('beijing-map'));
// 显示loading
chart.showLoading({
text: '正在加载北京市地图数据...',
color: '#00e5ff',
textColor: '#00e5ff',
maskColor: 'rgba(13, 27, 42, 0.8)'
});
fetch('data/beijing.json')
.then(res => res.json())
.then(geoJSON => {
chart.hideLoading();
echarts.registerMap('beijing', geoJSON);
const option = {
backgroundColor: '#0d1b2a',
tooltip: {
trigger: 'item',
formatter: params => {
if (params.seriesType === 'map') {
return `<div style="color:#00e5ff;font-weight:bold">${params.name}</div>
<div>拥堵指数: <span style="color:#ffd700">${params.value}</span></div>`;
}
return params.name;
},
backgroundColor: 'rgba(0,0,0,0.8)',
borderColor: '#00e5ff',
textStyle: { color: '#fff' }
},
visualMap: {
show: true,
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高拥堵', '低拥堵'],
textStyle: { color: '#aaa', fontSize: 12 },
inRange: {
color: ['#0d1b2a', '#1a5276', '#2980b9', '#00e5ff', '#ffd700', '#ff4757']
},
calculable: true
},
series: [{
name: '拥堵指数',
type: 'map',
map: 'beijing',
roam: true,
zoom: 1.2,
label: {
show: true,
color: '#fff',
fontSize: 11
},
itemStyle: {
borderColor: 'rgba(0,229,255,0.5)',
borderWidth: 0.8,
areaColor: '#1a3a5c'
},
emphasis: {
label: { color: '#ffd700', fontSize: 13, fontWeight: 'bold' },
itemStyle: {
areaColor: 'rgba(255,215,0,0.2)',
shadowBlur: 20,
shadowColor: 'rgba(255,215,0,0.5)'
}
},
data: [] // 初始为空，等数据加载
}]
};
chart.setOption(option);
// 启动交通监控
const monitor = new TrafficMonitor(chart);
monitor.start(3000);
})
.catch(err => {
chart.hideLoading();
console.error('地图加载失败:', err);
});
});
第七步：性能优化建议
当你的地图数据量大或者需要频繁刷新时，性能就会成为问题。这里有一些实战中验证过的优化技巧：
7.1 数据懒加载
不要把所有区的数据一次性全塞进去。如果某个区暂时没有数据，可以先不渲染，等用户缩放进来再加载。
// 根据当前视野动态加载数据
function loadVisibleDistricts(chart, geoJSON) {
const view = chart.convertFromPixel({ seriesIndex: 0 }, [
chart.getOption().geo[0].center[0],
chart.getOption().geo[0].center[1]
]);
// 根据视野范围决定加载哪些区的数据
}
7.2 使用Web Worker处理数据
如果GeoJSON文件很大（比如包含街道级甚至社区级数据），加载和解析可能会卡住主线程。用Worker把它放到后台：
// worker.js
self.onmessage = function(e) {
const geoJSON = e.data;
// 预处理数据，比如生成索引、压缩坐标等
const processed = preprocessGeoJSON(geoJSON);
self.postMessage(processed);
};
// 主线程
const worker = new Worker('worker.js');
worker.postMessage(geoJSONData);
worker.onmessage = function(e) {
echarts.registerMap('beijing', e.data);
};
7.3 降低渲染频率
对于大屏场景，3秒刷新一次足够了，没必要用requestAnimationFrame每秒刷60次。用setInterval控制刷新间隔，既省资源又不会让用户感觉卡顿。
第八步：常见问题FAQ
Q1：我想做街道级别的地图怎么办？
DataV上也有街道级别的GeoJSON，搜索”北京-街道”就能找到。不过街道级的数据文件会很大（几MB），加载时间会明显变长。建议配合上面的懒加载和Worker方案使用。
Q2：ECharts 4和ECharts 5有什么区别？
主要是API的统一性和性能提升。ECharts 5引入了dataset组件，可以更简洁地管理数据。如果你从新开始做项目，建议直接用5.x版本。注册地图的方法是一样的，echarts.registerMap()在两个版本中都支持。
Q3：能不能不用fetch，直接把GeoJSON内嵌到代码里？
可以，但不推荐。GeoJSON文件通常有几百KB，内嵌到JS里会让你的HTML文件变得非常大，加载速度慢。如果一定要内嵌（比如纯静态部署没有服务端），可以用import的方式：
import beijingGeo from './data/beijing.json';
echarts.registerMap('beijing', beijingGeo);
这需要你的构建工具（Webpack/Vite）支持JSON导入。
Q4：地图上显示的数据和我预期的对不上？
最常见的两个原因：
- GeoJSON里的区名和你data里的name不匹配（大小写、空格、全角半角都可能影响）
- visualMap的min/max设置不合理，导致颜色映射偏差。建议用console.log把实际数据范围打印出来再设置
Q5：有没有现成的北京地图组件可以直接用？
有的。如果你不想从头写，可以用 echarts-gl（ECharts的3D扩展）或者一些第三方封装组件。但说实话，这些封装往往不够灵活，遇到定制需求时还是会回到原生API。我建议还是把基础打牢，后面用着才顺手。
总结
今天咱们把这事儿从头到尾捋了一遍：
- 找数据 — 推荐用阿里云DataV，免费、规范、直接能用
- 验证数据 — 用geojson.io检查一遍，避免踩坑
- 注册地图 —
echarts.registerMap('名称', 数据)这一行搞定 - 画图 — 在option里写
map: '名称'，配合散点和线就能做出丰富的运营大屏 - 处理问题 — 坐标系、名称匹配、性能优化，逐一排查
记住，ECharts地图的核心就一句话：给它GeoJSON，它给你地图。剩下所有花样，都是在这个基础上叠加散点、线条、颜色映射等标准图表元素。
如果你在实际操作中遇到了什么奇怪的问题，或者需要某个特定场景的代码示例（比如叠加热力图、做3D效果、联动图表等），随时来问我。地图这玩意儿，一旦打通了，后面就都是加料了，不难。