🎨 美化样式，添加新手池数据

src/components/gachaRecord/gro-echarts.vue

@@ -0,0 +1,211 @@
+<template>
+  <v-chart :option="getPoolData()" autoresize />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, provide } from "vue";
+import VChart, { THEME_KEY } from "vue-echarts";
+import showSnackbar from "../func/snackbar";
+// echarts
+import { use } from "echarts/core";
+import {
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+} from "echarts/components";
+import { PieChart } from "echarts/charts";
+import { LabelLayout } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import { type EChartsOption } from "echarts";
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
+// 获取当前主题
+provide(THEME_KEY, "dark");
+
+interface GachaOverviewEchartsProps {
+  modelValue: TGApp.Sqlite.GachaRecords.SingleTable[];
+}
+
+const props = defineProps<GachaOverviewEchartsProps>();
+
+onMounted(async () => {
+  const totalNum = props.modelValue.length;
+  showSnackbar({
+    text: `成功获取 ${totalNum} 条祈愿数据`,
+  });
+});
+
+// data
+const defaultOptions = <EChartsOption>{
+  title: [
+    {
+      text: "数据概览",
+      left: "center",
+      top: "5%",
+    },
+    {
+      text: "卡池分布",
+      left: "17%",
+      top: "45%",
+    },
+    {
+      text: "星级分布",
+      left: "17%",
+      top: "90%",
+    },
+    {
+      text: "角色池分布",
+      left: "45%",
+      bottom: "10%",
+    },
+    {
+      text: "武器池分布",
+      right: "5%",
+      bottom: "10%",
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+  legend: {
+    type: "scroll",
+    orient: "vertical",
+    left: 10,
+    top: 20,
+    bottom: 20,
+  },
+  toolbox: {
+    show: true,
+    feature: {
+      restore: {},
+      saveAsImage: {},
+    },
+  },
+  series: [
+    {
+      name: "卡池分布",
+      type: "pie",
+      radius: "50%",
+      data: [],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+        },
+      },
+      right: "60%",
+      top: 0,
+      bottom: "50%",
+    },
+    {
+      name: "星级分布",
+      type: "pie",
+      radius: "50%",
+      data: [],
+      right: "60%",
+      top: "50%",
+      bottom: "0",
+    },
+    {
+      name: "角色池分布",
+      type: "pie",
+      radius: [30, 150],
+      center: ["50%", "50%"],
+      roseType: "area",
+      itemStyle: {
+        borderRadius: [2, 10],
+      },
+      data: [],
+      datasetIndex: 3,
+    },
+    {
+      name: "武器池分布",
+      type: "pie",
+      radius: [30, 100],
+      itemStyle: {
+        borderRadius: [3, 10],
+      },
+      data: [],
+      left: "70%",
+    },
+  ],
+};
+
+// 获取卡池分布的数据
+function getPoolData(): EChartsOption {
+  const data = JSON.parse(JSON.stringify(defaultOptions));
+  data.title[0].subtext = `共 ${props.modelValue.length} 条数据`;
+  data.series[0].data = [
+    { value: props.modelValue.filter((item) => item.uigfType === "100").length, name: "新手祈愿" },
+    { value: props.modelValue.filter((item) => item.uigfType === "200").length, name: "常驻祈愿" },
+    {
+      value: props.modelValue.filter((item) => item.uigfType === "301").length,
+      name: "角色活动祈愿",
+    },
+    {
+      value: props.modelValue.filter((item) => item.uigfType === "302").length,
+      name: "武器活动祈愿",
+    },
+  ];
+  data.series[1].data = [
+    { value: props.modelValue.filter((item) => item.rank === "3").length, name: "3星" },
+    { value: props.modelValue.filter((item) => item.rank === "4").length, name: "4星" },
+    { value: props.modelValue.filter((item) => item.rank === "5").length, name: "5星" },
+  ];
+  const tempSet = new Set<string>();
+  const tempRecord = new Map<string, number>();
+  // 角色池分析
+  let tempList = props.modelValue.filter((item) => item.uigfType === "301");
+  let star3 = tempList.filter((item) => item.rank === "3").length;
+  data.title[3].subtext = `共 ${tempList.length} 条数据, 其中三星武器 ${star3} 抽`;
+  tempList
+    .filter((item) => item.rank !== "3")
+    .forEach((item) => {
+      if (tempSet.has(item.name)) {
+        tempRecord.set(item.name, (tempRecord.get(item.name) ?? 0) + 1);
+      } else {
+        tempSet.add(item.name);
+        tempRecord.set(item.name, 1);
+      }
+    });
+  data.series[2].data = Array.from(tempRecord).map((item) => {
+    return {
+      value: item[1],
+      name: item[0],
+    };
+  });
+  tempSet.clear();
+  tempRecord.clear();
+  // 武器池分析
+  tempList = props.modelValue.filter((item) => item.uigfType === "302");
+  star3 = tempList.filter((item) => item.rank === "3").length;
+  data.title[4].subtext = `共 ${tempList.length} 条数据，其中三星武器 ${star3} 抽`;
+  tempList
+    .filter((item) => item.rank !== "3")
+    .forEach((item) => {
+      if (tempSet.has(item.name)) {
+        tempRecord.set(item.name, (tempRecord.get(item.name) ?? 0) + 1);
+      } else {
+        tempSet.add(item.name);
+        tempRecord.set(item.name, 1);
+      }
+    });
+  data.series[3].data = Array.from(tempRecord).map((item) => {
+    return {
+      value: item[1],
+      name: item[0],
+    };
+  });
+  return data;
+}
+</script>