Feat: chart support 10 min

Author: yumao233

src/app/service/chart_option.js

@@ -16,9 +16,25 @@ export function getDefaultOption() {
     series: [
       {
         type: "line",
-        areaStyle: {},
+
         smooth: true,
-        symbol: "none"
+        symbol: "none",
+        lineStyle: {
+          color: "rgb(67, 145, 250,0.9)",
+          width: 1
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgb(67, 145, 250,0.8)"
+            },
+            {
+              offset: 1,
+              color: "rgb(17, 95, 200,0)"
+            }
+          ])
+        }
       }
     ]
   };
@@ -39,9 +55,24 @@ export function getStatusChartOption1() {
     series: [
       {
         type: "line",
-        areaStyle: {},
         smooth: true,
-        symbol: "none"
+        symbol: "none",
+        lineStyle: {
+          color: "rgb(67, 145, 250,0.9)",
+          width: 1
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgb(67, 145, 250,0.8)"
+            },
+            {
+              offset: 1,
+              color: "rgb(17, 95, 200,0)"
+            }
+          ])
+        }
       }
     ]
   };
@@ -63,9 +94,24 @@ export function getStatusChartOption2() {
       {
         name: "Running",
         type: "line",
-        areaStyle: {},
         smooth: true,
-        symbol: "none"
+        symbol: "none",
+        lineStyle: {
+          color: "rgb(67, 145, 250,0.9)",
+          width: 1
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgb(67, 145, 250,0.8)"
+            },
+            {
+              offset: 1,
+              color: "rgb(17, 95, 200,0)"
+            }
+          ])
+        }
       }
     ]
   };

src/app/views/Services.vue

@@ -136,15 +136,15 @@
               <div class="daemonChartArea">
                 <el-row :gutter="20">
                   <el-col :md="12" :offset="0">
-                    <p>CPU</p>
+                    <p>{{ $t("services.cpuChartTip") }}</p>
                     <div
                       class="daemon-chart"
                       :id="'echart-wrapper-daemon-cpu-' + index"
                       style="width: 100%; height: 40px"
                     ></div>
                   </el-col>
                   <el-col :md="12" :offset="0">
-                    <p>{{ $t("overview.mem") }}</p>
+                    <p>{{ $t("services.memChartTip") }}</p>
                     <div
                       class="daemon-chart"
                       :id="'echart-wrapper-daemon-mem-' + index"

src/language/en_us.json

@@ -786,7 +786,9 @@
     "copyId": "(available for API calls)",
     "toDocker": "Docker",
     "toFileManager": "Files",
-    "toTerminal": "Terminal"
+    "toTerminal": "Terminal",
+    "cpuChartTip": "CPU (10 min)",
+    "memChartTip": "Memory (10 min)"
   },
   "container": {
     "remoteList": "Select daemon",

src/language/zh_cn.json

@@ -786,7 +786,9 @@
     "copyId": "（可用于 API 调用）",
     "toFileManager": "文件管理",
     "toTerminal": "控制台",
-    "toDocker": "镜像管理"
+    "toDocker": "镜像管理",
+    "cpuChartTip": "CPU（10min）",
+    "memChartTip": "内存（10min）"
   },
   "container": {
     "remoteList": "请选择一个节点",