chore: create cluster ux

src/components/echarts/config.ts

@@ -24,6 +24,8 @@ export default function useChartConfig() {
       splitLineColor: token.colorBorder,
       tickLineColor: token.colorSplit,
       axislabelColor: token.colorTextTertiary,
+      colorSecondary: token.colorTextSecondary,
+      colorTertiary: token.colorTextTertiary,
       gaugeBgColor: token.colorFillSecondary,
       gaugeSplitLineColor: isDarkTheme
         ? 'rgba(255,255,255,.3)'
@@ -172,8 +174,8 @@ export default function useChartConfig() {
       }
     },
     axisTick: {
-      distance: -11,
-      length: 6,
+      distance: -10,
+      length: 5,
       splitNumber: 5,
       lineStyle: {
         width: 1.5,
@@ -206,13 +208,13 @@ export default function useChartConfig() {
       rich: {
         value: {
           fontSize: 16,
-          fontWeight: '500',
+          fontWeight: '600',
           color: chartColorMap.titleColor
         },
         unit: {
           fontSize: 14,
           color: chartColorMap.titleColor,
-          fontWeight: '500',
+          fontWeight: '600',
           padding: [0, 0, 0, 2]
         }
       }

src/components/echarts/gauge.tsx

@@ -1,7 +1,7 @@
 import Chart from '@/components/echarts/chart';
 import useChartConfig from '@/components/echarts/config';
 import EmptyData from '@/components/empty-data';
-import React, { memo } from 'react';
+import React from 'react';
 import { ChartProps } from './types';
 
 const strokeColorFunc = (percent: number) => {
@@ -34,10 +34,19 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
       ...gaugeItemConfig,
       ...gaugeConfig
     };
+
+    combineGaugeConfig.detail.rich.value.color = colorValue;
+    combineGaugeConfig.detail.rich.unit.color = colorValue;
+
     return {
       title: {
         ...titleConfig,
         text: title,
+        textStyle: {
+          fontSize: 12,
+          color: chartColorMap.colorSecondary,
+          fontWeight: 400
+        },
         top: '0',
         left: 'center'
       },
@@ -58,7 +67,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
             color: 'transparent'
           },
           detail: {
-            ...gaugeItemConfig.detail,
+            ...combineGaugeConfig.detail,
             formatter: labelFormatter || gaugeItemConfig.detail.formatter
           },
           data: [{ value }]
@@ -78,4 +87,4 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   );
 };
 
-export default memo(GaugeChart);
+export default GaugeChart;