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

Posted 2021-09-07 forceddd

微信小程序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,
    },
}