首页 前端知识 【echarts】Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

【echarts】Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

2024-02-24 15:02:53 前端知识 前端哥 477 555 我要收藏

错误

Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

错误翻译

无法获取dom的宽高(简单来说就这个几个字)
翻译:无法获取DOM的宽度或高度。请检查dom。clientWidth dom.clientHeight。它们不应该是0。例如,你可能需要在window.onload的回调函数中调用它。

错误情景

笔者问题出现的情景:从其它页面跳转都没问题,可以正常加载展示,唯独一旦刷新浏览器就加载不到了(dom的宽高都已设置)。通过查资料研究发现出现问题是地方是“浏览器刷新后,页面是需要重新加载渲染,而在加载还未完成时,echarts图函数被已加载,页面还没渲染结束,肯定就获取不到DOM的宽高啦

错误解决方法

解决方法:笔者是在mounted() 中借助setTimeout()来延迟加载。
也可以利用vue生命周期函数来避免该问题的发生

mounted() {
        setTimeout(() => {
            this.get_echarts_1();
            this.get_echarts_2();
        }, 800)
    },

重点:一定要在DOM渲染结束后,再去加载

附加扩展

Vue 生命周期
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2629.html
标签
echarts渲染
评论
发布的文章

【jQuery详细介绍】

2024-03-10 11:03:26

jQuery核心函数

2024-03-10 11:03:10

vue echarts GL3d中国地图

2024-03-10 11:03:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!