From e5b0a1c591e6e6b50a0db6aaf7b2b272e87aefe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 15 Nov 2024 20:14:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Echarts=20=E7=BB=84=E4=BB=B6=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=20(#7087)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/v-charts/components/Line.vue | 17 ++++++++++++++++-
 frontend/src/styles/element-dark.scss           |  4 ----
 .../src/views/login/components/login-form.vue   |  4 ++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 0a408257f..0907d4283 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -30,10 +30,24 @@ const props = defineProps({
     option: {
         type: Object,
         required: true,
-    }, // option: { title , xData, yData, formatStr, yAxis, grid, tooltip}
+    },
 });
 
 const seriesStyle = [
+    {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+                offset: 0,
+                color: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
+            },
+            {
+                offset: 1,
+                color: getComputedStyle(document.documentElement)
+                    .getPropertyValue('--panel-color-primary-light-9')
+                    .trim(),
+            },
+        ]),
+    },
     {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
@@ -98,6 +112,7 @@ function initChart() {
             series.push({
                 name: item?.name,
                 type: 'line',
+                itemStyle: seriesStyle[index + 2],
                 areaStyle: seriesStyle[index],
                 data: item?.data,
                 showSymbol: false,
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index 6d7263cf9..b5fc16d65 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -443,8 +443,4 @@ html.dark {
         color: #ffffff;
         background-color: var(--panel-main-bg-color-10) !important;
     }
-
-    .el-loading-mask {
-        background-color: rgba(36, 38, 51, 0.8);
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index b73edc3ce..4589c253f 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -559,4 +559,8 @@ onMounted(() => {
     color: #005eeb !important;
     background-color: #e5eefd !important;
 }
+
+:deep(.el-loading-mask) {
+    background-color: rgba(229, 238, 253, 0.8) !important;
+}
 </style>