【Echarts】vue项目el-dialog中使用echarts，第一次点击不显示的解决方案

  <el-dialog :title="trendtitle"
               :visible.sync="trendopen"
               width="800px"
               append-to-body>
      <div id="main1">div>
    el-dialog>

问题分析：
分析是dialog还没有完全显示出来，图表已经进行了初始化，导致第一次图标容器未挂载。然后因为装载图表容器的dom还未挂载，导致设置的宽高样式100%无效。
问题解决：

使用this.$nextTick(()=>{获取容器})

 this.$nextTick(() => {

        let myChart = this.$echarts.init(document.getElementById('main1'))
        myChart.setOption({
          title: {
            text: upc
          },
          tooltip: {},
          //配置x轴
          xAxis: {
            // data: ['一班', '二班', '三班', '四班', '五班', '六班']
            data: xdataTime,


            boundaryGap: false,
            // axisLine: {
            //   show: true,
            //   lineStyle: {

            //     width: 1,
            //     type: "solid"
            //   }
            // },
            axisLabel: { //设置x轴的字

              interval: 0,//使x轴横坐标全部显示
              rotate: 45
            },

          },

          grid: {
            left: '20%',
            bottom: '30%'
          },
          //配置固定滚动条
          dataZoom: [{
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 10,
            height: '15',
            bottom: '3%',
            zoomLock: true
          }],

          //配置y轴，可不配置，自定义了根据间隔
          yAxis: {},
          series: [{
            name: upc,
            type: 'line',
            // data: [45, 42, 46, 48, 52, 47]
            data: arr
          }]
        })



      })

ps:
使用ref获取并不能够获取到echarts容器，如图

 <el-dialog :title="trendtitle"
               :visible.sync="trendopen"
               width="800px"
               append-to-body>
      <div id="main1"
           ref="main1">div>

    el-dialog>