echarts折线图在element-UI中不能显示

Question

vue项目里面用element做了一个弹框，弹框里面用echarts做了个折线图，把echarts的div放在弹框的外面，折线图显示内容，否则只有一个空架子不显示内容，这是怎么回事？

<el-dialog title="" :visible.sync="dialogVisible">

        <!-- Table -->
        <el-table :data="gridData">
          <el-table-column property="loopName" label="回路名称" width="150"></el-table-column>
          <el-table-column property="electricType" label="用电类型" width="200"></el-table-column>
          <el-table-column property="galvanicCurrent" label="电流(A)"></el-table-column>
          <el-table-column property="temperature" label="导线温度(℃)"></el-table-column>
          <el-table-column property="leakageCurrent" label="漏电流(mA)"></el-table-column>
          <el-table-column property="state" label="状态"></el-table-column>
          <el-table-column property="loopType" label="回路类型"></el-table-column>
        </el-table>
        <!-- Statistical chart -->
        <div id="myChart" :style="{width: '1100px', height: '400px'}"></div>
      </el-dialog>
      
  

Answer 1

element官网有说，dialog是懒加载的，第一次打开后才会把dom放进去，要在dialog的open事件里面初始化echart

Answer 2

弄个div将表格和echart包起来

<div class="dialog-content">
    <el-table></el-table>
    <div id="myChart"></div>
</div>