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