From 9162b2c87c26de1500b2c1991f6e38ef218a4f17 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Wed, 3 Jun 2026 11:30:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=B8=8D=E6=98=BE=E7=A4=BA=E4=B8=8E=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E4=B8=8A=E6=9C=88Infinity=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ChartWrapper: 添加 type 属性修复 uCharts 不渲染
- ChartWrapper: 使用 pixelRatio=1 避免双重缩放导致字体线条过大
- ChartWrapper: 统一 fontSize/fontColor/padding 配置
- ChartWrapper: 挂载时保存实例引用避免异步回调中 getCurrentInstance 返回 undefined
- stats: Number() 强制类型转换避免字符串导致 Infinity
- stats: !prev 宽松判断覆盖 null/undefined/0 除零情况
- stores: fetchOverview/fetchCategoryStats/fetchTrend 确保数据字段为数字
---
 .../components/ChartWrapper/ChartWrapper.vue  | 100 +++++++++++++-----
 client/src/pages/stats/index.vue              |  34 ++++--
 client/src/stores/stats.ts                    |  24 ++++-
 3 files changed, 117 insertions(+), 41 deletions(-)

diff --git a/client/src/components/ChartWrapper/ChartWrapper.vue b/client/src/components/ChartWrapper/ChartWrapper.vue
index a54e197..0c99479 100644
--- a/client/src/components/ChartWrapper/ChartWrapper.vue
+++ b/client/src/components/ChartWrapper/ChartWrapper.vue
@@ -1,6 +1,7 @@
 <template>
   <view class="chart-wrap">
     <canvas
+      type="2d"
       :canvas-id="canvasId"
       :id="canvasId"
       class="chart-canvas"
@@ -25,6 +26,8 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['tap'])
 
