From 7771b91649f8bac90d2a0ebdf83480ef1f64367e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=A5=E5=88=A9=E5=97=B7=E5=97=B7=E5=97=B7=E5=8F=AB?= Date: Sun, 13 Oct 2024 16:14:39 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AndroidPerfChart.vue | 40 ++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/src/components/AndroidPerfChart.vue b/src/components/AndroidPerfChart.vue index 868b5158..dc6ec7fb 100644 --- a/src/components/AndroidPerfChart.vue +++ b/src/components/AndroidPerfChart.vue @@ -56,6 +56,14 @@ 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}`; +} + const printSingleCpu = () => { let chart = echarts.getInstanceByDom( document.getElementById( @@ -127,7 +135,7 @@ let sysCpuData = { } 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') { @@ -239,7 +247,7 @@ let sysMemData = { } 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) @@ -273,6 +281,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: { @@ -359,7 +373,7 @@ let procFPSData = { seriesData: [] } const pushProcFPSData = (obj) => { - procFPSData.xAxisData.push(new Date(obj.timeStamp)) + procFPSData.xAxisData.push(getTimeStr(obj.timeStamp)) procFPSData.seriesData.push(obj.fps) } const printProcFps = () => { @@ -425,9 +439,11 @@ let procThreadData = { } 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( @@ -495,7 +511,7 @@ 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; } @@ -552,6 +568,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: { @@ -582,7 +608,7 @@ let procCpuData = { seriesData: [] } const pushProcCpuData = (obj) => { - procCpuData.xAxisData.push(new Date(obj.timeStamp)) + procCpuData.xAxisData.push(getTimeStr(obj.timeStamp)) procCpuData.seriesData.push(obj.cpuUtilization) } const printPerfCpu = () => { @@ -653,7 +679,7 @@ let procMemData = { vmData: [] } 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) From a4274ec141eb93b47684821e965d6c5725c6bb97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=A5=E5=88=A9=E5=97=B7=E5=97=B7=E5=97=B7=E5=8F=AB?= Date: Sun, 13 Oct 2024 16:40:03 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dzoom=E6=AF=94=E4=BE=8B?= =?UTF-8?q?=E4=B8=A2=E5=A4=B1=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AndroidPerfChart.vue | 90 ++++++++++++++++++++++------- 1 file changed, 69 insertions(+), 21 deletions(-) diff --git a/src/components/AndroidPerfChart.vue b/src/components/AndroidPerfChart.vue index dc6ec7fb..55a58e2c 100644 --- a/src/components/AndroidPerfChart.vue +++ b/src/components/AndroidPerfChart.vue @@ -64,6 +64,8 @@ function getTimeStr(timestamp) { return `${hour}:${minute}:${second}`; } +let signZoomStart = 30; +let signZoomEnd = 100; const printSingleCpu = () => { let chart = echarts.getInstanceByDom( document.getElementById( @@ -115,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); }; @@ -132,6 +138,8 @@ let sysCpuData = { CpuDataLegend: [], SingleCpuData: [], SingleCpuDataLegend: [], + zoomStart:30, + zoomEnd:100, } const pushSysCpuData = (obj) => { @@ -225,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); }; @@ -244,6 +256,8 @@ let sysMemData = { memTotal: [], swapFree: [], swapTotal: [], + zoomStart:30, + zoomEnd:100, } const pushSysMemData = (obj) => { @@ -314,8 +328,8 @@ const printMem = () => { { show: true, realtime: true, - start: 30, - end: 100, + start: sysMemData.zoomStart, + end: sysMemData.zoomEnd, xAxisIndex: [0, 1], }, ], @@ -365,12 +379,18 @@ 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(getTimeStr(obj.timeStamp)) @@ -416,8 +436,8 @@ const printProcFps = () => { { show: true, realtime: true, - start: 30, - end: 100, + start: procFPSData.zoomStart, + end: procFPSData.zoomEnd, xAxisIndex: [0, 1], }, ], @@ -430,12 +450,18 @@ 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) @@ -484,8 +510,8 @@ const printProcThread = () => { { show: true, realtime: true, - start: 30, - end: 100, + start: procThreadData.zoomStart, + end: procThreadData.zoomEnd, xAxisIndex: [0, 1], }, ], @@ -498,13 +524,19 @@ 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) => { @@ -592,20 +624,26 @@ 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(getTimeStr(obj.timeStamp)) @@ -653,8 +691,8 @@ const printPerfCpu = () => { { show: true, realtime: true, - start: 30, - end: 100, + start: procCpuData.zoomStart, + end: procCpuData.zoomEnd, xAxisIndex: [0, 1], }, ], @@ -669,6 +707,10 @@ const printPerfCpu = () => { }, ], }; + chart.on('dataZoom', (event) => { + procCpuData.zoomEnd = event.end + procCpuData.zoomStart = event.start + }) chart.setOption(option); }; @@ -676,7 +718,9 @@ let procMemData = { xAxisData: [], pssData: [], phyData: [], - vmData: [] + vmData: [], + zoomStart:30, + zoomEnd:100 } const pushProcMemData = (obj) => { procMemData.xAxisData.push(getTimeStr(obj.timeStamp)) @@ -726,8 +770,8 @@ const printPerfMem = () => { { show: true, realtime: true, - start: 30, - end: 100, + start: procMemData.zoomStart, + end: procMemData.zoomEnd, xAxisIndex: [0, 1], }, ], @@ -760,6 +804,10 @@ const printPerfMem = () => { }, ], }; + chart.on('dataZoom', (event) => { + procMemData.zoomEnd = event.end + procMemData.zoomStart = event.start + }) chart.setOption(option); };