嘿，朋友！我是Agnes。今天咱们不聊那些枯燥的文档，来聊点真正能帮你干活的东西——用ECharts画自定义地图。
我知道你可能有过这样的经历：打开ECharts官方文档，看着那一堆配置项头晕眼花；或者好不容易找到了GeoJSON，结果地图显示出来全是乱的，颜色对不上，点击也没反应。别急，这篇文章就是专门为你准备的。我会像朋友聊天一样，带你一步步搞定从数据获取到最终交互的全流程。
为什么是ECharts？为什么现在学？
首先，你可能要问：市面上图表库那么多，为什么还要用ECharts？
实话实说，在中国做数据可视化，ECharts几乎是绕不开的存在。百度开源，社区活跃，文档齐全（虽然有时候太全了反而让人挑花眼）。更重要的是，它对地图的支持非常完善，而且更新速度很快。到了2026年，ECharts的地图能力已经非常成熟，无论是省级、市级、区县级别的地图，还是自定义的地理区域（比如商场楼层、园区布局），都能轻松实现。
而且，我现在教你的这些方法，都是经过实战检验的。不是那种“Hello World”级别的demo，而是真正能用到项目里的干货。
第一步：搞懂地图数据的来源——GeoJSON到底是什么？
在动手之前，咱们得先解决一个根本问题：地图数据从哪来？
ECharts绘制地图，核心依赖的是GeoJSON格式的数据。你可能会问：“GeoJSON是什么？听起来好高大上。”
其实没那么复杂。GeoJSON就是一种用JSON格式描述的地理信息数据。简单来说，它定义了一个地方的边界——比如中国每个省份的轮廓，或者某个城市的街道范围。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "浙江省"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[118.0, 29.0], [120.0, 29.0], ...]]
}
}
]
}
你看，这就是一个极简的GeoJSON示例。它告诉ECharts：“浙江省”的边界是由这些坐标点围成的多边形。ECharts拿到这些数据后，就能把这些坐标点连成线，填满颜色，变成我们看到的地图。
去哪里找这些GeoJSON数据？
这是新手最容易卡住的地方。我给你列几个靠谱的来源：
- 国家地理信息公共服务平台（天地图）：官方数据，精度最高，但申请流程稍复杂。
- 阿里云DataV.GeoAtlas：这个强烈推荐！它提供了从省级到街道级的完整GeoJSON数据，而且可以直接下载，格式标准，和ECharts完美契合。网址是
http://datav.aliyun.com/portal/school/atlas/area_selector。 - 自然地球（Natural Earth）：适合做世界地图或者大尺度的中国地图，精度相对较低，但数据干净。
- OpenStreetMap：开源地图数据，可以通过一些工具转换成GeoJSON。
对于大多数国内项目，阿里云DataV 是首选。它的优势在于：数据准确、分级详细（省/市/区县/街道）、下载方便、格式标准。
第二步：搭建最简单的地图——Hello World
别急着搞复杂交互，咱们先从最基础的开始。你要明白，每个复杂的地图，都是由简单的步骤堆砌起来的。
我先给你看一个最简化的代码结构，让你对整体有个概念：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts自定义地图入门</title>
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<!-- 地图容器 -->
<div id="map" style="width: 100%; height: 600px;"></div>
<script>
// 1. 初始化图表
const myChart = echarts.init(document.getElementById('map'));
// 2. 加载GeoJSON数据（这里先用一个占位，后面会详细讲）
// 假设我们已经有一个 'china.json' 文件
// 3. 配置项
const option = {
series: [{
type: 'map',
map: 'china', // 地图名称
roam: true, // 允许缩放和平移
label: {
show: true, // 显示地名
color: '#333'
},
emphasis: {
label: {
color: '#d35400'
}
},
itemStyle: {
borderColor: '#fff', // 边界线颜色
borderWidth: 1,
areaColor: '#e8f4fc' // 默认填充颜色
}
}]
};
// 4. 设置配置项
myChart.setOption(option);
</script>
</body>
</html>
这段代码看起来简单，但包含了ECharts地图的所有核心要素：
type: 'map'：告诉ECharts这是一个地图系列。map: 'china'：指定地图名称。这个名称必须和后面注册GeoJSON时的名称一致。roam: true：允许用户缩放和拖拽地图。新手常忘这个，导致地图不能交互。label：控制地名显示。itemStyle：控制地图样式，包括边框、填充色等。
但是，这时候运行起来，你会发现地图是空的，或者报错说“找不到地图”。为什么？因为我们还没有把GeoJSON数据注册到ECharts里。接下来，咱们解决这个问题。
第三步：注册GeoJSON——让地图“活”起来
这是最关键的一步。ECharts本身不带任何地图数据（除了几个内置的世界地图和中国地图），所有的自定义地图都需要我们手动注册。
方式一：静态JSON文件（推荐新手）
假设你从阿里云DataV下载了“浙江省”的GeoJSON文件，保存为 zhejiang.json。你可以用以下代码加载：
// 使用jQuery或fetch加载JSON文件
fetch('zhejiang.json')
.then(response => response.json())
.then(geoJson => {
// 注册地图
echarts.registerMap('zhejiang', geoJson);
// 初始化图表
const myChart = echarts.init(document.getElementById('map'));
// 配置项
const option = {
series: [{
type: 'map',
map: 'zhejiang', // 注意：这里要和注册的名称一致
roam: true,
label: { show: true },
itemStyle: {
areaColor: '#f0f9ff',
borderColor: '#bae7ff'
}
}]
};
myChart.setOption(option);
})
.catch(error => console.error('加载地图数据失败:', error));
关键点提醒：
echarts.registerMap('zhejiang', geoJson)中的第一个参数'zhejiang'是地图名称，后面map: 'zhejiang'必须一致。- 确保JSON文件路径正确。如果是本地开发，建议使用VSCode的Live Server插件，不要直接双击HTML文件打开（因为浏览器安全策略会阻止本地文件读取）。
方式二：动态获取（适合数据源不固定的场景）
如果你的地图数据需要从后端API动态获取，可以这样写：
async function loadMap() {
try {
const response = await fetch('/api/map/zhejiang');
const geoJson = await response.json();
echarts.registerMap('zhejiang', geoJson);
const myChart = echarts.init(document.getElementById('map'));
myChart.setOption({
series: [{
type: 'map',
map: 'zhejiang',
roam: true,
data: [
{ name: '杭州市', value: 100 },
{ name: '宁波市', value: 80 }
]
}]
});
} catch (error) {
console.error('地图加载失败', error);
}
}
第四步：让地图更有料——添加数据映射
光有地图轮廓太单调了。通常，我们想在地图上展示数据，比如“浙江省各城市的GDP”、“各地的人口分布”等。这时候就需要用到 data 配置。
基本的数据映射
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}' // 鼠标悬停时显示名称和数值
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#eff3ff', '#6ba4f5', '#03407e'] // 颜色渐变
}
},
series: [{
type: 'map',
map: 'zhejiang',
roam: true,
label: { show: true },
// 数据数组，name必须和GeoJSON中的properties.name一致
data: [
{ name: '杭州市', value: 820 },
{ name: '宁波市', value: 650 },
{ name: '温州市', value: 430 },
{ name: '嘉兴市', value: 380 },
{ name: '湖州市', value: 290 },
{ name: '绍兴市', value: 350 },
{ name: '金华市', value: 310 },
{ name: '衢州市', value: 180 },
{ name: '舟山市', value: 120 },
{ name: '台州市', value: 270 },
{ name: '丽水市', value: 150 }
],
emphasis: {
label: { color: '#fff' },
itemStyle: { areaColor: '#03407e' }
}
}]
};
这里有个坑要特别注意：data 中的 name 必须和GeoJSON文件中 properties 里的 name 完全一致。大小写、空格都要对上，否则数据会显示不出来。如果你发现数据没映射上，第一件事就是去检查这个名字是否匹配。
视觉映射组件（visualMap）的作用
你可能注意到了上面的代码里有 visualMap。它的作用是什么？简单来说，它根据 data 中的 value 值，自动给地图区域上色。值越大颜色越深，值越小颜色越浅。这样，一眼就能看出哪里数据高、哪里数据低。
visualMap 的配置很灵活：
min和max：数值范围。inRange.color：颜色渐变数组，可以是两个颜色，也可以是多个颜色。calculable: true：显示可以拖拽的滑块，让用户自己调整范围。
第五步：区域高亮与交互——让用户“玩”起来
现在，地图能显示了，数据也能映射了。但你可能还想要更丰富的交互，比如鼠标悬停时高亮某个区域，点击某个区域弹出详细信息，或者点击跳转到下一级地图。
基础的高亮效果
在之前的代码中，我们已经用 emphasis 配置了高亮样式。emphasis 是ECharts中专门用于处理“强调状态”（通常是鼠标悬停）的配置项。
series: [{
type: 'map',
map: 'zhejiang',
// ...其他配置
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
areaColor: '#ff6b6b', // 悬停时的填充色
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
}]
点击事件——跳转到下级地图
这是很多项目的需求：点击浙江省，跳转到杭州市的区级地图；点击杭州市，再跳转到某个区的街道地图。
实现这个功能，核心是利用 ecEvents 中的 click 事件，动态切换地图数据。
let currentMap = 'zhejiang'; // 当前地图名称
let currentLevel = 'province'; // 当前层级
// 点击事件处理
myChart.on('click', function(params) {
console.log('点击了:', params.name);
if (currentLevel === 'province') {
// 如果是省级地图，点击后加载市级地图
// 假设我们有一个城市名到JSON文件名的映射
const cityMap = {
'杭州市': 'hangzhou',
'宁波市': 'ningbo',
'温州市': 'wenzhou'
};
if (cityMap[params.name]) {
currentLevel = 'city';
loadCityMap(cityMap[params.name]);
}
} else if (currentLevel === 'city') {
// 如果是市级地图，点击后加载区级地图
// 这里需要根据实际情况处理
alert('点击了: ' + params.name);
}
});
async function loadCityMap(mapName) {
try {
const response = await fetch(`${mapName}.json`);
const geoJson = await response.json();
echarts.registerMap(mapName, geoJson);
myChart.setOption({
series: [{
type: 'map',
map: mapName,
roam: true,
label: { show: true },
data: generateMockData(mapName) // 模拟数据
}]
});
} catch (error) {
console.error('加载下级地图失败', error);
}
}
这里有个重要细节：每次点击后，我们需要重新加载新的GeoJSON数据，并注册新的地图名称，然后 setOption 更新图表。这样就能实现多级地图的联动跳转。
右键菜单或悬浮提示——显示详细信息
有时候，我们不仅想点击跳转，还想在鼠标悬停时显示更详细的信息。这时候可以用 tooltip.formatter 自定义提示框内容。
tooltip: {
trigger: 'item',
formatter: function(params) {
if (params.componentType === 'series') {
// 如果是地图系列，显示更详细的信息
return `
<div style="padding: 10px;">
<h4 style="margin: 0 0 5px 0;">${params.name}</h4>
<p style="margin: 0;">GDP: ${params.value} 亿元</p>
<p style="margin: 0;">人口: ${(params.value * 0.5).toFixed(1)} 万人</p>
<p style="margin: 0; color: #999; font-size: 12px;">点击查看详情</p>
</div>
`;
}
return params.name;
}
}
第六步：美化与细节打磨——让地图“好看”
现在，地图能用了，交互也有了。但作为一个对体验有要求的产品，我们还需要在美观上下功夫。
1. 配色方案
地图的配色直接影响用户的阅读体验。避免使用过于刺眼或对比度太低的颜色。我推荐几种常用的配色风格：
- 商务蓝：
#1e90ff,#87cefa,#b0e0e6—— 适合政府、企业数据展示。 - 暖色调：
#ff7f50,#ffa07a,#ffd700—— 适合销售、业绩类数据。 - 渐变紫：
#9370db,#ba55d3,#da70d6—— 适合科技感强的项目。
你可以通过 visualMap.inRange.color 来设置颜色数组。
2. 去掉不必要的边框
默认情况下，ECharts地图会有白色边框。有时候这会让地图看起来杂乱。你可以通过以下方式隐藏：
itemStyle: {
borderColor: 'transparent', // 边框透明
borderWidth: 0,
areaColor: '#f0f9ff'
}
或者，如果你想要细线条边框，可以设置很小的 borderWidth 和合适的 borderColor。
3. 地名标签的优化
当地图缩小时，地名可能会重叠。你可以通过 label 配置来控制：
label: {
show: true,
fontSize: 10,
color: '#333',
// 只在放大到一定级别时显示地名
emphasize: {
show: true,
fontSize: 12
}
}
另外，ECharts支持根据缩放级别动态显示标签，这需要配合 roam: true 使用。
4. 添加图例和统计信息
在地图旁边添加一些统计卡片，能让数据更直观。虽然ECharts本身不直接支持“卡片”组件，但你可以用HTML+CSS叠加在图表上方。
”`html
<div style="position: absolute; top: 10px; right: 10px; background: #fff; padding: 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
<h4 style="margin: 0 0 10px 0;">浙江省数据概览</h