共计 1676 个字符,预计需要花费 5 分钟才能阅读完成。
1 问题形容
环境:
Chrome 87
Element-Plus
Vue3.0.5
<el-tab>
+<el-tab-pane>
中应用Echarts
正告如下:
2 代码
<el-tabs type="border-card">
<el-tab-pane label="xxx">
<div id="main" style="width: 500px;height: 500px;">
</div>
</el-tab-pane>
</el-tabs>
export default {mounted() {var category = echarts.init(document.getElementById('main'))
//...
}
}
3 起因剖析
起因是<el-tab-pane>
,具体能够查看这里的issue
:
Echarts
正告的要害是 clientWidth
和clienHeight
,间接在代码中固定高宽时:
<div id="main" style="width: 500px;height: 500px;"></div>
控制台打印为clientHeight
/clientWidth
:
console.log(document.getElementById('main').clientWidth)
console.log(document.getElementById('main').clientHeight)
两者均为0
,起因在于<el-tab-pane>
,将图表放到里面时并没有正告:
<el-tabs type="border-card">
<div id="main" style="width: 500px;height: 500px;">
</div>
<el-tab-pane label="xxx">
</el-tab-pane>
</el-tabs>
初始化 Echarts
时,<el-tab-pane>
并没有让 Echarts
获取正确的 clientHeight
以及clientWidth
,尝试过的解决办法是监听tab-click
:
<el-tabs type="border-card" @tab-click="xxx">
<el-tab-pane label="xxx">
<div id="main" style="width: 500px;height: 500px;">
</div>
</el-tab-pane>
</el-tabs>
然而这须要手动点击 tab
能力监听到,也就是如果设置了默认 tab
这是无奈监听到的。
另一个尝试过的计划是手动设置width
/height
:
<el-tabs type="border-card">
<el-tab-pane label="xxx">
<div id="main" ref="main" style="width: 500px;height: 500px;">
</div>
</el-tab-pane>
</el-tabs>
mounted(){
this.$refs.main.style.width=500
this.$refs.main.style.height=500
var chart = echarts.init(document.getElementById('main'))
}
也是不行。
4 解决方案
应用 Object.defineProperty
设置clientWidth
/clientHeight
:
mounted(){Object.defineProperty(document.getElementById('main'),'clientWidth',{get:function(){return 500;}})
Object.defineProperty(document.getElementById('main'),'clientHeight',{get:function(){return 500;}})
var chart = echarts.init(document.getElementById('main'))
}
同时也能够把 div
上的 style
去掉:
<div id="main"></div>
这样就不会呈现正告了。
正文完