echarts图表在el-dialog中显示问题

el-dialog 中动态渲染 echarts 图表

• 现象

  第一次点开不显示图表，第二次点开虽然显示图表，但是图表挤在一起，页面检查发现宽高只有100px,但是明明已经设置样式宽高100%

• 组件代码

• 分析问题

  初步估计是dialog还没完全显示出来，图表已经初始化，导致第一次图表容器还未挂载。然后因为装载图表容器的dom还未挂载，导致设置的宽高样式100%无效。

• 解决办法

  this.$nextTick(() => {
      if (this.chart) {
      this.chart.dispose();
      this.chart = this.$echarts.init(this.$refs.chartContainer);
      this.chart.setOption(this.option, true);
      } else {
      this.chart = this.$echarts.init(this.$refs.chartContainer);
      this.chart.setOption(this.option, true);
      }
  })