Merge pull request #12 from xyctruth/feature/optimize

ui optimize
xyctruth · Dec 22, 2021 · dacfad6 · dacfad6
2 parents 2db55ca + 86ec872
commit dacfad6
Show file tree

Hide file tree

Showing 3 changed files with 620 additions and 9 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
+    "start": "npm run dev --base_api_url=https://api.profiling.jia-huang.com",
     "build": "vite build",
     "preview": "vite preview"
   },

diff --git a/ui/src/view/index/components/chart.vue b/ui/src/view/index/components/chart.vue
@@ -57,13 +57,19 @@
     nextTick(() => {
       var unit = ""
       const baseSetting = {
-        type: "line",
-        lineStyle: {
+        type: "scatter",
+        showSymbol: false,
+        sampling: 'lttb',
+        showAllSymbol: false,
+        symbolSize: 10,
+        emphasis: {
           width: 3,
+          focus: 'series',
         },
-        showSymbol: false,
       }
       const chartOptions = {
+        animation: false, // 关闭加载动画
+
         legend: {
           type: 'scroll',
           orient: 'vertical',
@@ -81,6 +87,7 @@
           end: 100,
           type: "slider",
           show: true,
+          realtime: false, // 是否实时刷新
         },
         title: {
           text: title,
@@ -103,7 +110,14 @@
         },
         tooltip: {
           show: true,
-          trigger: 'axis',
+          confine: true,
+          trigger: 'item',
+          axisPointer: {
+            animation: false
+          },
+          formatter: (params) => {
+            return formatTooltip(params, unit)
+          },
         },
         series: []
       }
@@ -117,12 +131,9 @@
             ...baseSetting,
             name: meta.TargetName,
             data: [],
-            emphasis: {
-              focus: 'series'
-            },
           }
           for (const p of meta.ProfileMetas) {
-            if (unit){
+            if (!unit){
               unit = p.SampleTypeUnit
             }
             let label = moment(p.Timestamp).format('YYYY-MM-DD HH:mm:ss')
@@ -142,7 +153,8 @@
         chart = echarts.init(canvas.value, null, {
           devicePixelRatio: window.devicePixelRatio || 2,
           width,
-          height
+          height,
+          useDirtyRect: true,
         });
         chart.on('click', function (params) {
           window.open(`${baseConfig.reqUrl}/api/pprof/ui/${params.data.sourceData.ProfileID}?si=${title}`)