今天在element ui的el-tabs标签页中使用ECharts的折线图时遇到这样一个问题:图表无法正常渲染,控制台报can't get DOM width or height.
查了很多方法都没有解决,最后问了个有经验的大佬才解决问题。
大佬原话:echarts渲染时tab选项卡display为none,所以width:100%没有可继承项,被echarts自带方法切割成100px。
解决方法:
1.最简单的方法:给 el-tab-pane 加 lazy 属性。
2.用 v-if 重新渲染。
<el-tab-pane label="商品价格波动图" name="third" :lazy="true">
<!-- 折线图组件 --!>
<good-fluctuations :goodId="goodId" v-if="activeName==='third'"></good-fluctuations>
</el-tab-pane>
3.延时调用ECharts的resize()方法。
即用nextTick通过ref拿echarts重新resize
methods:{
handleClick(tab, event) {
if (tab.name === 'third') {
this.$nextTick(() => {
this.$refs.third.chart.resize()
})
}
},
}
目前想到的就这三种方法,欢迎评论区补充讨论。