Element-ui标签页中使用ECharts无法渲染DOM的原因和解决方法总结

今天在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()
        })
      }
    },
}

目前想到的就这三种方法，欢迎评论区补充讨论。