昨晚熬夜调图表，差点把键盘砸了。
真的，做数据可视化，最折磨人的不是画图，而是那个该死的提示框。
特别是用了geo3D之后，那个tooltip简直是个玄学。
今天必须跟大伙聊聊这个geo3D echart tooltip怎么搞，全是血泪经验。
先说个真实案例。
上周给客户做个城市热力图，要求能悬浮显示详细数据。
客户说：“简单啊，ECharts不是自带tooltip吗？”
我信了邪，结果一跑起来，全乱套。
鼠标移上去，提示框要么飞半天，要么被3D模型挡住，要么干脆不显示。
那感觉，就像你在跟一个瞎子谈恋爱，完全对不上频。
我查了官方文档，翻烂了也没找到完美解法。
后来才发现，geo3D的坐标系和普通2D完全不一样。
它的z轴是高度，鼠标事件触发机制也变了。
很多兄弟跟我一样，直接复制粘贴2D的代码，当然报错。
这里有个坑，一定要记住。
geo3D的tooltip配置，不能只写在series里。
得在option的顶层，或者series的itemStyle里做特殊处理。
而且，formatter函数里的this值，跟2D时不一样。
我试过用console.log打印this，发现它是GL的mesh对象，不是普通的series数据。
这就导致，你想获取dataIndex的时候，经常拿到的是undefined。
为了解决这个问题，我折腾了整整两天。
最后发现，得用event.event.data这个路径去取数据。
对，你没看错，是event.event.data。
两层event，这是3D特有的结构。
还有啊，geo3D echart tooltip的样式问题。
默认样式在3D场景下，经常跟背景色混在一起，看不清。
我加了个半透明背景，还加了阴影，这才稍微好点。
但更头疼的是定位。
鼠标移上去，提示框经常出现在屏幕边缘，甚至溢出容器。
这时候，你需要手动计算位置。
用event.event.event.clientX和clientY，减去一些偏移量。
大概偏移个20像素左右，比较合适。
别问为什么，问就是经验值，我也没深究原理，反正好用就行。
再说说性能。
geo3D echart tooltip如果数据量太大，频繁触发，页面会卡。
我有个朋友做的地图，带了几千个点，一移动鼠标，CPU直接飙到100%。
解决办法是，加个节流。
或者，只在鼠标静止0.5秒后才显示tooltip。
这个体验提升巨大，用户也不觉得卡。
对了，还有个细节。
geo3D echart tooltip的文字颜色，默认是黑色。
如果你的地图背景深，字就看不见了。
一定要在formatter里，动态设置color，或者在tooltip的 textStyle里指定白色。
别偷懒，这点小事不做，客户一眼就能挑出毛病。
我上次就因为这个，被产品经理怼了一顿。
他说：“你这提示框跟背景融为一体了，你是想让用户靠意念看数据吗？”
尴尬不？
总之，搞geo3D echart tooltip，心态要稳。
别指望文档能解决所有问题，大部分时候，得靠试错。
多打印日志，多观察DOM结构。
有时候，你看到的bug，其实是浏览器渲染引擎的锅。
没办法，只能 workaround。
最后，送大家一个代码片段，亲测有效。
formatter: function (params) {
if (!params) return '';
return params.name + '
' + params.value;
}
注意，params的结构可能因版本而异。
我用的ECharts 5.4.0，这个写法没问题。
如果你用旧版本，可能参数名不一样。
总之，别照搬，要根据自己的环境调整。
写到这里，眼睛都快瞎了。
希望这篇干货，能帮你们少走弯路。
毕竟，头发掉一根少一根，代码改一行少一行。
加油吧，打工人。
本文关键词：geo3D echart tooltip
![[GESP202606 四级] 扫雷](http://pic.xiahunao.cn/yaotu/[GESP202606 四级] 扫雷)
