解决vue使用echarts报错:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight问题

更新时间：2025年05月23日 09:52:44 作者：水星国王

这篇文章主要介绍了解决vue使用echarts报错:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

目录

问题描述
分析问题
解决办法1 (推荐)
解决办法2
总结

问题描述

使用vue整合echarts的时候报错：

log.js:59 [ECharts] 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的宽度或高度

解决办法1 (推荐)

给容器写css样式，制定宽高

解决办法2

使用定时器，用setTimeout()延时，等待渲染后再画图.

总结

推荐使用方式1，简单方便，再次查看界面解决问题

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

vue数据传递--我有特殊的实现技巧
这篇文章主要介绍了vue数据传递一些特殊梳理技巧,需要的朋友可以参考下
2018-03-03
深入探究Vue中三种不同的props用法
Vue 的核心功能之一在于 props 的使用,props 是我们在 Vue 中从父组件到子组件传递数据的方式,但并非所有 props 都是一样的,本文我们会深入学习这三种不同类型的 props,看看它们有何不同,以及何时使用它们,需要的朋友可以参考下
2024-03-03
详解Vue2.0里过滤器容易踩到的坑
本篇文章主要介绍了Vue2.0里过滤器容易踩到的坑，vue2.0需要自己定义过滤器。有兴趣的可以了解一下
2017-06-06
Vue 3集成海康Web插件实现视频监控功能
本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能,通过定义属性、事件、变量,以及编写初始化、播放视频、处理节点点击事件等方法,我们成功实现了视频监控系统的前端部分,感兴趣的朋友一起看看吧
2024-11-11
vue.js的状态管理vuex中store的使用详解
今天小编就为大家分享一篇vue.js的状态管理vuex中store的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue动态组件与内置组件浅析讲解
闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
通过npm引用的vue组件使用详解
本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。本文给大家介绍的非常详细，需要的的朋友参考下
2017-03-03
Vue3全局属性app.config.globalProperties的实现
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
Vite版本更新检查实现页面自动刷新的解决思路
这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-02-02
vue cli3.0 引入eslint 结合vscode使用
这篇文章主要介绍了vue cli3.0 引入eslint 结合vscode使用，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05

最新评论