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

弹窗口出现后&nbsp;this.$nextTick(() => {初始化echarts})

Answer 2

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