server 服务器模块 CPU usage of diferent 数据图形渲染，接口联调
This commit is contained in:
任珮宇
parent
11ebcfa819
commit
9ff580fdd6
|
|
@ -200,44 +200,17 @@ export default {
|
|||
option2: {},
|
||||
option3: {},
|
||||
option4: {},
|
||||
colorList: [
|
||||
'#c13a28',
|
||||
'#ff8a00',
|
||||
'#cbae7f',
|
||||
'#c9bd2b',
|
||||
'#81b477',
|
||||
'#488672',
|
||||
'#55d9d1',
|
||||
'#49a8f0',
|
||||
'#2859ed',
|
||||
'#9e54ec',
|
||||
'#7e16a3',
|
||||
'#e6437d',
|
||||
],
|
||||
legendList: [
|
||||
'CPU0,10',
|
||||
'CPU0,11',
|
||||
'CPU0,8',
|
||||
'CPU0,9',
|
||||
'CPU0,1',
|
||||
'CPU0,2',
|
||||
'',
|
||||
'CPU0,0',
|
||||
'CPU0,5',
|
||||
'CPU0,6',
|
||||
'CPU0,3',
|
||||
'CPU0,4',
|
||||
'CPU0,7',
|
||||
],
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
visible: false,
|
||||
modalTitle: '',
|
||||
//CPU utilizatior
|
||||
cpuUtilization: {},
|
||||
cpuUtilization_xData: [],
|
||||
cpuUtilization_data: [],
|
||||
// Percentage of free system space
|
||||
cpuIdleRate: {},
|
||||
cpuIdleRate_xData: [],
|
||||
cpuIdleRate_data: [],
|
||||
// Interrupt and episodic switching
|
||||
multiLine: {
|
||||
cpuInterrupt: {},
|
||||
cpuSwitch: {},
|
||||
|
|
@ -245,6 +218,9 @@ export default {
|
|||
multiLine_xData: [],
|
||||
cpuInterrupt_data: [],
|
||||
cpuSwitch_data: [],
|
||||
// CPU usage of diferent cores
|
||||
cpuDiff_xData: [],
|
||||
cpuDiff_data: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -252,11 +228,6 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.getServerList()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawChart4()
|
||||
}, 0)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTheData() {
|
||||
|
|
@ -300,20 +271,28 @@ export default {
|
|||
this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//总CPU使用率
|
||||
let totalCpu = []
|
||||
data.map((item) => {
|
||||
if (item.name.search('cpuUtilization_') != -1) {
|
||||
totalCpu.push(item)
|
||||
}
|
||||
})
|
||||
console.log(totalCpu)
|
||||
this.cpuDiff_xData = totalCpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuDiff_data = totalCpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number(el.value.toFixed(2))),
|
||||
}
|
||||
})
|
||||
|
||||
// const list = [...this.multiLine.cpuInterrupt.list, ...this.multiLine.cpuSwitch.list]
|
||||
// this.renderingEchart(list, 'cpuMultiLine', Area) // 中断和情境切换
|
||||
// //总CPU使用率
|
||||
// let totalCpu = new Array()
|
||||
// data.map((item) => {
|
||||
// if (item.name.search('cpuUtilization_') != -1) {
|
||||
// totalCpu = [...totalCpu, ...item.list]
|
||||
// }
|
||||
// })
|
||||
// this.renderingEchart(totalCpu, 'cpulist', Line)
|
||||
this.drawChart1()
|
||||
this.drawChart2()
|
||||
this.drawChart3()
|
||||
this.drawChart4()
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
|
|
@ -417,7 +396,7 @@ export default {
|
|||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
if (index === this.cpuUtilization_xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
|
|
@ -502,7 +481,7 @@ export default {
|
|||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
if (index === this.cpuIdleRate_xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
|
|
@ -586,7 +565,7 @@ export default {
|
|||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
if (index === this.multiLine_xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
|
|
@ -658,9 +637,9 @@ export default {
|
|||
drawChart4() {
|
||||
let myLine = echarts.init(document.getElementById('chart4'))
|
||||
this.option4 = {
|
||||
// color: this.colorList,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
|
|
@ -686,7 +665,7 @@ export default {
|
|||
},
|
||||
padding: [0, -2, -4, 0],
|
||||
},
|
||||
data: this.legendList, // 不需要''换行
|
||||
// data: this.legendList, // 不需要''换行
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -704,14 +683,14 @@ export default {
|
|||
if (index === 0) {
|
||||
return ' ' + value
|
||||
}
|
||||
if (index === this.xData.length - 1) {
|
||||
if (index === this.cpuDiff_xData.length - 1) {
|
||||
return value + ' '
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData,
|
||||
data: this.cpuDiff_xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
|
@ -739,81 +718,17 @@ export default {
|
|||
color: 'rgba(173, 230, 238, 1)',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,10',
|
||||
symbol: 'none',
|
||||
data: [15, 30, 24, 28, 13, 14, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,11',
|
||||
symbol: 'none',
|
||||
data: [82, 92, 91, 34, 12, 30, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,8',
|
||||
symbol: 'none',
|
||||
data: [2, 9, 11, 24, 12, 20, 25],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,9',
|
||||
symbol: 'none',
|
||||
data: [8, 19, 32, 4, 22, 13, 50],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,1',
|
||||
symbol: 'none',
|
||||
data: [53, 62, 71, 14, 16, 37, 24],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,2',
|
||||
symbol: 'none',
|
||||
data: [62, 54, 49, 64, 62, 45, 29],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,0',
|
||||
symbol: 'none',
|
||||
data: [15, 30, 24, 28, 13, 14, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,5',
|
||||
symbol: 'none',
|
||||
data: [82, 92, 91, 34, 12, 30, 20],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,6',
|
||||
symbol: 'none',
|
||||
data: [2, 9, 11, 24, 12, 20, 25],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,3',
|
||||
symbol: 'none',
|
||||
data: [8, 19, 32, 4, 22, 13, 50],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,4',
|
||||
symbol: 'none',
|
||||
data: [53, 62, 71, 14, 16, 37, 24],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
name: 'CPU0,7',
|
||||
symbol: 'none',
|
||||
data: [62, 54, 49, 64, 62, 45, 29],
|
||||
},
|
||||
],
|
||||
series: [],
|
||||
}
|
||||
let series = this.cpuDiff_data.map((item) => {
|
||||
return {
|
||||
type: 'line',
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
this.option4.series = series.splice(0, 10)
|
||||
myLine.setOption(this.option4)
|
||||
window.addEventListener('resize', function () {
|
||||
myLine.resize()
|
||||
|
|
@ -827,11 +742,22 @@ export default {
|
|||
})
|
||||
},
|
||||
handelZoom(str, option) {
|
||||
console.log(option)
|
||||
this.modalTitle = str
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
if (str === 'CPU usage of diferent cores') {
|
||||
option.series = this.cpuDiff_data.map((item) => {
|
||||
return {
|
||||
type: 'line',
|
||||
name: item.name,
|
||||
symbol: 'none',
|
||||
data: item.data,
|
||||
}
|
||||
})
|
||||
this.drawLine(option)
|
||||
} else {
|
||||
this.drawLine(option)
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user