From 6b2b4083e4baf5823673d05cd9b0ff310559668f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 21 Dec 2022 16:00:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=A7=86=E5=9B=BE):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8B=E5=9B=BE?=
 =?UTF-8?q?=E4=BE=8B=E7=BF=BB=E9=A1=B5=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chart/components/ChartComponent.vue |  7 ++++++
 .../chart/components/ChartComponentG2.vue     | 24 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 5b5c9f6fd4..6b5057a14f 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -332,6 +332,13 @@ export default {
         })
         return
       }
+      if (this.canvasStyleData.panel.themeColor === 'dark') {
+        chart_option.legend['pageIconColor'] = '#ffffff'
+        chart_option.legend['pageIconInactiveColor'] = '#8c8c8c'
+      } else {
+        chart_option.legend['pageIconColor'] = '#000000'
+        chart_option.legend['pageIconInactiveColor'] = '#8c8c8c'
+      }
       this.myEcharts(chart_option)
       this.$nextTick(() => (this.linkageActive()))
     },
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 5c1a727b62..650a73cf27 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -58,6 +58,7 @@ import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { equalsAny } from '@/utils/StringUtils'
+import { mapState } from 'vuex'
 
 export default {
   name: 'ChartComponentG2',
@@ -140,7 +141,10 @@ export default {
     chartInfo() {
       const { id, title } = this.chart
       return { id, title }
-    }
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
   },
   watch: {
     chart: {
@@ -280,6 +284,24 @@ export default {
       if (this.myChart && chart.type !== 'liquid' && this.searchCount > 0) {
         this.myChart.options.animation = false
       }
+      if (this.myChart.options.legend) {
+        let pageNavigatorInactiveFill, pageNavigatorFill
+        if (this.canvasStyleData.panel.themeColor === 'dark') {
+          pageNavigatorFill = '#ffffff'
+          pageNavigatorInactiveFill = '#8c8c8c'
+        } else {
+          pageNavigatorFill = '#000000'
+          pageNavigatorInactiveFill = '#8c8c8c'
+        }
+        this.myChart.options.legend['pageNavigator'] = {
+          marker: {
+            style: {
+              inactiveFill: pageNavigatorInactiveFill, // 不能点击的颜色
+              fill: pageNavigatorFill // 正常的颜色
+            }
+          }
+        }
+      }
 
       if (this.antVRenderStatus) {
         this.myChart.render()