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