echarts图表显示隐藏 Can't get dom width or height

I_Am 发布于2019-08-26 13:48 / 2208人阅读

摘要：项目有一个需求，定时显示隐藏图标，刚开始是图表显示正常。原因可能是读取不到隐藏的高宽。在可视区域变化时重新调整，这时候如果处于隐藏状态，那么在时就读取不到节点的宽高，图表就无法显示。

项目有一个需求，定时显示隐藏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显示显示图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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