vue弹窗里面使用echarts不显示的问题

前言：
弹出层中插入echarts图表，没有报错，但是图表加载不出来
此弹出层没有用element 的dialog 对话框，用的自己封装的组件，但是出现的问题是一样的

原因分析：
弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。
弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 弹出层 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。

解决方式：
一、nextTick

  this.$nextTick(() => {
  //  执行echarts方法
    this.initEcharts()
  })

二、setInterval

 setInterval(() => {
        //  执行echarts方法
        this.initEcharts()
      }, 500);

弹出层组件和画图方法：

<popup :tClick="retreatFromSave" :tBoot="organizationUp" tWidth='1080px'>  
  <div slot="main" class="teamwork-text-nr">
    <div class="line">实景图</div>
        <!-- 图表 -->
        <div id="sCharts" style="height: 500px;"></div>
  	</div>
  <div slot="footer" style="text-align: right;padding-right: 30px;">
    <jurisbtn tFloat="none" :tClick="retreatFromSave" tName="关闭" type="primary"></jurisbtn>
  </div>
</popup>

//   图表
initEcharts() {
  const myChart = this.$echarts.init(document.getElementById('sCharts'))
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '总体积',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} m³'
        }
      },
      {
        type: 'value',
        name: '使用负荷',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '总体积',
        type: 'bar',
        data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3],
        itemStyle: {
          normal: {
            color: '#d0e17d'
          }
        }
      },
      {
        name: '使用负荷',
        type: 'line',
        yAxisIndex: 1,
        data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2],
        itemStyle: {
          normal: {
            color: '#898989'
          }
        }
      }
    ]
  }
  myChart.setOption(option);
},