Skip to content

Commit

Permalink
Merge pull request #298 from aoliaoaoaojiao/main
Browse files Browse the repository at this point in the history 
【fix】修复刷新数据导致的zoom比例丢失问题
  • Loading branch information
@ZhouYixun
ZhouYixun authored Oct 16, 2024
2 parents 284edcf + a4274ec commit 0ca245d
Showing 1 changed file with 102 additions and 28 deletions.
130 changes: 102 additions & 28 deletions src/components/AndroidPerfChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,16 @@ const props = defineProps({
procThread: Array,
});
function getTimeStr(timestamp) {
const now = new Date(timestamp);
const hour = now.getHours().toString().padStart(2, '0');
const minute = now.getMinutes().toString().padStart(2, '0');
const second = now.getSeconds().toString().padStart(2, '0');
return `${hour}:${minute}:${second}`;
}
let signZoomStart = 30;
let signZoomEnd = 100;
const printSingleCpu = () => {
let chart = echarts.getInstanceByDom(
document.getElementById(
Expand Down Expand Up @@ -107,14 +117,18 @@ const printSingleCpu = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: signZoomStart,
end: signZoomEnd,
xAxisIndex: [0, 1],
},
],
yAxis: [{name: `${$t('perf.singleCpu')}(%)`, min: 0}],
series: sysCpuData.SingleCpuData,
};
chart.on('dataZoom', (event) => {
signZoomEnd = event.end
signZoomStart = event.start
})
chart.setOption(option);
};
Expand All @@ -124,10 +138,12 @@ let sysCpuData = {
CpuDataLegend: [],
SingleCpuData: [],
SingleCpuDataLegend: [],
zoomStart:30,
zoomEnd:100,
}
const pushSysCpuData = (obj) => {
sysCpuData.xAxisData.push(new Date(obj.cpu.timeStamp))
sysCpuData.xAxisData.push(getTimeStr(obj.cpu.timeStamp))
if (obj.cpu) {
for (const i in obj.cpu) {
if (i !== 'timeStamp') {
Expand Down Expand Up @@ -217,14 +233,18 @@ const printCpu = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: sysCpuData.zoomStart,
end: sysCpuData.zoomEnd,
xAxisIndex: [0, 1],
},
],
yAxis: [{name: `${$t('perf.totalCpu')}(%)`, min: 0}],
series: sysCpuData.seriesData,
};
chart.on('dataZoom', (event) => {
sysCpuData.zoomEnd = event.end
sysCpuData.zoomStart = event.start
})
chart.setOption(option);
};
Expand All @@ -236,10 +256,12 @@ let sysMemData = {
memTotal: [],
swapFree: [],
swapTotal: [],
zoomStart:30,
zoomEnd:100,
}
const pushSysMemData = (obj) => {
sysMemData.xAxisData.push(new Date(obj.timeStamp))
sysMemData.xAxisData.push(getTimeStr(obj.timeStamp))
sysMemData.memBuffersData.push(obj.memBuffers)
sysMemData.memCached.push(obj.memCached)
sysMemData.memCached.push(obj.memFree)
Expand Down Expand Up @@ -273,6 +295,12 @@ const printMem = () => {
},
tooltip: {
trigger: 'axis',
position(pos, params, dom, rect, size) {
const obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
},
valueFormatter: (value) => `${value}`,
},
grid: {top: '30%', left: '20%'},
toolbox: {
Expand Down Expand Up @@ -300,8 +328,8 @@ const printMem = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: sysMemData.zoomStart,
end: sysMemData.zoomEnd,
xAxisIndex: [0, 1],
},
],
Expand Down Expand Up @@ -351,15 +379,21 @@ const printMem = () => {
},
],
};
chart.on('dataZoom', (event) => {
sysMemData.zoomEnd = event.end
sysMemData.zoomStart = event.start
})
chart.setOption(option);
};
let procFPSData = {
xAxisData: [],
seriesData: []
seriesData: [],
zoomStart:30,
zoomEnd:100,
}
const pushProcFPSData = (obj) => {
procFPSData.xAxisData.push(new Date(obj.timeStamp))
procFPSData.xAxisData.push(getTimeStr(obj.timeStamp))
procFPSData.seriesData.push(obj.fps)
}
const printProcFps = () => {
Expand Down Expand Up @@ -402,8 +436,8 @@ const printProcFps = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: procFPSData.zoomStart,
end: procFPSData.zoomEnd,
xAxisIndex: [0, 1],
},
],
Expand All @@ -416,18 +450,26 @@ const printProcFps = () => {
},
],
};
chart.on('dataZoom', (event) => {
procFPSData.zoomEnd = event.end
procFPSData.zoomStart = event.start
})
chart.setOption(option);
};
let procThreadData = {
xAxisData: [],
seriesData: []
seriesData: [],
zoomStart:30,
zoomEnd:100,
}
const pushProcThreadData = (obj) => {
console.log(obj)
procThreadData.xAxisData.push(new Date(obj.timestamp))
procThreadData.xAxisData.push(getTimeStr(obj.timeStamp))
procThreadData.seriesData.push(obj.threadCount)
}
const printProcThread = () => {
let chart = echarts.getInstanceByDom(
document.getElementById(
Expand Down Expand Up @@ -468,8 +510,8 @@ const printProcThread = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: procThreadData.zoomStart,
end: procThreadData.zoomEnd,
xAxisIndex: [0, 1],
},
],
Expand All @@ -482,20 +524,26 @@ const printProcThread = () => {
},
],
};
chart.on('dataZoom', (event) => {
procThreadData.zoomEnd = event.end
procThreadData.zoomStart = event.start
})
chart.setOption(option);
};
let sysNetworkData = {
xAxisData: [],
seriesData: [],
legendData:[]
legendData:[],
zoomStart:30,
zoomEnd:100,
}
const pushSysNetworkData = (obj) => {
let isAddTime = true;
for (const i in obj) {
if (isAddTime) {
sysNetworkData.xAxisData.push(new Date(obj[i].timeStamp));
sysNetworkData.xAxisData.push(getTimeStr(obj[i].timeStamp));
isAddTime = false;
}
Expand Down Expand Up @@ -552,6 +600,16 @@ const printNetwork = () => {
},
tooltip: {
trigger: 'axis',
position(pos, params, dom, rect, size) {
const obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
},
valueFormatter: (value) => `${value}`,
},
legend: {
top: '8%',
data: sysNetworkData.legendData,
},
grid: {top: '20%', left: '18%'},
toolbox: {
Expand All @@ -566,23 +624,29 @@ const printNetwork = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: sysNetworkData.zoomStart,
end: sysNetworkData.zoomEnd,
xAxisIndex: [0, 1],
},
],
yAxis: [{name: `${$t('perf.network')}(b)`, min: 0}],
series: sysNetworkData.seriesData,
};
chart.on('dataZoom', (event) => {
sysNetworkData.zoomEnd = event.end
sysNetworkData.zoomStart = event.start
})
chart.setOption(option);
};
let procCpuData = {
xAxisData: [],
seriesData: []
seriesData: [],
zoomStart:30,
zoomEnd:100,
}
const pushProcCpuData = (obj) => {
procCpuData.xAxisData.push(new Date(obj.timeStamp))
procCpuData.xAxisData.push(getTimeStr(obj.timeStamp))
procCpuData.seriesData.push(obj.cpuUtilization)
}
const printPerfCpu = () => {
Expand Down Expand Up @@ -627,8 +691,8 @@ const printPerfCpu = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: procCpuData.zoomStart,
end: procCpuData.zoomEnd,
xAxisIndex: [0, 1],
},
],
Expand All @@ -643,17 +707,23 @@ const printPerfCpu = () => {
},
],
};
chart.on('dataZoom', (event) => {
procCpuData.zoomEnd = event.end
procCpuData.zoomStart = event.start
})
chart.setOption(option);
};
let procMemData = {
xAxisData: [],
pssData: [],
phyData: [],
vmData: []
vmData: [],
zoomStart:30,
zoomEnd:100
}
const pushProcMemData = (obj) => {
procMemData.xAxisData.push(new Date(obj.timeStamp))
procMemData.xAxisData.push(getTimeStr(obj.timeStamp))
procMemData.phyData.push(obj.phyRSS)
procMemData.vmData.push(obj.vmRSS)
procMemData.pssData.push(obj.totalPSS)
Expand Down Expand Up @@ -700,8 +770,8 @@ const printPerfMem = () => {
{
show: true,
realtime: true,
start: 30,
end: 100,
start: procMemData.zoomStart,
end: procMemData.zoomEnd,
xAxisIndex: [0, 1],
},
],
Expand Down Expand Up @@ -734,6 +804,10 @@ const printPerfMem = () => {
},
],
};
chart.on('dataZoom', (event) => {
procMemData.zoomEnd = event.end
procMemData.zoomStart = event.start
})
chart.setOption(option);
};
Expand Down

0 comments on commit 0ca245d

Please sign in to comment.