fix: 图标功能优化。

src/pages/statistic/bigScreen/index.vue

@@ -221,6 +221,7 @@
        <!-- 未来3个月贷款还款计划 -->
       <view class="section" v-if="lendRepaymentData.length > 0">
         <view class="section-title">未来3个月贷款还款计划</view>
+        <view class="chart-stat" style="color: #ef4444;">待还总计: {{ lendRepaymentTotal.toFixed(2) }}元</view>
         <view class="chart-container">
           <qiun-data-charts type="area" :opts="lendRepaymentChartOpts" :chartData="lendRepaymentChartData" />
         </view>
@@ -229,6 +230,7 @@
             <!-- 近一周/近一月日常支出 -->
       <view class="section">
         <view class="section-title">{{ expenseActiveTab === 'week' ? '近7天' : '近30天' }}日常支出</view>
+        <view class="chart-stat" style="color: #f59e0b;">支出总计: {{ currentExpenseTotal.toFixed(2) }}元</view>
         <view class="tab-buttons">
           <view 
             class="tab-btn" 
@@ -251,6 +253,7 @@
       <!-- 近一周/近一月投资收益 -->
       <view class="section">
         <view class="section-title">{{ investActiveTab === 'week' ? '近7天' : '近30天' }}投资收益</view>
+        <view class="chart-stat" :style="{ color: currentInvestTotal >= 0 ? '#10b981' : '#ef4444' }">收益总计: {{ currentInvestTotal >= 0 ? '+' : '' }}{{ currentInvestTotal.toFixed(2) }}元</view>
         <view class="tab-buttons">
           <view 
             class="tab-btn" 
@@ -273,6 +276,7 @@
        <!-- 近一周/近一月账户收支统计 -->
       <view class="section">
         <view class="section-title">{{ balanceActiveTab === 'week' ? '近7天' : '近30天' }}账户收支统计</view>
+        <view class="chart-stat" :style="{ color: balanceTotal >= 0 ? '#10b981' : '#ef4444' }">收支差额: {{ balanceTotal >= 0 ? '+' : '' }}{{ balanceTotal.toFixed(2) }}元</view>
         <view class="tab-buttons">
           <view 
             class="tab-btn" 
@@ -295,6 +299,7 @@
       <!-- 近一年信用卡账单统计 -->
       <view class="section" v-if="creditBillData.length > 0">
         <view class="section-title">近一年信用卡账单统计</view>
+        <view class="chart-stat" style="color: #f59e0b;">累计账单: {{ creditBillTotal.toFixed(2) }}元</view>
         <view class="chart-container">
           <qiun-data-charts type="area" :opts="creditBillChartOpts" :chartData="creditBillChartData" />
         </view>
@@ -303,6 +308,7 @@
       <!-- 近两年储蓄卡开卡统计 -->
       <view class="section" v-if="openCardData.length > 0">
         <view class="section-title">近两年储蓄卡开卡统计</view>
+        <view class="chart-stat" style="color: #10b981;">累计开卡: {{ openCardTotal }}张</view>
         <view class="chart-container">
           <qiun-data-charts type="area" :opts="openCardChartOpts" :chartData="openCardChartData" />
         </view>
@@ -310,6 +316,7 @@
       <!-- 近15天净资产趋势 -->
       <view class="section">
         <view class="section-title">近15天净资产趋势</view>
+        <view class="chart-stat" style="color: #1890FF;">当前净资产: {{ netAssetLatest.toFixed(2) }}元</view>
         <view class="chart-container">
           <qiun-data-charts type="area" :opts="trendChartOpts" :chartData="trendChartData" />
         </view>
@@ -317,6 +324,7 @@
       <!-- 近2个月POS机刷卡统计 -->
       <view class="section" v-if="posCardData.length > 0">
         <view class="section-title">近2个月POS机刷卡统计</view>
+        <view class="chart-stat" style="color: #f59e0b;">累计刷卡: {{ posCardTotal.toFixed(2) }}元</view>
         <view class="chart-container">
           <qiun-data-charts type="area" :opts="posCardChartOpts" :chartData="posCardChartData" />
         </view>
@@ -462,6 +470,66 @@ const netAsset = computed(() => {
   return totalAsset.value - totalDebt.value
 })
 
