昨晚加班到凌晨两点，盯着屏幕上的空白地图，心里那叫一个烦躁。本来想着用 echarts geo 通过坐标 简单画几个点，展示一下我们全国几个仓库的位置，结果折腾了半天，地图上连个影子都没有。那种挫败感，真的只有写过前端图表的人才懂。今天把血泪教训整理出来，希望能帮兄弟们少掉几根头发。
首先，你得搞清楚坐标系。这是90%的人踩坑的地方。很多兄弟直接拿高德或者百度地图的经纬度往里填，结果发现点要么在太平洋，要么在非洲。echarts 的 geo 组件默认支持的是 WGS84 或者 GCJ02，但不同版本的 echarts 对坐标系的支持略有差异，尤其是当你引入外部 geojson 文件时。我之前就是随便找了个 geojson，里面坐标是百度系的，结果死活对不上。
第一步，确认你的数据源坐标系。别偷懒，去查一下你手里那堆数据的来源。如果是高德或腾讯地图拿到的，大概率是 GCJ02。如果是 GPS 原始数据，那是 WGS84。如果是百度地图 API 拿到的，那是 BD09。这一步搞错了，后面全是白搭。我当时的错误就是没注意，直接把百度坐标塞进去了，当然找不到北。
第二步，准备 geojson 文件。去阿里 DataV 或者 echarts 官方示例里下载对应的中国地图 json。注意，json 里的坐标必须和你数据源的坐标系一致。如果不一致，你得写个转换函数。这里有个小坑，有些在线转换工具不准，建议用专业的库或者自己写个简单的偏移算法。我当时图省事，用了个在线转换，结果有几个点的精度偏差了大概0.01度，在地图上看起来就是点没对齐，找半天原因，最后发现是转换工具的问题。
第三步，配置 series。在 echarts 的 option 里，series 类型设为 'effectScatter' 或者 'scatter'。重点来了，coordinateSystem 必须设为 'geo'。很多人写成 'cartesian2d'，那肯定报错或者不显示。然后，data 数组里的每一项，必须是一个包含经纬度的对象，比如 [{name: '仓库A', value: [116.4, 39.9]}]。注意，value 数组的顺序是 [经度, 纬度]，千万别写成 [纬度, 经度]，虽然有时候看着差不多，但在极值附近会出大问题。
第四步，处理坐标转换。如果你的数据坐标系和 geojson 不一致，别硬扛。在 series 的 data 处理函数里，或者在数据预处理阶段，统一转换。我后来写了一个简单的转换函数，把 BD09 转成 GCJ02，再转成 WGS84，虽然代码有点丑，但管用。这里有个细节，转换算法不是线性的，不要简单加减一个固定值，要用专门的转换公式。
第五步，调试与可视化。打开浏览器的开发者工具，看看控制台有没有报错。有时候点不显示，是因为数据量太大，浏览器渲染不过来，或者样式设置有问题，比如 color 没设对，导致点和背景色一样。我当时就是 color 设成了白色，背景也是白色，找了半天以为没数据。
其实，echarts geo 通过坐标 做地图可视化，核心就是坐标系对齐和数据格式正确。别被那些花哨的动画迷了眼，先把点画出来，再考虑美化。我这次踩坑，最大的教训就是太急于求成，没仔细核对数据源。希望兄弟们引以为戒。
最后，贴一段核心代码片段，大家对照着改：
`javascript
option = {
geo: {
map: 'china',
roam: true,
itemStyle: {
areaColor: '#eee',
borderColor: '#999'
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.407526, 39.90403]} // 确保这里是正确的经纬度
],
symbolSize: 10,
itemStyle: {
color: 'red'
}
}]
};
`
记住，细节决定成败。别嫌麻烦，多检查几遍坐标系。如果你还是搞不定，不妨换个思路，先用简单的 scatter 图表测试数据格式，再迁移到 geo。这样排查问题会快很多。希望这篇踩坑记录能帮到你，如果有其他问题，欢迎在评论区交流，咱们一起进步。毕竟，前端这条路，就是不断填坑的过程。加油！
