1. 程式人生 > >Echarts圖表在移動端和小程式中影響頁面的滾動的解決辦法

Echarts圖表在移動端和小程式中影響頁面的滾動的解決辦法

Echats圖表在移動端顯示後,當手指在圖表區域內滑動,會影響頁面的滾動。h5頁面沒有親測,小程式頁面,經排查,是因為觸發了touchStart、touchMove和touchEnd方法。

一、h5頁面解決方法

1.如果可以的話,移動端建議使用highCharts代替echarts,感覺highcharts更適合移動端。

2.如果不需要與圖表進行互動,而只是純展示的時候,可以用一個透明的元素定位在echarts圖表的上方。這樣滑動的時候就不會觸發小程式的預設行為啦。

二、微信小程式解決方法

由於微信小程式中,echarts的層級最高,無論設定多大層級也無法遮住echarts。而且小程式中好像只能用echarts吧。所以為了解決這個bug,我只能委屈求全了。開啟ec-canvas.wxml檔案,將touchStart、touchMove和touchEnd去掉了,直接刪除就好啦。這三個事件應該是做縮放的吧,我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求,還是沒有真正的解決問題。如果有相同需求的小夥伴可以解解燃眉之急吧。

注: 如果哪位小夥伴有好的方法可以留言討論啊,虛心求教,什麼都阻擋不了我追求真理的心!