echarts图表显现隐蔽 Can't get dom width or height

2024年4月10日 420次阅读 来源: info

项目有一个需求，定时显现隐蔽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会叠加，数据越来越快。。。
    原文作者：info
    原文地址: https://segmentfault.com/a/1190000019212817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