做前端可视化这行十年了，说实话，ECharts 的 geo 地图这块儿，坑是真不少。特别是那个散点提示，也就是 tooltip，很多兄弟跟我抱怨，说怎么弄都显示不全，或者位置飘忽不定，甚至有时候直接不显示。今天我就掏心窝子跟大家聊聊这个 echarts geo 散点提示 到底该怎么调，别再去百度上搜那些过时的代码了，咱们直接上干货。

首先，你得明白一个底层逻辑。geo 地图和普通坐标系不一样，它是有投影的。很多新手直接拿普通 scatter 的 tooltip 配置去套，结果发现鼠标移上去，提示框要么在屏幕外面，要么跟点对不上。这就是因为 geo 的坐标系是经纬度转换后的像素坐标，而且地图本身可能做了缩放和平移。这时候，如果你不指定 formatter 或者 position，浏览器默认的计算方式在复杂地图下很容易出错。

我见过太多人在这上面栽跟头。比如，有个哥们儿问我，为什么他的 echarts geo 散点提示 在移动端显示特别卡？其实不是卡，是渲染层级的问题。geo 图层和 series 图层的 z 值如果没处理好，或者 tooltip 的 confine 属性没开，就会导致提示框被遮挡或者溢出容器。

来，说具体的解决办法。第一，务必开启 confine。在 tooltip 的配置项里，加上 confine: true。这玩意儿能让提示框自动吸附在图表容器内，不会跑到屏幕外面去，用户体验瞬间提升。第二，自定义 position。别用默认的，写个函数。根据鼠标坐标和 geo 的转换关系，微调一下位置。比如：

position: function (point, params, dom, rect, size) {

return [point[0] + 10, point[1] - 10];

}

这样稍微偏移一点，避免鼠标挡住内容。当然，这只是基础。更高级的玩法是结合 geo 的 convertToPixel 方法，确保提示框始终跟随散点，哪怕地图在拖拽或者缩放的时候，提示框也能稳稳地钉在点上。这就是解决 echarts geo 散点提示 位置不准的核心。

还有一个容易被忽视的点，就是 tooltip 的 rich 样式。很多数据展示需要加粗、变色，这时候别只用 HTML 标签，用 ECharts 的 rich 属性，性能更好，兼容性也更强。特别是当你的散点数据量很大的时候，DOM 操作多了会卡顿，rich 样式能减少重绘。

再啰嗦一句，关于 echarts geo 散点提示 的触发时机。默认是 mouseover，但在某些大屏展示场景下，你可能希望是 click 或者 hover。这个根据业务需求改就行，但要注意，hover 在移动端可能会误触，建议加个延迟或者改用 click。

我最近帮一个客户调这个，他们用的是 ECharts 5.x 版本，发现 geo 的 tooltip 在 Firefox 浏览器下偶尔会错位。查了半天才发现，是 geo 的 map 数据版本和 ECharts 版本不匹配导致的投影偏差。所以，一定要检查你的地图 JSON 数据是不是最新的，别为了省事用个旧数据，结果到处报错。

总之，搞懂 geo 的坐标转换机制，用好 confine 和自定义 position，再配合合理的 rich 样式，基本就能解决 90% 的问题了。剩下的 10%，那就是数据本身的问题，比如经纬度精度不够，或者地图边界数据缺失。

如果你还在为 echarts geo 散点提示 头疼，或者遇到什么奇奇怪怪的 bug，别自己死磕了。这行水深，很多细节官方文档里写得并不清楚。你可以直接来找我聊聊，我手头正好有几个现成的优化方案，分享给你参考参考。毕竟，代码是死的，人是活的，多交流才能少走弯路。别等上线前才发现提示框飘了，那时候加班都来不及。有啥不懂的，随时留言，我看到就会回。咱们一起把可视化做得更漂亮、更实用。