1

Web/src/components/Budget/BudgetChartAnalysis.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div class="chart-analysis-container">
     <!-- 仪表盘：整体健康度 -->
     <div class="gauges-row">
@@ -191,7 +191,7 @@
 <script setup>
 import { ref, onMounted, watch, nextTick, onUnmounted, computed } from 'vue'
 import * as echarts from 'echarts'
-import { BudgetCategory } from '@/constants/enums'
+import { BudgetCategory, BudgetPeriodType } from '@/constants/enums'
 import { getCssVar } from '@/utils/theme'
 import PopupContainer from '@/components/PopupContainer.vue'
 
@@ -403,18 +403,26 @@ const updateVarianceChart = (chart, budgets) => {
     const current = b.current || 0
     const diff = current - limit
     return {
-      name: b.name + (b.type === 2 ? ' (年)' : ''),
+      name: b.name + (b.type === BudgetPeriodType.Year ? ' (年)' : ''),
       value: diff,
       limit: limit,
-      current: current
+      current: current,
+      type: b.type
     }
   })
 
-  // Sort by absolute variance
-  data.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
+  // 先月度再年度，各自按偏差绝对值排序
+  const monthlyData = data.filter(item => item.type === BudgetPeriodType.Month)
+  const annualData = data.filter(item => item.type === BudgetPeriodType.Year)
 
-  const categories = data.map(item => item.name)
-  const values = data.map(item => item.value)
+  monthlyData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
+  annualData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
+
+  // 确保月度在前，年度在后
+  const sortedData = [...annualData,...monthlyData]
+
+  const categories = sortedData.map(item => item.name)
+  const values = sortedData.map(item => item.value)
   const maxVal = Math.max(...values.map(v => Math.abs(v))) || 1
 
   const textColor = getCssVar('--van-text-color')