快捷導(dǎo)航

解決vue使用echarts報(bào)錯(cuò):Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight問(wèn)題

更新時(shí)間：2025年05月23日 09:52:44 作者：水星國(guó)王

這篇文章主要介紹了解決vue使用echarts報(bào)錯(cuò):Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題描述

使用vue整合echarts的時(shí)候報(bào)錯(cuò)：

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.

分析問(wèn)題

從控制臺(tái)警告可以發(fā)現(xiàn)，是說(shuō)沒(méi)有給容器制定寬高，從而導(dǎo)致無(wú)法獲取DOM的寬度或高度

解決辦法1 (推薦)

給容器寫(xiě)css樣式，制定寬高

解決辦法2

使用定時(shí)器，用setTimeout()延時(shí)，等待渲染后再畫(huà)圖.

總結(jié)

推薦使用方式1，簡(jiǎn)單方便，再次查看界面解決問(wèn)題

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下
2018-03-03
深入探究Vue中三種不同的props用法
Vue?的核心功能之一在于?props?的使用,props?是我們?cè)?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會(huì)深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時(shí)使用它們,需要的朋友可以參考下
2024-03-03
詳解Vue2.0里過(guò)濾器容易踩到的坑
本篇文章主要介紹了Vue2.0里過(guò)濾器容易踩到的坑，vue2.0需要自己定義過(guò)濾器。有興趣的可以了解一下
2017-06-06
Vue 3集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能
本文詳細(xì)介紹了如何使用 Vue 3 框架集成海康Web插件實(shí)現(xiàn)視頻監(jiān)控功能,通過(guò)定義屬性、事件、變量,以及編寫(xiě)初始化、播放視頻、處理節(jié)點(diǎn)點(diǎn)擊事件等方法,我們成功實(shí)現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧
2024-11-11
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue動(dòng)態(tài)組件與內(nèi)置組件淺析講解
閑話少說(shuō)，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時(shí)間，前面我們了解了vue的組件，我們本文主要是講解vue的動(dòng)態(tài)組件和內(nèi)置組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
通過(guò)npm引用的vue組件使用詳解
本文章通過(guò)實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說(shuō)明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下
2017-03-03
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問(wèn)屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路
這篇文章主要給大家介紹了關(guān)于Vite版本更新檢查實(shí)現(xiàn)頁(yè)面自動(dòng)刷新的解決思路,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-02-02
vue cli3.0 引入eslint 結(jié)合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結(jié)合vscode使用，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05