perf: data board component chart component update color not update immediate

@@ -79,15 +79,20 @@
   const getUpdateValueFn = (componentType: InstrumentComponentType) => {
     if (componentType === 'instrument-component-1') return update_instrument_1_value;
     if (componentType === 'instrument-component-2') return update_instrument_2_value;
-    return (_radio: number) => {};
+    return (_radio: DashBoardValue) => {};
   };
 
-  const updateChartValue = useThrottleFn((newValue) => {
+  const updateChartValue = useThrottleFn(() => {
     const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {});
+    unref(chartRef)?.setOption((updateFn(props.value) as unknown as EChartsOption) || {});
   }, 500);
 
-  watch(() => props.value.value, updateChartValue);
+  watch(() => props.value, updateChartValue);
+
+  // watch(
+  //   () => [props.value.gradientInfo, props.value.unit, props.value.valueColor, props.value.name],
+  //   updateChartValue
+  // );
 
   const updateChartFont = useThrottleFn(() => {
     const option = beforeUpdateFn(props.layout.componentType);
@@ -110,7 +115,9 @@
   function handleRandomValue() {
     const newValue = Math.floor(Math.random() * 100);
     const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption((updateFn(newValue) as unknown as EChartsOption) || {});
+    unref(chartRef)?.setOption(
+      (updateFn({ ...props.value, value: newValue }) as unknown as EChartsOption) || {}
+    );
   }
 
   onMounted(() => {

@@ -32,7 +32,7 @@ export interface DashBoardValue {
   name?: string;
   updateTime?: string;
   value?: number;
-  valueColor?: string;
+  fontColor?: string;
   gradientInfo?: GradientInfoRecord[];
 }
 
@@ -277,11 +277,16 @@ const handleValue = (value: any) => {
   return Number(value).toFixed(2);
 };
 
-export const update_instrument_1_value = (value: number) => {
+export const update_instrument_1_value = (params: DashBoardValue) => {
+  const { value = 0, unit = '°C', fontColor } = params;
   return {
     series: [
       {
         data: [{ value: handleValue(value) }],
+        detail: {
+          formatter: `{value} ${unit ?? ''}`,
+          color: fontColor || 'inherit',
+        },
       },
       {
         data: [{ value: handleValue(value) }],
@@ -290,11 +295,35 @@ export const update_instrument_1_value = (value: number) => {
   } as EChartsOption;
 };
 
-export const update_instrument_2_value = (value: number) => {
+export const update_instrument_2_value = (params: DashBoardValue) => {
+  const { value = 0, unit = 'km/h', fontColor, gradientInfo } = params;
+  const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
+  const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
+  const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
+
+  let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
+  max = Number(1 + Array(String(max).length).fill(0).join(''));
+
+  const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
+  const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
   return {
     series: [
       {
         data: [{ value: handleValue(value) }],
+        detail: {
+          formatter: `{value} ${unit ?? ''}`,
+          color: fontColor || 'inherit',
+        },
+        axisLine: {
+          lineStyle: {
+            width: 20,
+            color: [
+              [firstGradient, firstRecord?.color || GradientColor.FIRST],
+              [secondGradient, secondRecord?.color || GradientColor.SECOND],
+              [1, thirdRecord?.color || GradientColor.THIRD],
+            ],
+          },
+        },
       },
     ],
   } as EChartsOption;