修改图表

This commit is contained in:
shiziyuan9527 2020-04-26 15:27:24 +08:00
parent bc518448a6
commit e0a47493ab
1 changed files with 51 additions and 20 deletions

View File

@ -96,10 +96,16 @@
})
this.$get("/performance/report/content/load_chart/" + this.id, res => {
let data = res.data;
let userList = data.filter(m => m.groupName === "users").map(m => m.yAxis);
let hitsList = data.filter(m => m.groupName === "hits").map(m => m.yAxis);
let userMax = this._getChartMax(userList);
let hitsMax = this._getChartMax(hitsList);
let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
let yAxisListMax = this._getChartMax(yAxisList);
let yAxis2ListMax = this._getChartMax(yAxis2List);
let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
yAxisIndex0List = this._unique(yAxisIndex0List);
let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
yAxisIndex1List = this._unique(yAxisIndex1List);
let loadOption = {
title: {
text: 'Load',
@ -119,17 +125,17 @@
name: 'User',
type: 'value',
min: 0,
max: userMax,
max: yAxisListMax,
splitNumber: 5,
interval: userMax / 5
interval: yAxisListMax / 5
},
{
name: 'Hits/s',
type: 'value',
splitNumber: 5,
min: 0,
max: hitsMax,
interval: hitsMax / 5
max: yAxis2ListMax,
interval: yAxis2ListMax / 5
}
],
series: []
@ -152,15 +158,27 @@
}
]
}
yAxisIndex0List.forEach(item => {
setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
})
yAxisIndex1List.forEach(item => {
setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
})
this.loadOption = this.generateOption(loadOption, data, setting);
})
this.$get("/performance/report/content/res_chart/" + this.id, res => {
let data = res.data;
let userList = data.filter(m => m.groupName === "users").map(m => m.yAxis);
let responseTimeList = data.filter(m => m.groupName != "users").map(m => m.yAxis);
let responseGroupNameList = data.filter(m => m.groupName != "users").map(m => m.groupName);
let userMax = this._getChartMax(userList);
let resMax = this._getChartMax(responseTimeList);
let yAxisList = data.filter(m => m.yAxis2 === -1).map(m => m.yAxis);
let yAxis2List = data.filter(m => m.yAxis === -1).map(m => m.yAxis2);
let yAxisListMax = this._getChartMax(yAxisList);
let yAxis2ListMax = this._getChartMax(yAxis2List);
let yAxisIndex0List = data.filter(m => m.yAxis2 === -1).map(m => m.groupName);
yAxisIndex0List = this._unique(yAxisIndex0List);
let yAxisIndex1List = data.filter(m => m.yAxis === -1).map(m => m.groupName);
yAxisIndex1List = this._unique(yAxisIndex1List);
let resOption = {
title: {
text: 'Response Time',
@ -197,15 +215,15 @@
name: 'User',
type: 'value',
min: 0,
max: userMax,
interval: userMax / 5
max: yAxisListMax,
interval: yAxisListMax / 5
},
{
name: 'Response Time',
type: 'value',
min: 0,
max: resMax,
interval: resMax / 5
max: yAxis2ListMax,
interval: yAxis2ListMax / 5
}
],
series: []
@ -218,9 +236,15 @@
}
]
}
responseGroupNameList.forEach(item => {
yAxisIndex0List.forEach(item => {
setting["series"].splice(0, 0, {name: item, yAxisIndex: '0'})
})
yAxisIndex1List.forEach(item => {
setting["series"].splice(0, 0, {name: item, yAxisIndex: '1'})
})
this.resOption = this.generateOption(resOption, data, setting);
})
},
@ -245,7 +269,11 @@
legend.push(name)
series[name] = []
}
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
if (item.yAxis === -1) {
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis2.toFixed(2)]);
} else {
series[name].splice(xAxis.indexOf(item.xAxis), 0, [item.xAxis, item.yAxis.toFixed(2)]);
}
})
this.$set(option.legend, "data", legend);
this.$set(option.legend, "type", "scroll");
@ -276,7 +304,10 @@
_getChartMax(arr) {
const max = Math.max(...arr);
return Math.ceil(max / 4.5) * 5;
}
},
_unique(arr){
return Array.from(new Set(arr));
}
},
watch: {
status() {