解決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問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
使用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.
分析問題
從控制臺警告可以發(fā)現(xiàn)，是說沒有給容器制定寬高，從而導(dǎo)致無法獲取DOM的寬度或高度
解決辦法1 (推薦)
給容器寫css樣式，制定寬高
解決辦法2
使用定時器，用setTimeout()延時，等待渲染后再畫圖.
總結(jié)
推薦使用方式1，簡單方便，再次查看界面解決問題
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 在vue使用echarts報錯:invalid dom問題
- 從Echarts報錯中學習Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
- VUE中Echarts的resize事件報錯和移除windows的事件問題
- Vue3+echarts5踩坑以及resize方法報錯的解決
- Vue?Echarts報錯Initialize?failed:?invalid?dom解決方法
- Vue+Echarts報錯Cannot?set?properties?of?undefined?(setting?‘plate‘)
- Vue使用echarts的完整步驟及解決各種報錯
- Vue使用Echarts圖表多次初始化報錯問題的解決方法
相關(guān)文章
下面小編就為大家分享一篇vue頁面離開后執(zhí)行函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
通過簡單的三步讓大家對VUEX快速的入門，本文還介紹了VUEX的最基礎(chǔ)的函數(shù)以及相關(guān)知識點，有興趣的學習下。2018-05-05
這篇文章主要介紹了Vue3?函數(shù)式彈窗的實例小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了VUE實現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Vue中數(shù)組與對象修改觸發(fā)頁面更新的機制與原理解析
這篇文章主要介紹了Vue中關(guān)于數(shù)組與對象修改觸發(fā)頁面更新的機制與原理簡析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue項目中onscroll的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue如何在表格中實現(xiàn)右鍵菜單問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
大家都知道使用 Openlayers可以很靈活自由的做出各種地圖和空間數(shù)據(jù)的展示。而且這個框架是完全免費和開源的，本文記錄下 Vue 使用 OpenLayers 入門，使用 OpenLayers 創(chuàng)建地圖組件的相關(guān)知識，需要的朋友一起學習下吧2021-09-09
這篇文章主要介紹了vue-cli V3.0版本的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10