+// 挂载时保存实例引用，避免异步回调中 getCurrentInstance 返回 undefined
+const instance = getCurrentInstance()
 let chartInstance: any = null
 
 function drawChart() {
@@ -39,6 +42,43 @@ function drawChart() {
   // #endif
 }
 
+function buildConfig(ctx: any, canvas2d: boolean, cssWidth: number, cssHeight: number) {
+  // canvas 已通过 ctx.scale(dpr) 处理缩放，uCharts 用 pixelRatio=1 避免双重缩放
+  const base: any = {
+    type: props.type,
+    context: ctx,
+    canvas2d,
+    pixelRatio: 1,
+    width: cssWidth,
+    height: cssHeight,
+    animation: true,
+    background: '#FFFFFF',
+    padding: [20, 20, 20, 20],
+    fontSize: 10,
+    fontColor: '#8B7E7E',
+    title: { show: false },
+    subtitle: { show: false },
+    legend: { show: false },
+    dataLabel: false,
+    enableScroll: false,
+    ...props.chartData
+  }
+
+  // 饼图开启数据标签
+  if (props.type === 'pie') {
+    base.dataLabel = true
+    base.padding = [30, 30, 30, 30]
+  }
+
+  // 折线图/柱状图坐标轴字体
+  if (props.type === 'line' || props.type === 'column') {
+    base.xAxis = { fontSize: 10, ...base.xAxis }
+    base.yAxis = { fontSize: 10, ...base.yAxis }
+  }
+
+  return base
+}
+
 function drawChartH5() {
   try {
     const canvas = document.querySelector(`#${props.canvasId}`) as HTMLCanvasElement
@@ -53,19 +93,7 @@ function drawChartH5() {
     canvas.height = rect.height * dpr
     ctx.scale(dpr, dpr)
 
-    const config: any = {
-      context: ctx,
-      canvas2d: true,
-      pixelRatio: dpr,
-      width: rect.width,
-      height: rect.height,
-      animation: true,
-      background: '#FFFFFF',
-      padding: [15, 15, 15, 15],
-      ...props.chartData
-    }
-
-    chartInstance = new uCharts(config)
+    chartInstance = new uCharts(buildConfig(ctx, true, rect.width, rect.height))
   } catch (e) {
     console.error('[Chart] H5 draw error:', e)
   }
@@ -73,11 +101,18 @@ function drawChartH5() {
 
 function drawChartMP() {
   try {
-    const query = uni.createSelectorQuery().in(getCurrentInstance()?.proxy)
+    if (!instance?.proxy) return
+
+    const query = uni.createSelectorQuery().in(instance.proxy)
     query.select(`#${props.canvasId}`)
+      // @ts-ignore
       .fields({ node: true, size: true })
-      .exec((res) => {
-        if (!res || !res[0]) return
+      .exec((res: any) => {
+        if (!res || !res[0] || !res[0].node) {
+          console.warn('[Chart] Canvas node not found, fallback to old API')
+          drawChartMPLegacy()
+          return
+        }
 
         const canvas = res[0].node
         const ctx = canvas.getContext('2d')
@@ -87,22 +122,29 @@ function drawChartMP() {
         canvas.height = res[0].height * dpr
         ctx.scale(dpr, dpr)
 
-        const config: any = {
-          context: ctx,
-          canvas2d: true,
-          pixelRatio: dpr,
-          width: res[0].width,
-          height: res[0].height,
-          animation: true,
-          background: '#FFFFFF',
-          padding: [15, 15, 15, 15],
-          ...props.chartData
-        }
-
-        chartInstance = new uCharts(config)
+        chartInstance = new uCharts(buildConfig(ctx, true, res[0].width, res[0].height))
       })
   } catch (e) {
     console.error('[Chart] MP draw error:', e)
+    drawChartMPLegacy()
+  }
+}
+
+// 兼容旧版小程序 canvas API
+function drawChartMPLegacy() {
+  try {
+    const ctx = uni.createCanvasContext(props.canvasId, instance?.proxy)
+    if (!ctx) return
+
+    const query = uni.createSelectorQuery().in(instance?.proxy)
+    query.select(`#${props.canvasId}`)
+      .boundingClientRect((rect: any) => {
+        if (!rect) return
+        chartInstance = new uCharts(buildConfig(ctx, false, rect.width, rect.height))
+      })
+      .exec()
+  } catch (e) {
+    console.error('[Chart] MP legacy draw error:', e)
   }
 }
 
diff --git a/client/src/pages/stats/index.vue b/client/src/pages/stats/index.vue
index b989bd0..81c54be 100644
--- a/client/src/pages/stats/index.vue
+++ b/client/src/pages/stats/index.vue
@@ -57,7 +57,7 @@
         canvasId="categoryChart"
         type="pie"
         :chartData="categoryChartData"
-        :width="600"
+        :width="650"
         :height="400"
       />
       <view class="chart-legend">
@@ -90,7 +90,7 @@
         canvasId="trendChart"
         type="line"
         :chartData="trendChartData"
-        :width="600"
+        :width="650"
         :height="400"
       />
       <view class="trend-list">
@@ -149,9 +149,9 @@ const categoryChartData = computed(() => {
     series: [{
       data: categoryStats.value.map(item => ({
         name: item.name,
-        value: item.amount / 100,
-        color: item.color
-      }))
+        value: item.amount / 100
+      })),
+      color: categoryStats.value.map(item => item.color)
     }],
     extra: {
       pie: {
@@ -174,9 +174,9 @@ const trendChartData = computed(() => {
     categories: trendData.value.map(p => p.date.slice(8) + '日'),
     series: [{
       name: tabType.value === 'expense' ? '支出' : '收入',
-      data: trendData.value.map(p => p.amount / 100),
-      color: '#FF8C69'
+      data: trendData.value.map(p => p.amount / 100)
     }],
+    color: ['#FF8C69'],
     extra: {
       line: {
         type: 'curve',
@@ -187,6 +187,15 @@ const trendChartData = computed(() => {
         opacity: 0.2,
         gradient: true
       }
+    },
+    xAxis: {
+      disableGrid: true,
+      rotateLabel: true,
+      rotateAngle: -45
+    },
+    yAxis: {
+      gridColor: '#F0E0D6',
+      data: [{ min: 0 }]
     }
   }
 })
@@ -204,7 +213,8 @@ const monthCompareText = computed(() => {
   if (!prevMonthData.value) return ''
   const current = tabType.value === 'expense' ? overview.value.expense : overview.value.income
   const prev = tabType.value === 'expense' ? prevMonthData.value.expense : prevMonthData.value.income
-  if (prev === 0) return '无上月数据'
+  // 处理 prev 为 0、null、undefined 的情况，避免除零产生 Infinity
+  if (!prev) return '无上月数据'
   const pct = Math.round(((current - prev) / prev) * 100)
   if (pct > 0) return `+${pct}%`
   if (pct < 0) return `${pct}%`
@@ -275,7 +285,13 @@ async function fetchPrevMonthData() {
     const [y, m] = currentMonth.value.split('-').map(Number)
     const prevMonth = m === 1 ? `${y - 1}-12` : `${y}-${String(m - 1).padStart(2, '0')}`
     const data = await getOverview({ month: prevMonth })
-    prevMonthData.value = data
+    // 确保数据字段是数字类型，避免 null/undefined 导致 Infinity
+    prevMonthData.value = {
+      expense: Number(data?.expense) || 0,
+      income: Number(data?.income) || 0,
+      count: Number(data?.count) || 0,
+      daily: Number(data?.daily) || 0
+    }
   } catch {
     prevMonthData.value = null
   }
diff --git a/client/src/stores/stats.ts b/client/src/stores/stats.ts
index 0a6d6a7..f1d337a 100644
--- a/client/src/stores/stats.ts
+++ b/client/src/stores/stats.ts
@@ -15,7 +15,14 @@ export const useStatsStore = defineStore('stats', () => {
 
   async function fetchOverview(month?: string) {
     try {
-      overview.value = await api.getOverview({ month: month || getCurrentMonth() })
+      const data = await api.getOverview({ month: month || getCurrentMonth() })
+      // 确保数据字段是数字类型
+      overview.value = {
+        expense: Number(data?.expense) || 0,
+        income: Number(data?.income) || 0,
+        count: Number(data?.count) || 0,
+        daily: Number(data?.daily) || 0
+      }
     } catch {
       overview.value = { expense: 0, income: 0, count: 0, daily: 0 }
     }
@@ -23,7 +30,13 @@ export const useStatsStore = defineStore('stats', () => {
 
   async function fetchCategoryStats(month?: string, type: string = 'expense') {
     try {
-      categoryStats.value = await api.getCategoryStats(month || getCurrentMonth(), type)
+      const data = await api.getCategoryStats(month || getCurrentMonth(), type)
+      // 确保返回的是数组，且金额是数字
+      categoryStats.value = Array.isArray(data) ? data.map(item => ({
+        ...item,
+        amount: Number(item.amount) || 0,
+        count: Number(item.count) || 0
+      })) : []
     } catch {
       categoryStats.value = []
     }
@@ -31,7 +44,12 @@ export const useStatsStore = defineStore('stats', () => {
 
   async function fetchTrend(month?: string, type: string = 'expense') {
     try {
-      trendData.value = await api.getTrend(month || getCurrentMonth(), type)
+      const data = await api.getTrend(month || getCurrentMonth(), type)
+      // 确保返回的是数组，且金额是数字
+      trendData.value = Array.isArray(data) ? data.map(item => ({
+        ...item,
+        amount: Number(item.amount) || 0
+      })) : []
     } catch {
       trendData.value = []
     }