微信小程序Echarts覆蓋正常組件問題解決
最近公司的項目中需要在小程序內(nèi)使用echarts組件來展示數(shù)據(jù)，同時因為使用了自定義導(dǎo)航欄以及蒙版層，導(dǎo)致Echarts圖形覆蓋于所有組件的上方，不符合設(shè)計要求。
嘗試解決的思路：
z-index：Echarts使用的是微信原生canvas，優(yōu)先級高，z-index完全無效。
cover-view：因為page中含有一些如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)文章
這篇文章是國外翻譯JavaScript小技巧，幾個不錯的知識點，方便學(xué)習(xí)js的朋友，感覺內(nèi)容非常不錯特分享一下,需要的朋友可以參考下2018-06-06
本來是很簡單的一個功能，可是一開始弄的時候，還有IE能實現(xiàn)，F(xiàn)F總是不能實現(xiàn)，在網(wǎng)上看了半天，也沒弄出個所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細(xì)節(jié)上面的東西，所有關(guān)于細(xì)節(jié)的，我會用注釋標(biāo)出來的。2015-05-05
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Underscore.js 的模板功能介紹與應(yīng)用
Underscore是一個非常實用的JavaScript庫，提供許多編程時需要的功能的支持，他在不擴(kuò)展任何JavaScript的原生對象的情況下提供很多實用的功能,需要了解的朋友可以詳細(xì)參考下2012-12-12
循環(huán)輸入每組兩個數(shù)hex和n(0<=n<31)，hex是一個16進(jìn)制的數(shù)字，我們要做的是將hex的第n位取反，然后以16進(jìn)制的形式輸出對應(yīng)的結(jié)果2014-06-06
js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域
這篇文章主要介紹了通過js實現(xiàn)點擊div區(qū)域外隱藏div區(qū)域，原理及示例代碼如下2014-06-06
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)二級聯(lián)動菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Phaser.js實現(xiàn)簡單的跑酷游戲附源碼下載,需要的朋友可以參考下2018-10-10
基于JavaScript實現(xiàn)網(wǎng)頁版羊了個羊游戲
最近羊了個羊火的不得了，這篇文章主要為大家介紹了如何利用JS實現(xiàn)個網(wǎng)頁版羊了個羊游戲，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-09-09
JavaScript實現(xiàn)為圖片添加水印的方法詳解
在很多地方，我們都可以看到，上傳圖片的時候，圖片都會被加上默認(rèn)的水印，因此，我們在個人網(wǎng)站進(jìn)行圖片操作時，也可以給它加上自己獨特的水印，本文就為大家整理了JS添加圖片合文字水印的方法，需要的可以參考一下2023-05-05