refactor: page layout

src/components/echarts/config.ts

@@ -126,7 +126,6 @@ export default function useChartConfig() {
     type: 'bar',
     barMaxWidth: 20,
     barMinWidth: 8,
-    // stack: 'total',
     barGap: '30%',
     barCategoryGap: '50%'
   };
@@ -154,7 +153,7 @@ export default function useChartConfig() {
     progress: {
       show: true,
       roundCap: false,
-      width: 10
+      width: 12
     },
     pointer: {
       length: '80%',
@@ -166,7 +165,7 @@ export default function useChartConfig() {
     axisLine: {
       roundCap: false,
       lineStyle: {
-        width: 10,
+        width: 12,
         color: [
           [0.5, 'rgba(84, 204, 152, 80%)'],
           [0.8, 'rgba(250, 173, 20, 80%)'],
@@ -175,8 +174,8 @@ export default function useChartConfig() {
       }
     },
     axisTick: {
-      distance: -10,
-      length: 5,
+      distance: -11,
+      length: 6,
       splitNumber: 5,
       lineStyle: {
         width: 1.5,
@@ -209,13 +208,13 @@ export default function useChartConfig() {
       rich: {
         value: {
           fontSize: 16,
-          fontWeight: '600',
+          fontWeight: 500,
           color: chartColorMap.titleColor
         },
         unit: {
           fontSize: 14,
           color: chartColorMap.titleColor,
-          fontWeight: '600',
+          fontWeight: 500,
           padding: [0, 0, 0, 2]
         }
       }

src/components/echarts/gauge.tsx

@@ -24,8 +24,10 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   } = useChartConfig();
   const { value, height, width, labelFormatter, title, color, gaugeConfig } =
     props;
+  const titleText = typeof title === 'string' ? title : title?.text;
+
   if (!value && value !== 0) {
-    return <EmptyData height={height} title={title}></EmptyData>;
+    return <EmptyData height={height} title={titleText}></EmptyData>;
   }
 
   const setDataOptions = () => {
@@ -41,14 +43,15 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
     return {
       title: {
         ...titleConfig,
-        text: title,
+        text: titleText,
         textStyle: {
           fontSize: 12,
           color: chartColorMap.colorSecondary,
           fontWeight: 400
         },
-        top: '0',
-        left: 'center'
+        top: 10,
+        left: 'center',
+        ...(typeof title === 'object' ? title : {})
       },
       series: [
         {
@@ -68,6 +71,10 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
           },
           detail: {
             ...combineGaugeConfig.detail,
+            borderColor: colorValue,
+            lineHeight: 20,
+            height: 18,
+            width: 50,
             formatter: labelFormatter || gaugeItemConfig.detail.formatter
           },
           data: [{ value }]

src/components/echarts/types.ts

@@ -21,7 +21,7 @@ export interface ChartProps {
   tooltipValueFormatter?: (val: any) => string;
   height: string | number;
   width?: string | number;
-  title?: string;
+  title?: string | TitleComponentOption;
   titleOptions?: {
     [K in keyof TitleComponentOption]?: TitleComponentOption[K];
   };