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

页面如下

<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还没有加载,所以取不到值),现在问题解决啦,记录下! 

Logo

前往低代码交流专区

更多推荐