微信小程序Echarts覆蓋正常組件問題解決
最近公司的項目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù)，同時因為使用了自定義導航欄以及蒙版層，導致Echarts圖形覆蓋于所有組件的上方，不符合設計要求。
嘗試解決的思路：
z-index：Echarts使用的是微信原生canvas，優(yōu)先級高，z-index完全無效。
cover-view：因為page中含有一些如input之類的無法與cover-view進行嵌套使用的元素，故cover-view也無法奏效。
wx.canvasToTempFilePath：wx.canvasToTempFilePath官方文檔
思路是等待畫圖完成之后利用這個方法將畫布導出成圖片，來代替canvas進行數(shù)據(jù)展示，使用display來控制canvas的隱藏會出現(xiàn)一些不太好看的閃爍，因此使用position:absolute將canvas預先移動至屏幕外。
該方法需要在draw()回調(diào)方法中使用，部分代碼如下：
ec-canvas.js
wxml中
js中
這個過程中還是存在著一些問題，例如如果畫圖較慢會導致生成的圖片只有一部分數(shù)據(jù)甚至是全透明的，目前只找到了一個并不完善的解決方案，就是使用setTimeOut來增加一些延遲，等待畫圖結束，因此，加上了wx.showLoading來過渡，但依然存在一些隱患。希望官方可以后續(xù)的更新中可以推出一些較為完善的方案。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ES6字符串模板，剩余參數(shù)，默認參數(shù)功能與用法示例
這篇文章主要介紹了ES6字符串模板，剩余參數(shù)，默認參數(shù)功能與用法,結合具體實例形式分析了ECMAScript6中的6字符串模板，剩余參數(shù)，默認參數(shù)的概念、作用、使用方法與相關注意事項,需要的朋友可以參考下2017-04-04
在前兩篇文章中，介紹了構造繼承和原型繼承。今天把剩下的兩種寫完，這兩種的應用相對于前兩種來說應用很少，因此我把他們稱為是非主流繼承方式2014-05-05
這篇文章主要介紹了使用js實現(xiàn)一個可編輯的select下拉列表，個人感覺還不錯,需要的朋友可以參考下2014-02-02
JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript字符和ASCII實現(xiàn)互相轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
JS基于Ajax實現(xiàn)的網(wǎng)頁Loading效果代碼
這篇文章主要介紹了JS基于Ajax實現(xiàn)的網(wǎng)頁Loading效果代碼,通過時間函數(shù)結合數(shù)學運算實現(xiàn)頁面樣式的動態(tài)變換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要給大家介紹了關于js使用文件流下載csv文件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
下面小編就為大家?guī)硪黄獪\談鍵盤上回車按鈕的js觸發(fā)事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
下面小編就為大家分享一篇js 提取某()特殊字符串長度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了移動端手指操控左右滑動的菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法,涉及javascript數(shù)學運算及頁面元素動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08