解决Echarts+-el-tab-pane-的警告：Can'tgetDOMwidthorheight

时间：2023-03-31 16:32:31 vue.js

1问题描述环境：Echarts在Chrome87Element-PlusVue3.0.5+警告如下：2代码

exportdefault{mounted(){varcategory=echarts.init(document.getElementById('main'))//...}}3原因分析原因是。具体问题可以看这里：Echartswarning的关键是clientWidth和clienHeight。当直接在代码中固定高度和宽度时：

控制台打印为clientHeight/clientWidth:console.log(document.getElementById('main').clientWidth)console.log(document.getElementById('main').clientHeight)都是0，原因是，把图表放在外面没有警告：

初始化Echarts时，不允许Echarts获取正确的clientHeight和clientWidth，尝试过的解决方案是监听tab-click：

但这需要手动点击tab监听，即如果设置了默认tab，则无法监听另一个尝试过的解决方案是手动设置宽度/高度：

mounted(){this.$refs.main.style.width=500this.$refs.main.style.height=500varchart=echarts.init(document.getElementById('main'))}也不起作用。4解决方案使用Object.defineProperty设置clientWidth/clientHeight：.getElementById('main'),'clientHeight',{get:function(){return500;}})varchart=echarts.init(document.getElementById('main'))}也可以把div放在Remove上样式：这样就不会有警告了。

上一篇：如何在十分钟内拥有自己的个人网站

下一篇：这样学vue，一年之内你就能成为国内顶尖专家

解决Echarts+-el-tab-pane-的警告：Can'tgetDOMwidthorheight相关文章