echarts圖表顯示隱藏 Can't get dom width or height

I_Am 發布于2019-08-26 13:48 / 2210人閱讀

摘要：項目有一個需求，定時顯示隱藏圖標，剛開始是圖表顯示正常。原因可能是讀取不到隱藏的高寬。在可視區域變化時重新調整，這時候如果處于隱藏狀態，那么在時就讀取不到節點的寬高，圖表就無法顯示。

項目有一個需求，定時顯示隱藏echarts圖標，剛開始dom是display:block;圖表顯示正常。等到dom隱藏再顯示的時候圖表還是正常，很好沒有bug。
可是當我在dom處于display:none隱藏狀態時去調整瀏覽器的可視區域，dom再顯示的時候問題就來了,echarts顯示不出來了！$-$
報警告Can"t get dom width or height。

原因可能是echarts讀取不到隱藏dom的高寬。

一般做echarts自適應都會用到 echarts.resize() 。在可視區域變化時重新調整echarts，這時候如果dom處于隱藏狀態，那么echarts在resize時就讀取不到節點的寬高，圖表就無法顯示。

解決辦法

在dom變為display:block;后，再重新賦予節點寬高和加載圖表，

function setpageSize(){
    //取節點寬高
    //加載圖表
}

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來令圖表動態化，這時候還需要清除echarts數據的定時器再引入方法，否則setInterval會疊加，數據越來越快。。。

GPU云服務器云服務器 echarts 圖表圖片顯示大小width 讀取or顯示顯示圖表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109576.html

常用的前端插件V1

摘要：輕量級，功能強大的日期選擇器，兼容和不依賴于其他庫，少，使用作為界面的圖標兼容在配置參數中，所有的類型為或的參數都可以通過屬性在標簽中進行設置例如月份可以滾動，年份可以手動輸入是否啟用日期選擇是否啟用秒選擇器設置日期顯示格 some jquery plugins are used for labelMangerSystem,some things may not be complete...

xiao7cn 2019-08-20 16:16 評論0 收藏0
vue.js+Echarts開發圖表放大縮小功能

摘要：但是由于過于臃腫，公司決定使用來開發圖表功能。而我們所開發的圖表是需要有放大縮小功能，于是在網上找了很久，也沒有找到合適的答案，大部分是通過監聽窗口大小改變事件來設置，然而并不是我們所需要的。最近使用echarts來開發某系統的圖表功能，先申明我以前用的ext.js，ext.js對圖表有自己的一套組件，用起來也很方便。但是由于ext.js過于臃腫，公司決定使用echarts來開發圖表...

genedna 2019-08-20 17:06 評論0 收藏0
React Native使用百度Echarts顯示圖表

摘要：今天我就來介紹下在中如何使用來顯示各種圖表。首先需要在我們的項目中安裝組件，該組件是兼容和安卓雙平臺的。組件主要有三個屬性圖表的相關配置和數據。圖表的高度，默認值是。解決方法將中的代碼修改為同時將文件拷貝到安卓項目下面的文件夾中。本文原創首發于公眾號：ReactNative開發圈 Echarts是百度推出的免費開源的圖表組件，功能豐富，涵蓋各行業圖表。相信很多同學在網頁端都使用過。今...

Lucky_Boy 2019-08-21 17:27 評論0 收藏0
三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

摘要：最近阿里正式開源的圖表庫基于技術棧，各個圖表項皆采用了組件的形式，貼近的使用特點。相關文檔組件化阿里的圖表組件手拉手，用開發動態刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進行引用。最近阿里正式開源的BizCharts圖表庫基于React技術棧，各個圖表項皆采用了組件的形式，貼近React的使用特點。同時BizCharts基于G2進行封裝，Bizcharts也繼承了G2相...

draveness 2019-04-23 13:19 評論0 收藏0