在微信小程序中使用echarts插件的時候，遇到了一個問題：當系統是iOS時，如果手指先是長按圖表，然后頁面會無法滑動，其中南丁格爾玫瑰圖尤其明顯。作為一個微信小程序的新手開發，這個問題屬實難倒我了。

解決方案：

1.添加遮罩層。

使用一個遮罩層覆蓋echarts圖表，這樣的話，當長按并滑動頁面的時候，滑動的就是這個遮罩層了，自然就可以解決問題。

遇到的問題：

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' />

再添加了遮罩層之后，在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,}, }

如果你想開發小程序或者app的話，可以通過第三方專業開發平臺，來幫助你實現開發需求：廈門在乎科技-專注廈門小程序開發公司、app開發、網站開發

總結

以上是生活随笔為你收集整理的微信小程序iOS系统上echarts不能滑动的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。