问题描述
在uni-app中使用render.js渲染了echarts,在PC端点击事件是正常的,在移动端点击事件失效了。导致了移动端图表交互出现了问题。
复现步骤
我提供的复现代码链接: https://github.com/MambaNeverOut/echarts-bug-demo
[复现问题的步骤]
- 下载 HBuilderX ,下载链接: https://www.dcloud.io/hbuilderx.html
- 下载我的 demo, 在HBuilderX打开并运行。我的demo代码: https://github.com/MambaNeverOut/echarts-bug-demo
- 在浏览器打开,切换到手机模拟器状态,点击图表
预期结果
使用echarts 散点图,在PC端,鼠标移入后的效果是这样,在移动端鼠标点击也可以实现同样的效果
实际结果
但是我在使用中,移动端没有实现这个效果,所以我看了代码以后觉得是点击事件导致的。
系统信息:
- 发行平台: H5平台
- 操作系统:Windows 10 64位系统
- HBuilderX 3.4.7
补充信息
移动端初始化图表后,为图表绑定了点击事件。但是在点击图表的时候并没有触发这个点击事件。
5条答案
按热度按时间cetgtptt1#
理论上不是uni-app框架导致,应该是echarts对touch事件对兼容问题。
需要从源头处理,或者业务层规避。
prdp8dxp2#
理论上不是uni-app框架导致,应该是echarts对touch事件对兼容问题。
需要从源头处理,或者业务层规避。
如果不使用 uni-app 的 renderjs 的渲染方式,echarts 在移动端的功能是正常的。
rvpgvaaj3#
理论上不是uni-app框架导致,应该是echarts对touch事件对兼容问题。
需要从源头处理,或者业务层规避。
如果不使用 uni-app 的 renderjs 的渲染方式,echarts 在移动端的功能是正常的。
在uni-app的web-view组件中表现是否正常?
z3yyvxxp4#
理论上不是uni-app框架导致,应该是echarts对touch事件对兼容问题。
需要从源头处理,或者业务层规避。
如果不使用 uni-app 的 renderjs 的渲染方式,echarts 在移动端的功能是正常的。
在uni-app的web-view组件中表现是否正常?
如果我使用 js 方式去渲染 echarts ,然后在uni-app的web-view 组件中展示,这样效果是正常的
lzfw57am5#
理论上不是uni-app框架导致,应该是echarts对touch事件对兼容问题。
需要从源头处理,或者业务层规避。
如果不使用 uni-app 的 renderjs 的渲染方式,echarts 在移动端的功能是正常的。
在uni-app的web-view组件中表现是否正常?
如果我使用 js 方式去渲染 echarts ,然后在uni-app的web-view 组件中展示,这样效果是正常的
好的,分析是由于 echarts 从一些环境信息判断为了 PC 端。不过此类问题的排查,可能排不到前面。
在此之前你可以尝试使用 chrome://inspect/#devices 进行调试,初步定位一些信息。