微信小程序`iOS`系統上`echarts`不能滑動的問題

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