first commit

src/views/dashboard1/hooks/useLeftChart1.ts

@@ -0,0 +1,51 @@
+import { onBeforeUnmount, ref } from "vue";
+import { EChartsOption } from "echarts";
+import { generateNumbers } from "@/utils";
+
+export default function () {
+  const option = ref<EChartsOption>({});
+
+  function refresh() {
+    option.value = {
+      xAxis: {
+        type: "category",
+        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+      },
+      yAxis: {
+        type: "value",
+      },
+      grid: {
+        left: "12%",
+      },
+      series: [
+        {
+          data: generateNumbers(1, 300, 7),
+          type: "line",
+        },
+        {
+          data: generateNumbers(1, 300, 7),
+          type: "line",
+        },
+        {
+          data: generateNumbers(1, 300, 7),
+          type: "line",
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}

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,
+  };
+}

src/views/dashboard1/hooks/useLeftChart3.ts

@@ -0,0 +1,74 @@
+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",
+        formatter: "{a} <br/>{b} : {c}%",
+      },
+      series: [
+        {
+          name: "Funnel",
+          type: "funnel",
+          left: "center",
+          width: "100%",
+          min: 0,
+          max: 1000,
+          minSize: "0%",
+          maxSize: "100%",
+          sort: "descending",
+          gap: 2,
+          label: {
+            show: true,
+            position: "inside",
+          },
+          labelLine: {
+            length: 10,
+            lineStyle: {
+              width: 1,
+              type: "solid",
+            },
+          },
+          itemStyle: {
+            borderColor: "#fff",
+            borderWidth: 1,
+          },
+          emphasis: {
+            label: {
+              fontSize: 20,
+            },
+          },
+          data: [
+            { value: generateNumbers(500, 1000), name: "访问量" },
+            { value: generateNumbers(500, 1000), name: "注册量" },
+            { value: generateNumbers(500, 1000), name: "浏览量" },
+            { value: generateNumbers(200, 500), name: "加入购物车" },
+            { value: generateNumbers(100, 800), name: "购买" },
+            { value: generateNumbers(1, 20), name: "退货" },
+            { value: generateNumbers(1, 20), name: "取消订单" },
+          ],
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}

src/views/dashboard1/hooks/useRightChart1.ts

@@ -0,0 +1,49 @@
+import { onBeforeUnmount, ref } from "vue";
+import { EChartsOption } from "echarts";
+import { generateNumbers } from "@/utils";
+
+export default function () {
+  const option = ref<EChartsOption>({});
+
+  function refresh() {
+    option.value = {
+      radar: {
+        indicator: [
+          { name: "用户满意度", max: 200 },
+          { name: "价格", max: 200 },
+          { name: "品质", max: 200 },
+          { name: "客户支持", max: 200 },
+          { name: "可持续性", max: 200 },
+          { name: "效果", max: 200 },
+        ],
+        radius: 100,
+      },
+      series: [
+        {
+          type: "radar",
+          data: [
+            {
+              value: generateNumbers(1, 200, 6),
+              areaStyle: {},
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}

src/views/dashboard1/hooks/useRightChart2.ts

@@ -0,0 +1,97 @@
+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: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      legend: {
+        top: "5%",
+        itemStyle: {
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+      },
+      grid: {
+        left: "10%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "value",
+        },
+      ],
+      yAxis: [
+        {
+          type: "category",
+          axisTick: {
+            show: false,
+          },
+          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
+        },
+      ],
+      series: [
+        {
+          name: "预定",
+          type: "bar",
+          label: {
+            show: true,
+            position: "inside",
+          },
+          emphasis: {
+            focus: "series",
+          },
+          data: generateNumbers(1, 200, 7),
+        },
+        {
+          name: "购买",
+          type: "bar",
+          stack: "Total",
+          label: {
+            show: true,
+          },
+          emphasis: {
+            focus: "series",
+          },
+          data: generateNumbers(1, 300, 7),
+        },
+        {
+          name: "退货",
+          type: "bar",
+          stack: "Total",
+          label: {
+            show: true,
+          },
+          emphasis: {
+            focus: "series",
+          },
+          data: generateNumbers(-50, -10, 7),
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}

src/views/dashboard1/hooks/useRightChart3.ts

@@ -0,0 +1,59 @@
+import { onBeforeUnmount, ref } from "vue";
+import { EChartsOption } from "echarts";
+import { generateNumbers } from "@/utils";
+
+export default function () {
+  const option = ref<EChartsOption>({});
+
+  function refresh() {
+    option.value = {
+      xAxis: {},
+      yAxis: {},
+      series: [
+        {
+          symbolSize: 20,
+          data: [
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            [8.07, 6.95],
+            [13.0, 7.58],
+            [14.0, 7.66],
+            [13.4, 6.81],
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            [11.5, 7.2],
+            [3.03, 4.23],
+            [1.05, 3.33],
+            [4.05, 4.96],
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            generateNumbers(1, 10, 2),
+            [5.02, 5.68],
+          ],
+          type: "scatter",
+        },
+      ],
+    };
+  }
+
+  refresh();
+
+  const timer = setInterval(() => {
+    refresh();
+  }, 3000);
+
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+
+  return {
+    option,
+    refresh,
+  };
+}