From 099323ece19f52f39c92bc8cd75994c93d7543ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Mon, 20 Mar 2023 15:22:16 +0800
Subject: [PATCH] =?UTF-8?q?echarts=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dashboard/compenents/pie.tsx | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/pages/dashboard/compenents/pie.tsx

diff --git a/src/pages/dashboard/compenents/pie.tsx b/src/pages/dashboard/compenents/pie.tsx
new file mode 100644
index 0000000..8b2d787
--- /dev/null
+++ b/src/pages/dashboard/compenents/pie.tsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import { Pie } from "@ant-design/plots";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+export const DemoPie = () => {
+  const data = [
+    { type: "视频数", value: 27 },
+    { type: "图片数", value: 25 },
+  ];
+  const config = {
+    appendPadding: 10,
+    data,
+    angleField: "value",
+    colorField: "type",
+    radius: 1,
+    innerRadius: 0.6,
+    label: {
+      type: "inner",
+      offset: "-50%",
+      content: "{value}",
+      style: { textAlign: "center", fontSize: 14 },
+    },
+    interactions: [{ type: "element-selected" }, { type: "element-active" }],
+    statistic: {
+      content: {
+        style: {
+          whiteSpace: "pre-wrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        },
+        content: "总资源数",
+      },
+    },
+  };
+  return <Pie {...config} />;
+};
+root.render(<DemoPie />);