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

el-dialog 中动态渲染 echarts 图表

• 现象

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

• 组件代码

  <el-dialog
    v-dialogDrag
    title=""
    width="50%"
    top="10vh"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="handledialogClose"
  >
    <div class="chart-box">
      <div ref="chartContainer" class="chart-container"></div>
    </div>
  </el-dialog>
  

• 分析问题

  初步估计是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);
      }
  })