uni-app下echarts的geo跟map组件的缩放、拖拽在移动端只会缩小无法放大且点击无响应

uni-app下echarts的geo跟map组件的缩放、拖拽在移动端只会缩小无法放大且点击无响应

bug描述：

uniapp下，echarts的geo跟map组件的缩放、拖拽在移动端只会缩小，无法放大，且点击无响应，或者在缩小后点击无法获取到数据（PC端正常）。
不止是微信内置浏览器，试了好几款手机端浏览器（包括苹果跟安卓，safari/qq/夸克/手机系统浏览器），都会出现这个问题（将代码迁移到html+js+css的传统方式一切运转正常）。

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.56
浏览器平台 微信内置浏览器
浏览器版本 微信8.0.56
项目创建方式 HBuilderX

Image 1 Image 2 Image 3


更多关于uni-app下echarts的geo跟map组件的缩放、拖拽在移动端只会缩小无法放大且点击无响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

第一个和第三个截图是uniapp开发在不同网页端的效果，第二个是传统开发（html+js）

更多关于uni-app下echarts的geo跟map组件的缩放、拖拽在移动端只会缩小无法放大且点击无响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app中echarts地图组件在移动端的兼容性问题。主要原因可能是：

  1. 移动端touch事件与echarts的交互冲突
  2. uni-app的webview对echarts手势事件的支持不完善

解决方案建议：

  1. 尝试升级echarts到最新版本（目前是5.4.3），新版本对移动端支持更好

  2. 在初始化echarts时添加移动端专用配置：

option = {
    geo: {
        roam: true,
        scaleLimit: {
            min: 1,
            max: 3
        }
    }
}
  1. 对于点击事件失效问题，可以尝试添加：
myChart.on('click', function(params) {
    // 确保touch事件能触发click
});

  1. 如果问题依旧，可以考虑使用uni-app的renderjs技术，将echarts渲染在原生webview中

  2. 临时解决方案是禁用移动端手势，改用按钮控制缩放：

roam: false
回到顶部