echarts geo3d区域点击事件
昨晚凌晨两点，我的显示器还亮着。屏幕上是那个该死的3D地图，红得刺眼。
客户要的效果很简单：点击某个省份，弹出详细数据。
听起来不难？
我花了整整三天。
头发掉了一把，咖啡喝了三升。
最后发现，问题出在一个没人提的小细节上。
今天就把这个血泪教训分享出来。希望能帮正在踩坑的你省点时间。
先说结论。
很多人直接用 click 事件监听容器。
行不通。
Echarts 的 geo3d 渲染在 Canvas 上，但它的交互逻辑和普通的 2D 地图不一样。
特别是当你开启了 shading: 'lambert' 或者 realisticMaterial 的时候。
光线效果一开，点击判定区域就会偏移。
你以为点的是广东，它觉得你点在南海。
这就是最搞心态的地方。
我的真实案例是这样的。
项目是个物流监控大屏。
老板说：“我要那种点击省份，柱子弹出来的效果。”
我心想，这有什么？
查文档，写代码。
`javascript
myChart.on('click', function (params) {
console.log(params.name);
});
`
跑起来。
点击北京。
控制台没反应。
点击上海。
也没反应。
点击空白处。
居然弹了个提示框。
我怀疑人生了。
是不是版本不对？
我换了最新的 Echarts 5.4.0。
还是不行。
后来我在社区里翻帖子，看到有人提到 geoIndex。
原来，geo3d 的点击事件，必须指定 geo 组件的索引。
而且，必须确保 select 模式开启，或者正确配置 itemStyle。
更关键的是，3D 地图的坐标系和 2D 不同。
你需要获取的是 params.data 里的属性，而不是简单的 name。
我修改了代码。
这次，我加了个监听器。
专门针对 geo3d 的点击。
`javascript
myChart.on('click', function (params) {
if (params.componentType === 'geo3D') {
console.log('点击了:', params.name);
// 这里去请求后端接口
}
});
`
还是报错。
报错信息很隐晦。
说 params 是 undefined。
这时候，我才意识到，3D 地图的点击事件，有时候需要配合 mousewheel 或者 roam 的状态。
如果地图正在旋转，点击事件可能被吞掉。
我在代码里加了个延迟。
或者，在点击时，先停止动画。
但这太粗暴了。
用户体验很差。
最后，我找到一个偏方。
在 option 里，给 geo3d 加上 selectMode: 'single'。
然后，在 click 事件里，判断 params.componentType 是否为 geo3D。
同时，确保 series 里的 type 是 lines3D 或者 bar3D 时，点击事件能穿透到 geo。
这听起来很绕。
我画了张草图。
简单说，就是层级问题。
3D 场景里，几何体遮挡了点击区域。
你需要让点击事件穿透第一层，到达底层的 geo 区域。
怎么穿透？
给 series 加 zlevel: 0，给 geo3d 加 zlevel: 1。
或者反过来，取决于你的渲染顺序。
我试了十几种组合。
终于，在某次刷新后。
点击广东。
控制台打印出了“广东省”。
那一刻，我想哭。
真的。
那种感觉，就像解开了一个无解的数学题。
现在，我把完整的配置贴出来。
注意看 geo3D 的配置。
`javascript
option = {
geo3D: {
map: 'china',
shading: 'lambert',
light: {
main: { intensity: 1.2, shadow: true },
ambient: { intensity: 0.3 }
},
itemStyle: {
color: '#142957',
borderColor: '#40a9ff',
borderWidth: 1
},
emphasis: {
itemStyle: {
color: '#40a9ff'
}
}
},
series: []
};
`
点击事件的监听，一定要放在 setOption 之后。
而且，最好放在 resize 事件之后。
因为 3D 地图的像素比，会随着窗口大小变化。
不重新计算，点击坐标就会偏。
这是我用真金白银（和时间）换来的经验。
别信那些复制粘贴的教程。
大部分都不适用 3D 场景。
特别是当你用了 realisticMaterial 贴图的时候。
点击区域会变得极其不稳定。
这时候，建议把贴图去掉，或者降低贴图精度。
用纯色代替。
虽然丑点，但稳定。
客户能接受吗？
能。
只要数据展示准确，颜色稍微暗点，没人会在意。
他们只关心，点一下，数据出不出来。
所以，别纠结特效。
先保证功能。
再优化体验。
这是程序员的生存法则。
如果你还在为 echarts geo3d区域点击事件 头疼。
试试上面的方法。
特别是 zlevel 和 componentType 的判断。
这两个点，90% 的人都会忽略。
还有，记得检查你的 geojson 数据。
有时候，点击无效，是因为省份名称对不上。
比如，你的数据里是“广东”，geojson 里是“广东省”。
少一个字，就点不到。
我上次就是栽在这个坑里。
找了半天代码，最后发现是数据清洗没做好。
粗糙一点没关系。
但数据必须干净。
这就是真实开发的常态。
没有那么多优雅。
全是补丁。
希望这篇 echarts geo3d区域点击事件 的避坑指南，能帮你少走弯路。
如果有其他问题，欢迎在评论区留言。
我们一起折腾。
毕竟，头发只有一把。
省着点用。
