suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 22s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
SunCheng
2026-01-21 16:09:38 +08:00
parent c2a27abcac
commit b2e903e968
7 changed files with 626 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
Web/src/components/Budget/BudgetChartAnalysis.vue
View File

@@ -11,11 +11,25 @@
(月度)
</div>
</div>
<div
ref="monthGaugeRef"
class="chart-body gauge-chart"
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-wrapper">
<div
ref="monthGaugeRef"
class="chart-body gauge-chart"
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-text-overlay">
<div
class="remaining-label"
>
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
</div>
<div
class="remaining-value"
>
¥{{ formatMoney(Math.max(0, overallStats.month.limit - overallStats.month.current)) }}
</div>
</div>
</div>
<div class="gauge-footer compact">
<div class="gauge-item">
<span class="label">
@@ -40,11 +54,25 @@
(年度)
</div>
</div>
<div
ref="yearGaugeRef"
class="chart-body gauge-chart"
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-wrapper">
<div
ref="yearGaugeRef"
class="chart-body gauge-chart"
:style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
/>
<div class="gauge-text-overlay">
<div
class="remaining-label"
>
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
</div>
<div
class="remaining-value"
>
¥{{ formatMoney(Math.max(0, overallStats.year.limit - overallStats.year.current)) }}
</div>
</div>
</div>
<div class="gauge-footer compact">
<div class="gauge-item">
<span class="label">
@@ -255,12 +283,13 @@ const updateSingleGauge = (chart, data, isExpense) => {
valueAnimation: true,
fontSize: 24, // 字体调小
offsetCenter: [0, -5],
color: 'var(--van-text-color)',
color: getCssVar('--van-text-color'),
formatter: '{value}%',
fontWeight: 'bold',
fontFamily: 'DIN Alternate, system-ui'
fontFamily: 'DIN Alternate, system-ui',
show: false
},
data: [{ value: displayRate }]
data: [{ value: displayRate.toFixed(0) }]
}
]
}
@@ -872,6 +901,42 @@ onUnmounted(() => {
/* 减小内边距 */
}
.gauge-wrapper {
position: relative;
width: 100%;
height: 120px;
}
.gauge-text-overlay {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
}
.remaining-value {
font-size: 24px;
font-weight: bold;
font-family: DIN Alternate, system-ui;
color: var(--van-text-color);
line-height: 1;
transform-origin: center;
}
.remaining-label {
font-size: 10px;
color: var(--van-text-color-2);
margin-top: 4px;
font-family: system-ui;
transform-origin: center;
}
.chart-header {
margin-bottom: 12px;
}