解決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)，是說沒有給容器制定寬高，從而導致無法獲取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