在uni-app(尤其是小程序-web混合渲染场景,如webview或app-plus)中,使用ECharts时经常会遇到点击事件失效的问题。

1.解决方法

在echarts组件页面script中加上

window.wx = undefined;

2.原理

1. 微信 JS-SDK 拦截了 touch 事件

在微信 webview中,微信会自动注入 window.wx 对象,并劫持了部分原生事件(如 touchstart、touchend、click),用于实现:

  • 分享

  • 拍照

  • 扫码

  • 支付等功能

但ECharts 的点击事件是基于原生 DOM 事件(如 mousedown、touchstart)实现的,依赖于事件冒泡和默认行为。

2. 微信 SDK 阻止了事件冒泡或默认行为

当 window.wx 存在时,微信 SDK 会在某些情况下阻止事件冒泡或修改事件路径,导致:

  • ECharts 的 zr(ZRender)层接收不到点击事件

  • 图表的 click、mouseover 等事件完全失效

为什么 window.wx = undefined; 有效?

window.wx = undefined;

这行代码手动移除了微信 SDK 的入口对象,相当于:

“告诉微信:你别再管我页面的事件了。”

一旦 wx 被移除,微信 SDK 就无法再拦截或修改事件流,ECharts 的事件系统恢复正常。

微信 SDK 通过 window.wx 劫持了事件流,导致 ECharts 点不动。你把它干掉,事件就恢复正常了。

更多推荐