From b8484870c5efb95b90102553319da6b83e95b6d9 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 24 Feb 2021 12:49:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E7=9A=84=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=89=B2=E7=94=9F=E6=88=90=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/element/ChartElement/Chart.vue     | 15 ++++-----------
 .../components/element/ChartElement/index.vue     |  1 +
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue
index 9f6e2195..8206b375 100644
--- a/src/views/components/element/ChartElement/Chart.vue
+++ b/src/views/components/element/ChartElement/Chart.vue
@@ -101,21 +101,14 @@ export default defineComponent({
 
     onMounted(renderChart)
 
-    // 更新主题配色：通过主题色的色相旋转，计算出一系列的颜色作为主题配色
+    // 更新主题配色：获取主题色的相近颜色作为主题配色
     const updateTheme = () => {
       if (!chartRef.value) return
 
-      const hsla = tinycolor(props.themeColor).toHsl()
-
+      const colors = tinycolor(props.themeColor).analogous(10)
       for (let i = 0; i < 10; i++) {
-        let h = hsla.h + i * 36
-        if (h > 360) h = h - 360
-
-        const _hsla = {
-          ...hsla,
-          h,
-        }
-        chartRef.value.style.setProperty(`--theme-color-${i + 1}`, tinycolor(_hsla).toRgbString())
+        const color = colors[i].toRgbString()
+        chartRef.value.style.setProperty(`--theme-color-${i + 1}`, color)
       }
     }
 
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index a7ce3a6b..c8f5cf50 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -89,5 +89,6 @@ export default defineComponent({
 .element-content {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 </style>