vue+elementui+echarts显示折线图
页面一个服务列表点击查看,显示服务调用折线图页面如下<template slot-scope="scope"><div><el-button type="text" size="small" @click="getApplicationInfo(scope.row)">查看</el-button...
页面一个服务列表点击查看,显示服务调用折线图
页面如下
<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还没有加载,所以取不到值),现在问题解决啦,记录下!
更多推荐
所有评论(0)