用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序iOS系统上echarts不能滑动的问题

Rolan 2021-6-21 00:11

微信小程序iOS系统上echarts不能滑动的问题在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显。作为一个微信小程序的新 ...

微信小程序 iOS 系统上 echarts 不能滑动的问题

在微信小程序中使用 echarts 插件的时候,遇到了一个问题:当系统是 iOS 时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显。作为一个微信小程序的新手开发,这个问题属实难倒我了。


解决方案:

1.添加遮罩层。

使用一个遮罩层覆盖 echarts 图表,这样的话,当长按并滑动页面的时候,滑动的就是这个遮罩层了,自然就可以解决问题。

遇到的问题:

  1. canvas 是原生组件,层级很高, view 无法作为遮罩层。我使用的是 cover-view 作为遮罩层。

    <cover-view wx:if="{{isIOS}}" class="echart-mask" ></cover-view>
    <e-chart  
         chart-class='echart'
         option='{{ data.getEChartOption(employeeInfoList) }}' 
         bindinstance='getEchartInstance'
    />
    复制代码
  2. 再添加了遮罩层之后,在 iOS 系统上可以正常滑动,但是在 Android 系统上又无法滑动了(真是风水轮流转 ̄へ ̄)。我是在页面上对系统进行判断,以决定是否创建遮罩层。

    wx.getSystemInfo({
      success: (result) =>this.setData({ isIOS: result.system.match(/iOS/) }),
    });
    复制代码

2.将图表转为图片展示。

因为 echarts 图标在我这只是进行数据展示,而不会与用户进行交互,所以也考虑到了在echarts的过渡动画走完之后,用图片来代替 echarts 组件。

getEchartInstance({ detail: echart }) {
        echart.on('finished', () => {
            echart
                .getDom()
                .saveAsImage()
                .then((path) => {
                    this.setData({ homeworkCountEchartImg: path });
                });
        });
    },
复制代码

遇到的问题:

在图片替换 echarts 的时候,出现了一次闪烁。要注意在图片加载完毕之后再移除 echarts ,可以使用 image 的 bindload 来控制。

3.使用 echart 插件的 disableTouch 属性。

在 option 对象的根目录,添加 disableTouch 属性,设为true即可。这是微信 echarts 插件官方技术人员给出的一种解决方案。(吐槽一下微信小程序的文档,太简洁了,完全没有找到这个属性的只言片语好吧,新手很无奈呀(•́へ•́╬))。

var eChartOption = {
    disableTouch: true, //解决ios系统,echarts长按不能滑动的问题
    color: [
        '#79db66',
        '#769efd',
        '#f6994f',
        '#f5df4e',
        '#a668f5',
        '#66cbdb',
        '#dc76fd',
        '#6062e0',
        '#ec7997',
        '#88e6be',
    ],
    legend: {
        selectedMode: false,
        show: false,
    },
}
复制代码
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: forceddd 来自: juejin