参考:https://blog.csdn.net/crazywoniu/article/details/80942642
背景:在列表页选择几行数据,点击后展示折线图,所以需要传递选择的这几行的id,到折线图的页面是发起请求,获取值之后展示折线图
一、封装的api中:
# 根据id去请求数据的接口,在折线图的页面需要请求该接口
export const getRecordByids = params => { return axios.get(`${record_base}/api/getRecords`, { params: params }); };
二、列表页定义方法,该方法是点击按钮后,传递id并跳转到折线图页面,以下为列表模块的关键代码
#<template>中
#表格标签中设置所选行
<el-table :data="records" highlight-current-row v-loading="listLoading" @selection-change="selsChange" :height="tableHeight" style="width: 100%;margin-top:20px;">
<el-button type="primary" @click="testNewPage" :disabled="this.sels.length===0">查看所选趋势图</el-button>
#data中:
sels: [] //列表选中行
#method中定义:
#该方法是把选中行取出,放在sels中
selsChange: function (sels) {
this.sels = sels;
},
# 该方法是跳转新页面并传递参数
testNewPage(sels){
var ids = this.sels.map(item => item.id).toString();
this.$router.push({name:'趋势图',params: { ids: ids }})
},
三、折线图模块中
#data中:
data(){
return {
chartLine: null,
ids:"",
records:[],
xAxis:[],
tps:[],
rt:[]
}
},
# method中发送请求和绘图
getRecords() {
let para = {
ids: this.$route.params.ids
};
//NProgress.start();
getRecordByids(para).then((res) => {
this.records = res.data.data;
var xAxis = new Array();
this.xAxis = xAxis;
var tps = new Array();
var rt = new Array();
for (var i = 0;i<this.records.length;i++) {
xAxis.push(this.records[i].id);
tps.push(this.records[i].tps);
rt.push(this.records[i].avgRt);
}
console.log(xAxis)
this.xAxis = xAxis;
this.tps = tps;
this.rt = rt;
});
},
drawLineChart()//略
drawCharts() {
this.drawLineChart();
},
# mounted
mounted:function(){
this.getRecords();
this.drawCharts();
},
网友评论