+// 图表统计数据计算
+const creditBillTotal = computed(() => {
+  if (!creditBillData.value || creditBillData.value.length === 0) return 0
+  return creditBillData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const openCardTotal = computed(() => {
+  if (!openCardData.value || openCardData.value.length === 0) return 0
+  return openCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const posCardTotal = computed(() => {
+  if (!posCardData.value || posCardData.value.length === 0) return 0
+  return posCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const lendRepaymentTotal = computed(() => {
+  if (!lendRepaymentData.value || lendRepaymentData.value.length === 0) return 0
+  return lendRepaymentData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const netAssetLatest = computed(() => {
+  if (!netAssetTrendData.value || netAssetTrendData.value.length === 0) return 0
+  return Number(netAssetTrendData.value[netAssetTrendData.value.length - 1]?.totalBalance) || 0
+})
+
+const weeklyExpenseTotal = computed(() => {
+  if (!weeklyExpenseData.value || weeklyExpenseData.value.length === 0) return 0
+  return weeklyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const monthlyExpenseTotal = computed(() => {
+  if (!monthlyExpenseData.value || monthlyExpenseData.value.length === 0) return 0
+  return monthlyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const currentExpenseTotal = computed(() => {
+  return expenseActiveTab.value === 'week' ? weeklyExpenseTotal.value : monthlyExpenseTotal.value
+})
+
+const weeklyInvestTotal = computed(() => {
+  if (!weeklyInvestIncomeData.value || weeklyInvestIncomeData.value.length === 0) return 0
+  return weeklyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const monthlyInvestTotal = computed(() => {
+  if (!monthlyInvestIncomeData.value || monthlyInvestIncomeData.value.length === 0) return 0
+  return monthlyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
+const currentInvestTotal = computed(() => {
+  return investActiveTab.value === 'week' ? weeklyInvestTotal.value : monthlyInvestTotal.value
+})
+
+const balanceTotal = computed(() => {
+  const data = balanceActiveTab.value === 'week' ? weeklyBalanceData.value : monthlyBalanceData.value
+  if (!data || data.length === 0) return 0
+  return data.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+})
+
 // 资产结构图表配置
 const assetChartData = computed(() => {
   const data = [
@@ -493,13 +561,14 @@ const assetChartOpts = computed(() => ({
     itemGap: 8
   },
   title: {
-    name: `资产总计`,
+     name: '资产总计',
-    fontSize: 10,
+    fontSize: 12,
-    color: '#666666'
+    color: '#aaaaaa'
+   
   },
   subtitle: {
-    name: `${totalAsset.value.toFixed(2)}元`,
+    name: totalAsset.value > 0 ? totalAsset.value.toFixed(2) : '',
-    fontSize: 8,
+    fontSize: 13,
     color: '#10b981'
   },
   extra: {
@@ -515,8 +584,6 @@ const assetChartOpts = computed(() => ({
     }
   }
 }))
-
-// 负债结构图表配置
 const debtChartData = computed(() => {
   const data = [
     { name: '未结清贷款', value: Number(unClearedOnlineDebt.value) || 0 },
@@ -543,13 +610,14 @@ const debtChartOpts = computed(() => ({
     itemGap: 8
   },
   title: {
-    name: `负债总计`,
+       name: '负债总计',
-    fontSize: 10,
+    fontSize: 12,
-    color: '#666666'
+    color: '#aaaaaa'
   },
   subtitle: {
-    name: `${totalDebt.value.toFixed(2)}元`,
+
-    fontSize: 8,
+     name: totalDebt.value > 0 ? totalDebt.value.toFixed(2) : '',
+    fontSize: 13,
     color: '#ef4444'
   },
   extra: {
@@ -565,8 +633,6 @@ const debtChartOpts = computed(() => ({
     }
   }
 }))
-
-// 雷达图配置
 const radarChartData = computed(() => {
   const safeTotalAsset = totalAsset.value || 1
   const safeCreditLimit = Number(creditLimit.value) || 1
@@ -633,7 +699,7 @@ const trendChartData = computed(() => {
   }
 })
 
-const trendChartOpts = ref({
+const trendChartOpts = computed(() => ({
   color: ['#1890FF'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -641,6 +707,13 @@ const trendChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `净资产趋势当前: ${netAssetLatest.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: '#1890FF',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -661,7 +734,7 @@ const trendChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 支出趋势图配置
 const expenseChartData = computed(() => {
@@ -678,7 +751,7 @@ const expenseChartData = computed(() => {
   }
 })
 
-const expenseChartOpts = ref({
+const expenseChartOpts = computed(() => ({
   color: ['#f59e0b'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -686,6 +759,13 @@ const expenseChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `${expenseActiveTab.value === 'week' ? '近一周' : '近一月'}支出总计: ${currentExpenseTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: '#f59e0b',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -706,7 +786,7 @@ const expenseChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 投资收益图配置
 const investChartData = computed(() => {
@@ -724,7 +804,7 @@ const investChartData = computed(() => {
   }
 })
 
-const investChartOpts = ref({
+const investChartOpts = computed(() => ({
   color: ['#10b981'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -732,6 +812,13 @@ const investChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `${investActiveTab.value === 'week' ? '近一周' : '近一月'}投资收益: ${currentInvestTotal.value >= 0 ? '+' : ''}${currentInvestTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: currentInvestTotal.value >= 0 ? '#10b981' : '#ef4444',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -752,7 +839,7 @@ const investChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 贷款还款计划图配置
 const lendRepaymentChartData = computed(() => {
@@ -766,7 +853,7 @@ const lendRepaymentChartData = computed(() => {
   }
 })
 
-const lendRepaymentChartOpts = ref({
+const lendRepaymentChartOpts = computed(() => ({
   color: ['#4181c9'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -774,6 +861,13 @@ const lendRepaymentChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `贷款待还总计: ${lendRepaymentTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: '#ef4444',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -794,7 +888,7 @@ const lendRepaymentChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 账户收支图配置
 const balanceChartData = computed(() => {
@@ -811,7 +905,7 @@ const balanceChartData = computed(() => {
   }
 })
 
-const balanceChartOpts = ref({
+const balanceChartOpts = computed(() => ({
   color: ['#4181c9'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -819,6 +913,13 @@ const balanceChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `${balanceActiveTab.value === 'week' ? '近一周' : '近一月'}收支差额: ${balanceTotal.value >= 0 ? '+' : ''}${balanceTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: balanceTotal.value >= 0 ? '#10b981' : '#ef4444',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -839,7 +940,7 @@ const balanceChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 信用卡账单图配置
 const creditBillChartData = computed(() => {
@@ -853,7 +954,7 @@ const creditBillChartData = computed(() => {
   }
 })
 
-const creditBillChartOpts = ref({
+const creditBillChartOpts = computed(() => ({
   color: ['#4181c9'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -861,6 +962,13 @@ const creditBillChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `信用卡账单累计: ${creditBillTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: '#f59e0b',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -881,7 +989,7 @@ const creditBillChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 储蓄卡开卡图配置
 const openCardChartData = computed(() => {
@@ -898,7 +1006,7 @@ const openCardChartData = computed(() => {
   }
 })
 
-const openCardChartOpts = ref({
+const openCardChartOpts = computed(() => ({
   color: ['#10b981'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -906,6 +1014,13 @@ const openCardChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `近两年开卡累计: ${openCardTotal.value}张`,
+    fontSize: 10,
+    color: '#10b981',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -926,7 +1041,7 @@ const openCardChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // POS机刷卡图配置
 const posCardChartData = computed(() => {
@@ -940,7 +1055,7 @@ const posCardChartData = computed(() => {
   }
 })
 
-const posCardChartOpts = ref({
+const posCardChartOpts = computed(() => ({
   color: ['#f59e0b'],
   padding: [15, 15, 0, 15],
   enableScroll: false,
@@ -948,6 +1063,13 @@ const posCardChartOpts = ref({
     show: false
   },
   dataLabel: false,
+  title: {
+    name: `近2个月POS刷卡累计: ${posCardTotal.value.toFixed(2)}元`,
+    fontSize: 10,
+    color: '#f59e0b',
+    offsetX: 0,
+    offsetY: 0
+  },
   xAxis: {
     disableGrid: true,
     fontSize: 9,
@@ -968,7 +1090,7 @@ const posCardChartOpts = ref({
       gradient: true
     }
   }
-})
+}))
 
 // 返回上一页
 const goBack = () => {
@@ -1420,6 +1542,14 @@ onMounted(() => {
   }
 }
 
+.chart-stat {
+  font-size: 24rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+  padding-left: 16rpx;
+  font-family: 'DIN', ui-monospace, monospace;
+}
+
 .data-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);