feat: usage export data

src/components/card-wrapper/simple-card.tsx

@@ -9,6 +9,7 @@ const SimpleCardItemWrapper = styled.div`
   width: 100%;
   height: 100%;
   gap: 10px;
+  margin-bottom: 24px;
 `;
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -25,6 +26,9 @@ const useStyles = createStyles(({ css, token }) => ({
     gap: ${token.padding}px;
     .title {
       font-size: ${token.fontSize}px;
+      font-weight: var(--font-weight-medium);
+    }
+    .content {
       font-weight: var(--font-weight-500);
     }
   `
@@ -48,11 +52,12 @@ export const SimpleCardItem: React.FC<{
 
 export const SimpleCard: React.FC<{
   dataList: { label: string; value: React.ReactNode }[];
+  height?: string | number;
 }> = (props) => {
   const { dataList } = props;
 
   return (
-    <SimpleCardItemWrapper>
+    <SimpleCardItemWrapper style={{ height: props.height || '100%' }}>
       {dataList.map((item, index) => (
         <SimpleCardItem
           key={index}

src/components/echarts/chart.tsx

@@ -48,11 +48,65 @@ const Chart: React.FC<{
   );
 
   useEffect(() => {
+    const handleOnFinished = () => {
+      if (!chart.current) return;
+
+      const currentChart = chart.current;
+      const optionsYAxis = currentChart.getOption()?.yAxis;
+      if (
+        !optionsYAxis ||
+        !Array.isArray(optionsYAxis) ||
+        optionsYAxis.length < 2
+      )
+        return;
+      // @ts-ignore
+      const model = currentChart.getModel();
+
+      const yAxisModels = [
+        model.getComponent('yAxis', 0),
+        model.getComponent('yAxis', 1)
+      ];
+
+      if (!yAxisModels[0] || !yAxisModels[1]) return;
+
+      const axes = yAxisModels.map((m) => m.axis);
+
+      const intervals = axes.map((axis) => axis.scale.getInterval());
+      const ticksList = axes.map((axis) => axis.scale.getTicks());
+      const counts = ticksList.map((t) => t.length);
+
+      if (counts[0] === counts[1]) return;
+
+      const unifiedCount = Math.max(counts[0], counts[1]);
+
+      const newMax0 = intervals[0] * (unifiedCount - 1);
+      const newMax1 = intervals[1] * (unifiedCount - 1);
+
+      const yAxis: any[] = [{}, {}];
+
+      if (counts[0] < unifiedCount) {
+        yAxis[0].max = newMax0;
+      }
+
+      if (counts[1] < unifiedCount) {
+        yAxis[1].max = newMax1;
+      }
+
+      setTimeout(() => {
+        currentChart.setOption({
+          yAxis: yAxis
+        });
+      }, 0);
+    };
+
     if (container.current) {
       init();
+      chart.current?.on('finished', handleOnFinished);
     }
+
     return () => {
       chart.current?.dispose();
+      chart.current?.off('finished', handleOnFinished);
     };
   }, [init]);
 

src/components/echarts/config.ts

@@ -1,24 +1,9 @@
 import useUserSettings from '@/hooks/use-user-settings';
+import { formatLargeNumber } from '@/utils';
 import { theme } from 'antd';
 import { isFunction } from 'lodash';
 import { useMemo } from 'react';
 
-const formatLargeNumber = (value: number) => {
-  if (typeof value !== 'number' || isNaN(value)) {
-    return value;
-  }
-
-  if (value >= 1e9) {
-    return (value / 1e9).toFixed(1).replace(/\.0$/, '') + 'B';
-  } else if (value >= 1e6) {
-    return (value / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
-  } else if (value >= 1e3) {
-    return (value / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
-  } else {
-    return value;
-  }
-};
-
 export const grid = {
   left: 0,
   right: 20,

src/components/echarts/mix-line-bar.tsx

@@ -62,12 +62,7 @@ const MixLineBarChart: React.FC<
     yAxis,
     legend: {
       ...legend,
-      data: legendData.map((item: any) => {
-        return {
-          name: item,
-          icon: 'circle'
-        };
-      })
+      data: legendData
     },
 
     series: []
@@ -112,16 +107,10 @@ const MixLineBarChart: React.FC<
       },
       yAxis: [
         {
-          ...options.yAxis,
-          min: 0,
-
-          splitNumber: 7
+          ...options.yAxis
         },
         {
           ...options.yAxis,
-          min: 0,
-          max: 70,
-          splitNumber: 7,
           nameTextStyle: {
             fontSize: 12,
             align: 'right'

src/components/echarts/types.ts

@@ -1,8 +1,9 @@
+import type { LegendComponentOption } from 'echarts/components';
 export interface ChartProps {
   seriesData: any[];
   showEmpty?: boolean;
   xAxisData: string[];
-  legendData?: string[];
+  legendData?: LegendComponentOption['data'];
   labelFormatter?: (val?: any) => string;
   tooltipValueFormatter?: (val: any) => string;
   height: string | number;