Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mudi24 opened this issue Nov 17, 2022 · 10 comments
Labels
bug pending We are not sure about whether this is a bug/new feature. third-party

Comments

@mudi24
Copy link

mudi24 commented Nov 17, 2022

Version

e.g. 5.4.0

Link to Minimal Reproduction

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

Steps to Reproduce

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

Current Behavior

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

Expected Behavior

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

Environment

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

Any additional comments?

No response

@mudi24 mudi24 added the bug label Nov 17, 2022
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Nov 17, 2022
@echarts-bot
Copy link

echarts-bot bot commented Nov 17, 2022

@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

Expected Behavior

I hope that after the chart is initialized on the mobile side, the bound click event can run normally

Environment

- OS: Windows 10 64-bit system
-Browser: Chrome
- Framework: Vue@2

Any additional comments?

No response

@plainheart
Copy link
Member

plainheart commented Nov 18, 2022

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

@mudi24
Copy link
Author

mudi24 commented Nov 18, 2022

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

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

@mudi24
Copy link
Author

mudi24 commented Nov 18, 2022

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

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

@Ovilia
Copy link
Contributor

Ovilia commented Nov 18, 2022

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

@plainheart
Copy link
Member

plainheart commented Nov 18, 2022

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

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

@mudi24
Copy link
Author

mudi24 commented Nov 18, 2022

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

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

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

@KilianShen
Copy link

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

@shyhhh
Copy link

shyhhh commented Jun 2, 2023

我也遇到了这个问题

@xiaogaofudao
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug pending We are not sure about whether this is a bug/new feature. third-party
Projects
None yet
Development

No branches or pull requests

6 participants