fix

Web/src/components/Budget/BudgetChartAnalysis.vue

@@ -7,8 +7,14 @@
         <div class="chart-header">
           <div class="chart-title">
             <!-- 月度健康度 -->
-            {{ activeTab === BudgetCategory.Expense ? '使用情况' : '完成情况' }}
-            (月度)
+            {{ activeTab === BudgetCategory.Expense ? '使用情况（月度）' : '完成情况（月度）' }}
+            <van-icon
+              name="info-o"
+              size="16"
+              color="var(--van-primary-color)"
+              style="margin-left: auto; cursor: pointer"
+              @click="showDescriptionPopup = true; activeDescTab = 'month'"
+            />
           </div>
         </div>
         <div class="gauge-wrapper">
@@ -50,8 +56,14 @@
       <div class="chart-card gauge-card">
         <div class="chart-header">
           <div class="chart-title">
-            {{ activeTab === BudgetCategory.Expense ? '使用情况' : '完成情况' }}
-            (年度)
+            {{ activeTab === BudgetCategory.Expense ? '使用情况（年度）' : '完成情况（年度）' }}
+            <van-icon
+              name="info-o"
+              size="16"
+              color="var(--van-primary-color)"
+              style="margin-left: auto; cursor: pointer"
+              @click="showDescriptionPopup = true; activeDescTab = 'year'"
+            />
           </div>
         </div>
         <div class="gauge-wrapper">
@@ -161,6 +173,19 @@
       />
     </div>
   </div>
+
+  <!-- 详细描述弹窗 -->
+  <PopupContainer
+    v-model="showDescriptionPopup"
+    :title="activeDescTab === 'month' ? '预算额度/实际详情（月度）' : '预算额度/实际详情（年度）'"
+    height="70%"
+  >
+    <div
+      class="rich-html-content"
+      style="padding: 16px"
+      v-html="activeDescTab === 'month' ? (overallStats.month?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>') : (overallStats.year?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>')"
+    />
+  </PopupContainer>
 </template>
 
 <script setup>
@@ -168,6 +193,7 @@ import { ref, onMounted, watch, nextTick, onUnmounted, computed } from 'vue'
 import * as echarts from 'echarts'
 import { BudgetCategory } from '@/constants/enums'
 import { getCssVar } from '@/utils/theme'
+import PopupContainer from '@/components/PopupContainer.vue'
 
 const props = defineProps({
   overallStats: {
@@ -194,15 +220,16 @@ const varianceChartRef = ref(null)
 const burndownChartRef = ref(null)
 const yearBurndownChartRef = ref(null)
 
+// 弹窗状态
+const showDescriptionPopup = ref(false)
+const activeDescTab = ref('month')
+
 let monthGaugeChart = null
 let yearGaugeChart = null
 let varianceChart = null
 let burndownChart = null
 let yearBurndownChart = null
 
-const monthBudgets = computed(() => (props.budgets || []).filter(b => b.type === 1))
-const yearBudgets = computed(() => (props.budgets || []).filter(b => b.type === 2))
-
 const formatMoney = (val) => {
   if (Math.abs(val) >= 10000) {
     return (val / 10000).toFixed(1) + 'w'
@@ -213,14 +240,6 @@ const formatMoney = (val) => {
   })
 }
 
-const initGaugeChart = (chartInstance, dom, data, isExpense) => {
-  if (!dom) { return null }
-
-  const chart = echarts.init(dom)
-  updateSingleGauge(chart, data, isExpense)
-  return chart
-}
-
 const updateSingleGauge = (chart, data, isExpense) => {
   if (!chart) { return }
 
@@ -258,8 +277,8 @@ const updateSingleGauge = (chart, data, isExpense) => {
         min: 0,
         max: 100,
         splitNumber: 5,
-        radius: '110%', // 放大一点以适应小卡片
-        center: ['50%', '75%'],
+        radius: '120%', // 放大一点以适应小卡片
+        center: ['50%', '70%'],
         itemStyle: {
           color: color,
           shadowColor: getCssVar('--chart-shadow'),