嘿，我是 Agnes。看到标题里带着“专属”两个字，我就知道你没在开玩笑。
很多人以为地图可视化就是去官网下个 GeoJSON 扔进 ECharts 跑起来，完事儿。但那种东西太“公共”了，你的老板或者客户想要的是——这就是为我做的。可能是你们公司新开的旗舰店分布，可能是某个偏远县市的详细路网，甚至是你家小区的三维效果图。
今天咱们不聊虚的，我带你从零开始，把一个普通的空白画布，变成完全由你掌控的“专属地图”。这一路我会踩过的那些坑都指给你看，保证你看完能直接上手。
一、 先搞清楚：什么是“专属”地图？
在 ECharts 的世界里，地图数据通常来自 GeoJSON。你可以把它想象成一个数字化的“剪纸模板”。
标准的地图（比如中国地图、世界地图）是别人剪好的，你拿过来贴就行。但“专属地图”意味着：
- 区域自定义：比如你只想画某个产业园区，或者某个特殊的行政边界。
- 样式自定义：颜色、描边、高亮效果，完全按你的品牌调性来。
- 数据绑定：每个区域对应什么数据，是你定义的，不是死板的行政区代码。
要做到这一步，你需要两个核心武器：
- GeoJSON 数据：地图的“骨架”。
- ECharts 配置项：地图的“皮肤”和“灵魂”。
二、 第一步：搞定地图数据（GeoJSON）
这是最关键也最容易卡住的地方。很多人数据没搞对，后面配置写得再花哨也是废的。
1. 从哪弄 GeoJSON？
如果你要画的是一个现有行政区域（比如某省某市），不用自己画，去这里下：
- 阿里云 DataV.GeoAtlas：非常友好，可以下载全国、省份、城市级别的 GeoJSON，还能按区域编号筛选。
- Natural Earth：适合做世界地图或大尺度地理信息。
但如果你想画的是你自己的地盘（比如你们公司的三个办公楼分布，或者一个虚构的游戏地图），那你就得自己动手了。
2. 自己动手画：使用在线工具
别被“画地图”吓到，现在有可视化工具帮你。
推荐工具：Mapshaper (mapshaper.org)
这是一个超级强大的在线 GeoJSON 编辑器。假设你要画你们城市的一个新区：
- 找到该区域的边界数据（可以从自然资源局下载 shapefile，或者在 OpenStreetMap 上手动描绘）。
- 上传到 Mapshaper。
- 如果需要简化（文件太大加载慢），点击
simplify，滑块拖一拖，让线条别那么密集，但保留主要形状。 - 导出为 GeoJSON。
关键点：导出时，确保 id 字段存在，并且是字符串类型。因为后面我们要用 name 或 id 来匹配数据，如果类型不统一（比如一个是数字 1，一个是字符串 "1"），地图就渲染不出来或者高亮会失效。
3. 一个简单的自定义 GeoJSON 例子
为了让你明白结构，我手写一个极简的“专属园区” GeoJSON 片段。假设园区由两个地块组成：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "name": "A区-研发中心", "id": "district_A" },
"geometry": {
"type": "Polygon",
"coordinates": [
[
[116.30, 39.90], [116.32, 39.90], [116.32, 39.92], [116.30, 39.92], [116.30, 39.90]
]
]
}
},
{
"type": "Feature",
"properties": { "name": "B区-总部大楼", "id": "district_B" },
"geometry": {
"type": "Polygon",
"coordinates": [
[
[116.33, 39.91], [116.35, 39.91], [116.35, 39.93], [116.33, 39.93], [116.33, 39.91]
]
]
}
}
]
}
看明白了吗？coordinates 里是经纬度数组，围成一圈。properties.name 就是你地图上用文字显示的名字。
三、 第二步：ECharts 核心配置详解
数据有了，接下来就是写代码。这里我不给你贴那种只有 20 行的 Demo，咱们直接上生产级的配置思路。
首先，引入 ECharts，并注册你的自定义地图。这一步很多人会忘，导致地图显示“未找到”。
import * as echarts from 'echarts';
// 假设你的 geojson 数据存放在 myMapData.js 中，或者通过 fetch 获取
// 这里我直接用代码里定义的方式演示注册，实际项目建议抽离
const myMapGeoJSON = { /* 上面那段 JSON 数据 */ };
// 关键步骤：注册地图
// 第一个参数 'myCustomMap' 是你后面 series.map 里要用的名字
// 第二个参数是你的 GeoJSON 数据
echarts.registerMap('myCustomMap', myMapGeoJSON);
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
backgroundColor: '#0f1c2e', // 深色背景，更有科技感
tooltip: {
trigger: 'item',
formatter: '{b}<br/>访问人数：{c} 人' // {b}是名称，{c}是数值
},
// 视觉映射，根据数值自动变色，这是数据可视化的精髓
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
},
textStyle: { color: '#fff' }
},
series: [
{
name: '园区访问数据',
type: 'map',
map: 'myCustomMap', // 对应上面注册的名字
roam: true, // 允许缩放和平移
zoom: 1.2,
// 地图区域样式
itemStyle: {
borderColor: '#93b7d3', // 区域边框颜色
borderWidth: 1,
areaColor: '#1a2536', // 默认区域填充色
shadowColor: 'rgba(0, 166, 246, 0.5)',
shadowBlur: 10
},
// 高亮样式（鼠标悬停时）
emphasis: {
itemStyle: {
areaColor: '#f39c12', // 悬停变橙色
shadowBlur: 20,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
color: '#fff',
fontSize: 14,
fontWeight: 'bold'
}
},
// labels 控制名称显示
label: {
show: true, // 默认显示名称
color: '#a0cfff',
fontSize: 12
},
// 数据
data: [
{ name: 'A区-研发中心', value: 850 },
{ name: 'B区-总部大楼', value: 320 }
]
}
]
};
myChart.setOption(option);
四、 进阶技巧：让地图“活”起来
光有平面地图还不够，咱们加点“料”。
1. 混合地图：散点 + 热力图 + 地图
你想看人员流动的密集度吗？或者想在看地图的同时，标注出几个关键节点？
series: [
// 第一层：底图
{
type: 'map',
map: 'myCustomMap',
roam: true,
itemStyle: { areaColor: '#323c48', borderColor: '#111' },
silent: true // 不响应鼠标事件，让交互留给上层
},
// 第二层：散点标记（比如重要客户位置）
{
type: 'effectScatter',
coordinateSystem: 'geo', // 注意：这里要用 geo 坐标系，且 geo 配置需与 map 关联
data: [
{ name: 'VIP客户A', value: [116.31, 39.91, 999] }
],
symbolSize: 20,
rippleEffect: {
brushType: 'stroke',
scale: 3
},
itemStyle: { color: '#f44336', shadowBlur: 10, shadowColor: '#f44336' }
}
]
注意：在 ECharts 中，effectScatter 要叠加在地图上，通常需要同时配置 geo 组件（设置投影、中心点、缩放）和 series 中的 map。coordinateSystem: 'geo' 是连接两者的桥梁。
2. 自定义区域形状：如果 GeoJSON 不准确怎么办？
有时候你下载的 GeoJSON 边界太粗糙，或者你想手绘一个“大致形状”表达一种意象。
你可以直接用 Mapshaper 导入一个形状，或者用 QGIS 这种专业 GIS 软件，先画好矢量图形，再导出 GeoJSON。这一步是“专属”感的最强来源——因为只有你知道这个形状代表什么。
3. 性能优化：数据量大时怎么做？
如果你的“专属地图”里有几百个细分区域，页面会卡。这时候：
- 简化 GeoJSON：用
topojson格式代替geojson，文件体积能小很多，ECharts 原生支持。 - 按需加载：用户没看到的区域，先不渲染，等
zoom到那个层级再请求数据。 - 使用
dataset：把数据和样式配置分离，利用 ECharts 的dataset特性管理多系列数据，避免冗余。
五、 常见坑点与解决方案
作为过来人，我得给你提个醒，这些坑我踩过，你不用踩。
坑1：地图不显示，一片空白。
- 排查：
- 检查
echarts.registerMap('名字', data)里的名字，是否和series.map里的名字完全一致（大小写敏感）。 - 检查 GeoJSON 的
features数组里的geometry.coordinates格式是否正确。必须是数组的数组。 - 浏览器控制台看有没有报错，通常是 JS 语法错误或者 JSON 格式错误。
- 检查
坑2：高亮（hover）不生效。
- 排查：
- 检查
emphasis配置是否写在itemStyle同级，而不是嵌套在里面。 - 检查
data里的name是否和 GeoJSON 里properties.name完全一致。差一个字都不行。 - 如果是从接口动态获取数据，确保接口返回的速度够快，或者加了 loading 状态。
- 检查
坑3：地图位置偏了，或者缩放不对。
- 排查：
- 自定义地图没有固定的中心点概念，它取决于 GeoJSON 的经纬度范围。
- 如果需要强制居中，可以在
geo组件（如果有使用）里设置center和zoom。 - 如果 GeoJSON 的坐标系不对（比如用的是投影坐标而不是 WGS84 经纬度），地图会变形或偏移。确保使用 WGS84 (EPSG:4326) 坐标系。
六、 真实案例：给“未来科技城”做一张专属数据大屏
让我给你讲一个我最近帮朋友做的真实场景，把刚才的知识点串起来。
需求：一家地产公司想要展示他们新开发的“未来科技城”各楼栋的销售去化率。这个园区不在任何标准地图上，是他们自己设计的规划图。
解决步骤：
- 数据获取：设计师提供了园区的 CAD 图纸。我用 CAD 转 GIS 的工具，或者让规划部门导出 Shapefile。
- 数据清洗：用 QGIS 打开 Shapefile，发现有很多碎小块（比如绿化带、道路），这些不需要销售数据。我用 QGIS 的
dissolve功能，把道路和绿化合并或剔除，只保留“地块A”、“地块B”、“地块C”等销售单元。 - 导出 GeoJSON：导出时，确保每个 Feature 的
properties里有一个block_id（如 ‘A01’, ‘B02’）。 - ECharts 实现：
- 注册
techCityMap。 visualMap设置颜色从浅绿（售罄）到深红（热销），直观反映销售压力。tooltip里不仅显示名称，还通过formatter函数去关联一个外部的销售数据表，显示具体剩余房源数。- 添加一个时间轴组件，展示过去三个月的销售热力变化，让用户能回放。
- 注册
结果：老板在演示时，不仅能看到当前的销售分布，还能通过时间轴看到哪个月哪栋楼卖得最火。这种“专属”且“动态”的可视化，远比一张静态 Excel 表格有说服力得多。
七、 总结与建议
做自定义地图可视化，核心不在于 ECharts 的代码有多难，而在于数据的准备和视觉的设计。
- 数据是根本：花 70% 的时间在 GeoJSON 的清洗和验证上，你会发现这是最值得的。
- 视觉要克制：不要把所有颜色都用上。选定一个主色调（比如你们的品牌色），用色相环的深浅来表示数据强度。
- 交互是加分项：点击区域后，侧边滑出详情面板，或者联动其他图表（如柱状图、饼图），让地图成为整个数据大屏的“入口”而不是终点。
- 保持耐心：GeoJSON 的坐标顺序（顺时针/逆时针）会影响面的填充方向，如果遇到“黑洞”或“洞中有岛”的奇怪效果，用 Mapshaper 检查一下。
地图是连接数字世界和物理世界的桥梁。当你用 ECharts 画下第一块属于自己企业的区域时，你会发现，数据不再是冷冰冰的表格，而是有形状、有温度、有故事的空间叙事。
现在，打开你的编辑器，导入你的 GeoJSON，开始绘制你的专属地图吧。如果有具体的报错或者奇怪的现象，随时回来问我，我们一步步调试。