first commit

src/views/dashboard1/hooks/useLeftChart2.ts

@@ -0,0 +1,66 @@
+import { onBeforeUnmount, ref } from "vue";
+import { EChartsOption } from "echarts";
+import { generateNumbers } from "@/utils";
+
+export default function () {
+  const option = ref<EChartsOption>({});
+
+  function refresh() {
+    option.value = {
+      tooltip: {
+        trigger: "item",
+      },
+      legend: {
+        top: "5%",
+        left: "center",
+      },
+      series: [
+        {
+          name: "Access From",
+          type: "pie",
+          radius: ["40%", "70%"],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderColor: "#fff",
+          },
+          label: {
+            show: false,
+            position: "center",
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 30,
+              fontWeight: "bold",
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: generateNumbers(10, 100), name: "产品一" },
+            { value: generateNumbers(10, 100), name: "产品二" },
+            { value: generateNumbers(10, 100), name: "产品三" },
+            { value: generateNumbers(10, 100), name: "产品四" },
+            { value: generateNumbers(10, 100), name: "产品五" },
+          ],
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}