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

这篇文章主要介绍了解决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.

分析问题

从控制台警告可以发现，是说没有给容器制定宽高，从而导致无法获取DOM的宽度或高度

解决办法1 (推荐)

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

解决办法2

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

总结

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

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

您可能感兴趣的文章:

• 在vue使用echarts报错:invalid dom问题
• 从Echarts报错中学习Vue3 ref和shallowRef区别及其组件二次封装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图表多次初始化报错问题的解决方法