From 3a542ead1722601985cd2a57e0fe2034ed5e291a Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Sat, 22 Nov 2025 01:08:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userGacha/gro-chart-calendar.vue | 3 ++-
 src/components/userGacha/gro-chart-overview.vue | 1 +
 src/components/userGacha/gro-chart-stackbar.vue | 1 +
 src/components/userGacha/gro-echarts.vue        | 7 ++++---
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/userGacha/gro-chart-calendar.vue b/src/components/userGacha/gro-chart-calendar.vue
index 05b24620..871bdbe5 100644
--- a/src/components/userGacha/gro-chart-calendar.vue
+++ b/src/components/userGacha/gro-chart-calendar.vue
@@ -7,6 +7,7 @@
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
     :style="{ height: chartHeight }"
+    :key="`gro-chart-calendar-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>
@@ -57,7 +58,7 @@ type EChartsOption = ComposeOption<
 const props = defineProps<GachaChartCalendarProps>();
 const { theme } = storeToRefs(useAppStore());
 
-const chartOptions = shallowRef<EChartsOption>({});
+const chartOptions = shallowRef<EChartsOption>();
 const yearCount = shallowRef<number>(1); // 默认至少1年，避免高度为0
 const echartsTheme = computed<"dark" | "light">(() => (theme.value === "dark" ? "dark" : "light"));
 
diff --git a/src/components/userGacha/gro-chart-overview.vue b/src/components/userGacha/gro-chart-overview.vue
index b9f632f5..1205181b 100644
--- a/src/components/userGacha/gro-chart-overview.vue
+++ b/src/components/userGacha/gro-chart-overview.vue
@@ -6,6 +6,7 @@
     autoresize
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
+    :key="`gro-chart-overview-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>
diff --git a/src/components/userGacha/gro-chart-stackbar.vue b/src/components/userGacha/gro-chart-stackbar.vue
index a89a605a..81ab8ff6 100644
--- a/src/components/userGacha/gro-chart-stackbar.vue
+++ b/src/components/userGacha/gro-chart-stackbar.vue
@@ -6,6 +6,7 @@
     autoresize
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
+    :key="`gro-chart-stackbar-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>
diff --git a/src/components/userGacha/gro-echarts.vue b/src/components/userGacha/gro-echarts.vue
index d3399642..8220392c 100644
--- a/src/components/userGacha/gro-echarts.vue
+++ b/src/components/userGacha/gro-echarts.vue
@@ -29,15 +29,16 @@ import { ref } from "vue";
 
 type GachaOverviewEchartsProps = { uid: string; gachaType?: string };
 type ChartsType = "overview" | "calendar" | "stackBar";
-type ChartItem = { label: string; value: ChartsType };
+type SelectType<T> = { label: string; value: T };
 
 defineProps<GachaOverviewEchartsProps>();
 
-const chartTypes: Array<ChartItem> = [
+const chartTypes: Array<SelectType<ChartsType>> = [
   { label: "祈愿分析", value: "overview" },
   { label: "祈愿日历", value: "calendar" },
   { label: "祈愿柱状图", value: "stackBar" },
 ];
+// TODO: 分卡池选择图表
 
 const curChartType = ref<ChartsType>("overview");
 </script>
@@ -70,8 +71,8 @@ const curChartType = ref<ChartsType>("overview");
 }
 
 .gro-chart-container {
+  overflow: hidden auto;
   width: 100%;
   flex: 1;
-  overflow: hidden auto;
 }
 </style>