昨晚加班到两点，盯着屏幕上的地图发呆。
客户非说那个红色的点，偏了半条街。
我查了半天文档，发现根本不是代码写错。
是坐标系的锅。
很多做 ECharts 地图的朋友，都栽在 echart geo label 这个坑里。
尤其是做物流轨迹、门店分布的时候。
点都在，但文字标签（label）就是对不齐。
看着别扭，心里更别扭。
今天不扯那些虚头巴脑的理论。
直接说干货，怎么让 echart geo label 乖乖听话。
第一招，别信默认值。
ECharts 默认的 label 位置，那是给普通散点图用的。
放到地图上，尤其是用了 geo 组件的时候，默认逻辑经常抽风。
你设置了 position: 'inside'，它可能跑到外面去。
或者 position: 'right'，它却贴到了左边。
这时候，别犹豫。
直接上坐标偏移。
在 series 的配置里，找到 label 对象。
加一个 offset 属性。
格式是 [x, y]。
x 是横向偏移，y 是纵向偏移。
比如 offset: [10, -5]。
这十像素，就是你要手动微调的距离。
别嫌麻烦，这是最稳的办法。
哪怕你用了 formatter 动态生成内容，offset 照样生效。
第二招，检查 coordinateSystem。
这是最容易忽略的地方。
你的 series 里，coordinateSystem 写的是 'geo' 还是 'cartesian2d'？
如果是 'geo'，那你的数据必须是经纬度。
如果是 'cartesian2d'，那是像素坐标。
很多人混着用。
数据是经纬度，却用了 cartesian2d。
结果就是 label 跑到了屏幕角落，或者干脆看不见。
一定要确认数据源和坐标系匹配。
如果数据是经纬度，就用 'geo'。
如果为了性能把经纬度转成了像素，那就用 'cartesian2d'。
别偷懒，混用必报错。
第三招，解决重叠问题。
地图上的点多了，label 肯定重叠。
密密麻麻一团黑，谁看得清？
这时候，可以用 roam: true 开启缩放和平移。
让用户自己拖动查看细节。
或者，在 label 里加个 formatter。
只显示关键信息，比如城市名。
详细数据，放在 tooltip 里。
这样界面清爽，用户体验也好。
还有个小技巧。
如果 label 还是位置不准，试试用 graphic 组件。
虽然麻烦点，但自由度极高。
你可以把文字当成一个独立的图形元素。
自己定 x, y 坐标。
这样 echart geo label 的位置，完全由你掌控。
不再受 geo 组件的束缚。
当然，这适合高阶玩家。
普通用户，调 offset 足够了。
最后说个心态问题。
做前端，尤其是可视化这块。
细节决定成败。
一个 label 的位置，看着是小事儿。
但客户不懂代码，他们只看效果。
你调得准，他们就觉得你专业。
你调不准，他们就觉得你菜。
所以，别嫌 offset 麻烦。
那是你专业度的体现。
我遇到过不少同行，为了省事，直接硬编码像素值。
结果换个地图，全乱了。
记住，offset 是相对于图形中心的。
不同的图标大小，偏移量可能不一样。
测试的时候，多缩放几次看看。
确保在放大、缩小时，label 依然贴合。
这才是真功夫。
别信那些“一键解决”的教程。
哪有那么多捷径。
都是一个个像素调出来的。
今晚回去，把你项目里的 echart geo label 都检查一遍。
看看有没有偏移。
有的话，加上 offset。
你会发现，世界清静了。
地图也好看多了。
这就够了。
干活去吧。
