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?=
 <go3011739322@gmail.com>
Date: Sun, 13 Oct 2024 16:40:03 +0800
Subject: [PATCH] =?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);
 };