微信小程序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'/>

  1. 再增加了遮罩层之后，在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,    },}