做地图可视化这行十一年了，见过太多需求变来变去。上周有个哥们找我，说他们老板突然改主意，地图上的省份不能点了，一点就弹窗，体验太差。我一看代码，好家伙，直接给geo加了click监听，里面还嵌套了个复杂的业务逻辑，性能卡得一批。

其实很多人不知道，echarts的geo组件默认就是支持点击的，因为它是基于SVG或者Canvas渲染的，交互性很强。但有时候我们真的不需要这个功能，或者觉得点击反馈太突兀，想把它禁掉。这时候如果你还在那儿纠结怎么在click事件里写if判断去return，那就有点钻牛角尖了。

咱们得从根儿上解决。最粗暴也最有效的方法，就是不让它触发事件。你可以试试在setOption的时候，把eventHandler给关掉，或者更简单点，直接给geo配置项加个disableHover: true，虽然这主要是管悬停的，但配合样式修改，效果立竿见影。不过，要想彻底禁用点击，最好的办法其实是修改geo的zlevel或者z值，把它放到最底层，或者干脆把它的selectable属性设为false。对，就是selectable: false，这个属性不仅能禁用选中，通常也能连带着把点击的高亮效果给去掉了。

我拿之前的一个项目案例来说，那是给某物流公司做的全国热力图。当时客户非要加点击下钻功能，结果测试发现，移动端上手指粗，经常误触，导致页面卡顿。后来我们调整策略，把geo的selectable设为false，然后在外部加了一个透明的遮罩层，或者直接在click事件里判断如果是移动端就直接return。这样既保留了PC端的交互，又解决了移动端的问题。

当然，还有一种情况，就是你想禁用点击，但不想改变地图的样式。这时候你可以利用echarts的事件机制，在注册click事件的时候，直接return false。比如：

myChart.on('click', function (params) {

if (params.componentType === 'geo') {

return false;

}

});

这个方法虽然简单，但有个小坑，就是如果地图上有其他系列的点击事件，可能会受影响。所以最好还是从配置项入手。

另外，有些朋友可能会问，那悬停效果要不要也禁掉？如果连悬停都不要，记得把hoverable设为false。这样地图就彻底“安静”了，用户只能看，不能动。

再补充一点，有时候禁用点击是为了防止用户误操作，比如在一些只读的报表里。这时候，你可以把地图做成静态图片，或者用canvas直接画出来，这样性能最好，也最安全。不过如果是动态数据，还是得用echarts。

最后提醒一下，别在click事件里写太复杂的逻辑，尤其是涉及到DOM操作或者Ajax请求的，很容易导致页面假死。如果非要做，记得加个防抖或者节流。

总之，echarts的geo禁用点击事件，核心就是要么从配置项上把交互关掉，要么从事件监听上把行为拦截住。选哪种方式，看你具体的业务场景。别死磕代码，多想想用户体验，这才是做产品的正道。

本文关键词：echarts的geo禁用点击事件