From 006fff61921c91c2e9bd7885a2da1d98c619775d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:13:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=8E=86=E5=8F=B2=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E9=80=82=E9=85=8D=20(#18275)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComponentColorSelector.vue                | 17 +++--------------
 core/core-frontend/src/utils/canvasUtils.ts   | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
index 64ebf9f945..97390995f7 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@@ -277,20 +277,9 @@ const fontSizeList = computed(() => {
   return arr
 })
 
-const colorForm = computed(() => ({
-  ...(canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>),
-  label: {
-    color: '#000000',
-    fontSize: 12,
-    ...(canvasStyleData.value.component.chartColor?.label || {})
-  },
-  tooltip: {
-    color: '#000000',
-    fontSize: 12,
-    backgroundColor: '#FFFFFF',
-    ...(canvasStyleData.value.component.chartColor?.tooltip || {})
-  }
-}))
+const colorForm = computed(
+  () => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
+)
 
 const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
 
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index d44ddf974d..8b908b899f 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -32,6 +32,7 @@ import { deepCopy, nameTrim } from '@/utils/utils'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { ShorthandMode } from '@/components/visualization/component-background/Types'
+import { formatterItem } from '@/views/chart/components/js/formatter'
 const dvMainStore = dvMainStoreWithOut()
 const {
   inMobile,
@@ -350,6 +351,24 @@ export function historyAdaptor(
   canvasStyleResult['dialogBackgroundColor'] = canvasStyleResult['dialogBackgroundColor'] || '#fff'
   canvasStyleResult['dialogButton'] = canvasStyleResult['dialogButton'] || '#020408'
 
+  canvasStyleResult['component']['formatterItem'] =
+    canvasStyleResult['component']['formatterItem'] || deepCopy(formatterItem)
+
+  canvasStyleResult.component.chartColor = {
+    ...canvasStyleResult.component.chartColor,
+    label: {
+      color: '#000000',
+      fontSize: 12,
+      ...(canvasStyleResult.component.chartColor?.label || {})
+    },
+    tooltip: {
+      color: '#000000',
+      fontSize: 12,
+      backgroundColor: '#FFFFFF',
+      ...(canvasStyleResult.component.chartColor?.tooltip || {})
+    }
+  }
+
   canvasDataResult.forEach(componentItem => {
     historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo)
   })