chore: dashbord ui

2024-06-17 19:33:07 +08:00
parent 8d35ce0380
commit 246d203e36
11 changed files with 521 additions and 230 deletions
@@ -0,0 +1,65 @@
+import { Bar } from '@ant-design/plots';
+
+interface BarChartProps {
+  data: any[];
+  xField: string;
+  yField: string;
+  title?: string;
+  height?: number;
+}
+const BarChart: React.FC<BarChartProps> = (props) => {
+  const { data, xField, yField, title, height = 300 } = props;
+  const config = {
+    data,
+    xField,
+    yField,
+    // colorField: 'name',
+    direction: 'vertical',
+    height,
+    group: true,
+    legend: {
+      color: {
+        position: 'top',
+        layout: {
+          justifyContent: 'center'
+        }
+      }
+    },
+    axis: {
+      x: {
+        xAxis: true
+      }
+    },
+    title: {
+      title,
+      style: {
+        align: 'center'
+      }
+    },
+    split: {
+      type: 'line',
+      line: {
+        color: 'red',
+        style: {
+          color: 'red',
+          lineDash: [4, 5]
+        }
+      }
+    },
+
+    style: {
+      fill: '#54cc98',
+      radiusTopLeft: 8,
+      radiusTopRight: 8,
+      height: 30
+    }
+  };
+
+  return (
+    <>
+      <Bar {...config} />
+    </>
+  );
+};
+
+export default BarChart;