perf: DEFECT-705 adjust chart value font size

@@ -21,6 +21,7 @@
     fontSize,
   } from '../../detail/config/util';
   import { Tooltip } from 'ant-design-vue';
+  import { useThrottleFn } from '@vueuse/shared';
 
   const props = defineProps({
     add: {
@@ -81,23 +82,28 @@
     return (_radio: number) => {};
   };
 
-  watch(
-    () => props.value.value,
-    (newValue) => {
-      const updateFn = getUpdateValueFn(props.layout.componentType);
-      unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {});
-    }
-  );
-
-  watch(
-    () => props.radio,
-    () => {
-      const option = beforeUpdateFn(props.layout.componentType);
-      setTimeout(() => {
-        unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {});
-      });
-    }
-  );
+  const updateChartValue = useThrottleFn((newValue) => {
+    const updateFn = getUpdateValueFn(props.layout.componentType);
+    unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {});
+  }, 500);
+
+  watch(() => props.value.value, updateChartValue);
+
+  const updateChartFont = useThrottleFn(() => {
+    const option = beforeUpdateFn(props.layout.componentType);
+    setTimeout(() => {
+      unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {});
+    });
+  }, 500);
+
+  watch(() => props.radio, updateChartFont);
+
+  const updateChartType = useThrottleFn(() => {
+    unref(chartRef)?.clear();
+    unref(chartRef)?.setOption(props?.layout?.chartOption || {});
+  }, 500);
+
+  watch(() => props.layout.componentType, updateChartType);
 
   let timeout: Nullable<number> = null;
 

@@ -239,7 +239,7 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
 };
 
 export const update_instrument_1_font = (radio: number) => {
-  const basicFontSize = fontSize({ radio, basic: 10, max: 20 });
+  const basicFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 });
   return {
     series: [
       {
@@ -256,7 +256,7 @@ export const update_instrument_1_font = (radio: number) => {
 
 export const update_instrument_2_font = (radio: number) => {
   const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });
-  const detailFontSize = fontSize({ radio, basic: 12 });
+  const detailFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 });
   return {
     series: [
       {