資訊專欄INFORMATION COLUMN
摘要：項目有一個需求，定時顯示隱藏圖標(biāo)，剛開始是圖表顯示正常。原因可能是讀取不到隱藏的高寬。在可視區(qū)域變化時重新調(diào)整，這時候如果處于隱藏狀態(tài)，那么在時就讀取不到節(jié)點的寬高，圖表就無法顯示。
項目有一個需求，定時顯示隱藏echarts圖標(biāo)，剛開始dom是display:block;圖表顯示正常。等到dom隱藏再顯示的時候圖表還是正常，很好沒有bug。
可是當(dāng)我在dom處于display:none隱藏狀態(tài)時去調(diào)整瀏覽器的可視區(qū)域，dom再顯示的時候問題就來了,echarts顯示不出來了！$-$
報警告Can"t get dom width or height。
原因可能是echarts讀取不到隱藏dom的高寬。
一般做echarts自適應(yīng)都會用到 echarts.resize() 。 在可視區(qū)域變化時重新調(diào)整echarts，這時候如果dom處于隱藏狀態(tài)，那么echarts在resize時就讀取不到節(jié)點的寬高，圖表就無法顯示。
解決辦法在dom變?yōu)?b>display:block;后，再重新賦予節(jié)點寬高和加載圖表，
function setpageSize(){
//取節(jié)點寬高
//加載圖表
}
var _swiper_3d;
_swiper_3d = window.setInterval(function () {
var map_swiper = document.querySelector(".map_swiper");
var map_3d_content = document.querySelector(".map_3d_content");
if (map_swiper.style.display == "none") {
map_3d_content.style.display = "none";
map_swiper.style.display = "block";
setpageSize();//
}else if(map_swiper.style.display == "block") {
map_swiper.style.display = "none";
map_3d_content.style.display = "block";
}
},7000);
注意：如果你echarts有用到setInterval來令圖表動態(tài)化，這時候還需要清除echarts數(shù)據(jù)的定時器再引入方法，否則setInterval會疊加，數(shù)據(jù)越來越快。。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109576.html
摘要：但是由于過于臃腫，公司決定使用來開發(fā)圖表功能。而我們所開發(fā)的圖表是需要有放大縮小功能，于是在網(wǎng)上找了很久，也沒有找到合適的答案，大部分是通過監(jiān)聽窗口大小改變事件來設(shè)置，然而并不是我們所需要的。 最近使用echarts來開發(fā)某系統(tǒng)的圖表功能，先申明我以前用的ext.js，ext.js對圖表有自己的一套組件，用起來也很方便。但是由于ext.js過于臃腫，公司決定使用echarts來開發(fā)圖表...
摘要：今天我就來介紹下在中如何使用來顯示各種圖表。首先需要在我們的項目中安裝組件，該組件是兼容和安卓雙平臺的。組件主要有三個屬性圖表的相關(guān)配置和數(shù)據(jù)。圖表的高度，默認(rèn)值是。解決方法將中的代碼修改為同時將文件拷貝到安卓項目下面的文件夾中。 本文原創(chuàng)首發(fā)于公眾號：ReactNative開發(fā)圈 Echarts是百度推出的免費開源的圖表組件，功能豐富，涵蓋各行業(yè)圖表。相信很多同學(xué)在網(wǎng)頁端都使用過。今...
摘要：最近阿里正式開源的圖表庫基于技術(shù)棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關(guān)文檔組件化阿里的圖表組件手拉手，用開發(fā)動態(tài)刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。最近阿里正式開源的BizCharts圖表庫基于React技術(shù)棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相...
閱讀 3620·2021-11-15 11:38
閱讀 2814·2021-11-11 16:55
閱讀 2569·2021-11-08 13:22
閱讀 2642·2021-11-02 14:45
閱讀 1327·2021-09-28 09:35
閱讀 2613·2021-09-10 10:50
閱讀 479·2019-08-30 15:44
閱讀 2791·2019-08-29 17:06
