vue+elementui+echarts显示折线图

页面一个服务列表点击查看，显示服务调用折线图

页面如下

<template slot-scope="scope">
           <div>
              <el-button type="text" size="small" @click="getApplicationInfo(scope.row)">查看</el-button>
          </div>

</template>

模态框

<el-dialog :visible.sync="dialogVisible">
            <div ref="myChart" style="width: 100%; height: 400px;"></div>
 </dialog>

点击事件

getApplicationInfo:function(row) {
        this.dialogVisible = true;
            if (obj.myChart){
                obj.myChart.clear();
                obj.myChart.dispose();
            }
            obj.myChart = echarts.init(obj.$refs.myChart);
            obj.myChart.setOption({
                title:{text: '服务调用次数'},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: res.data.xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: res.data.sdata,
                        type: 'line'
                    }]
            });                
           });    
       },

请求返回的数据:

最后效果图:

 

之前网上百度过很多方法，有使用this.$nextTick()去加载数据然后赋值，需要点两次才能显示正确数据，还有在mounted里面执行画图的方法但是也取不到值(通过getElementById()去初始化的，这里貌似dom还没有加载，所以取不到值),现在问题解决啦，记录下！