🌱 草创概览饼图，echarts调参苦手

package.json

@@ -50,12 +50,14 @@
     "@mdi/font": "7.2.96",
     "@tauri-apps/api": "^1.4.0",
     "clipboard": "^2.0.11",
+    "echarts": "^5.4.3",
     "html2canvas": "^1.4.1",
     "js-md5": "^0.7.3",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql#v1",
     "vue": "^3.3.4",
+    "vue-echarts": "^6.6.1",
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.2.4",
     "vuetify": "^3.3.14"

src/components/gachaRecord/gr-echarts.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-chart class="echarts-box" :option="props.options" autoresize />
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, provide } from "vue";
+import VChart, { THEME_KEY } from "vue-echarts";
+// tauri
+import { event } from "@tauri-apps/api";
+// store
+import { useAppStore } from "../../store/modules/app";
+// echarts
+import { use } from "echarts/core";
+import { LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import { PieChart } from "echarts/charts";
+import { LabelLayout } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+
+// types
+import { type EChartsOption } from "echarts";
+import showSnackbar from "../func/snackbar";
+
+export interface GachaEchartsProps {
+  echartsId: string;
+  options: EChartsOption;
+}
+
+const props = defineProps<GachaEchartsProps>();
+
+// store
+const appStore = useAppStore();
+
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+
+// 获取当前主题
+const theme = appStore.theme;
+provide(THEME_KEY, theme === "dark" ? "dark" : "light");
+
+onMounted(async () => {
+  await listenOnTheme();
+});
+
+// 监听主题变化
+async function listenOnTheme(): Promise<void> {
+  await event.listen("readTheme", (e) => {
+    const themeGet = <string>e.payload;
+    if (theme !== themeGet) {
+      console.info(`主题已切换为 ${themeGet}，请刷新页面`);
+      showSnackbar({
+        text: `主题已切换为 ${themeGet}，即将刷新页面`,
+      });
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+    }
+  });
+}
+</script>
+<style lang="css" scoped>
+.echarts-box {
+  width: 800px;
+  height: 600px;
+  padding: 10px;
+  border-radius: 10px;
+  margin: 10px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+</style>