[Bug] 在uni-app中使用render.js渲染了echarts，在PC端点击事件是正常的，在移动端点击事件失效了。

mudi24 commented 1 year ago

Version

e.g. 5.4.0

Link to Minimal Reproduction

https://github.com/MambaNeverOut/echarts-bug-demo

Steps to Reproduce

下载 HBuilderX ，下载链接：https://www.dcloud.io/hbuilderx.html
下载我的 demo，在HBuilderX打开并运行。我的demo代码：https://github.com/MambaNeverOut/echarts-bug-demo
在浏览器打开，切换到手机模拟器状态，点击图表

Current Behavior

移动端初始化图表后，为图表绑定了点击事件。但是在点击图表的时候并没有触发这个点击事件。

Expected Behavior

希望可以在移动端初始化图表以后，绑定的点击事件可以正常运行

Environment

- OS: Windows 10  64位系统
- Browser: Chrome
- Framework: Vue@2

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@MambaNeverOut It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Bug] eCharts were rendered using the render .js in uni-app, and click events were normal on PC and disabled on mobile. **BODY** ### Version e.g. 5.4.0 ### Link to Minimal Reproduction https://github.com/MambaNeverOut/echarts-bug-demo ### Steps to Reproduce 1. Download HBuilderX, download link: https://www.dcloud.io/hbuilderx.html 2. Download my demo, open and run it in HBuilderX. My demo code: https://github.com/MambaNeverOut/echarts-bug-demo 3. Open in the browser, switch to the phone simulator state, and click the chart ### Current Behavior After the chart is initialized on the mobile terminal, the click event is bound to the chart. But the click event is not triggered when the chart is clicked. ![image](https://user-images.githubusercontent.com/48313235/202403654-0eb641df-3406-4715-a856-b5c4ffe73de0.png) ### Expected Behavior I hope that after the chart is initialized on the mobile side, the bound click event can run normally ### Environment ```markdown - OS: Windows 10 64-bit system -Browser: Chrome - Framework: Vue@2 ``` ### Any additional comments? _No response_

plainheart commented 1 year ago

把这里 https://github.com/MambaNeverOut/echarts-bug-demo/blob/master/components/echarts/echarts.vue#L45 试试。不过随便在移动端打开了个页面测试了下，好像能触发点击事件，但不太容易点到。后面会看看具体什么情况。

mudi24 commented 1 year ago

把这里 https://github.com/MambaNeverOut/echarts-bug-demo/blob/master/components/echarts/echarts.vue#L45 试试。不过随便在移动端打开了个页面测试了下，好像能触发点击事件，但不太容易点到。后面会看看具体什么情况。

这行代码需要怎么处理去尝试，我没明白

mudi24 commented 1 year ago

把这里 https://github.com/MambaNeverOut/echarts-bug-demo/blob/master/components/echarts/echarts.vue#L45 试试。不过随便在移动端打开了个页面测试了下，好像能触发点击事件，但不太容易点到。后面会看看具体什么情况。

使用echarts 散点图，在PC端，鼠标移入后的效果是这样，在移动端鼠标点击也可以实现同样的效果但是我在使用中，移动端没有实现这个效果，所以我看了代码以后觉得是点击事件导致的。

Ovilia commented 1 year ago

这个是用了第三方扩展吗？是的话到相应项目下开 issue

plainheart commented 1 year ago

这行代码需要怎么处理去尝试，我没明白

@MambaNeverOut 不好意思，好像打漏字了🤣。我上面是说把这行代码删掉，不把 chart 放到 data 函数中去，防止其被深度代理。另外我不太熟悉这个框架，用单纯 html +js 去渲染图表的话在移动端是正常的。所以你看下删除那行怎么样，如果不行有可能是框架导致的，用 vConsole 看看是不是有什么报错信息可用。

mudi24 commented 1 year ago

这行代码需要怎么处理去尝试，我没明白

@MambaNeverOut 不好意思，好像打漏字了🤣。我上面是说把这行代码删掉，不把 chart 放到 data 函数中去，防止其被深度代理。另外我不太熟悉这个框架，用单纯 html +js 去渲染图表的话在移动端是正常的。所以你看下删除那行怎么样，如果不行有可能是框架导致的，用 vConsole 看看是不是有什么报错信息可用。

我删除试过了，还是不行。没错，直接使用 html+js 在移动端是正常的，官网有例子的。但是我这里使用的 renderjs 的方式，也没有报错，只是我根据代码逻辑判断后认为：echarts 初始化图表后，绑定事件失效了。

KilianShen commented 1 year ago

echarts没有适配uniapp,官方给的解决方案只针对原生小程序。应该是你这个封装的echarts.vue组件有问题吧。

shyhhh commented 1 year ago

我也遇到了这个问题

xiaogaofudao commented 1 year ago

https://github.com/ecomfe/zrender/issues/1024 很简单的一个问题。没想到现在都没沟通 zrender 开发解决。还是 zrender Env 环境判断问题bug 导致。uniApp 打包h5 会注入 wx 全局变量。导致 zrender 判断认为是微信环境。echarts 又依赖 zrender导致bug。建议官方沟通 zrender 修复解决。并更新zrender 依赖版本。

apache / echarts