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

弹窗口出现后 
this.$nextTick(() => {

初始化echarts

})

Answer 2

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