用豆包生成了一个财务报表的页面，觉得比较好看，大家可以参考学些下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>财务报表分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
success: '#52C41A',
warning: '#FAAD14',
danger: '#FF4D4F',
neutral: {
100: '#F5F7FA',
200: '#E5E6EB',
300: '#C9CDD4',
400: '#86909C',
500: '#4E5969',
600: '#272E3B',
700: '#1D2129',
}
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
}
.transition-custom {
transition: all 0.3s ease;
}
}
</style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-4">
<i class="fa fa-line-chart text-primary text-2xl"></i>
<h1 class="text-xl font-semibold">财务报表分析系统</h1>
</div>
<div class="flex items-center space-x-6">
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-primary font-medium">仪表盘</a>
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">收支记录</a>
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">预算管理</a>
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">财务分析</a>
</nav>
<div class="flex items-center space-x-4">
<button class="text-neutral-500 hover:text-primary transition-custom">
<i class="fa fa-bell-o text-lg"></i>
</button>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
<span class="text-primary font-medium">JD</span>
</div>
<span class="hidden md:inline text-sm font-medium">贾东</span>
</div>
</div>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6">
<!-- 页面标题和筛选区 -->
<div class="mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold mb-2 md:mb-0">财务报表分析</h2>
<div class="flex items-center space-x-4">
<div class="relative">
<select class="appearance-none bg-white border border-neutral-200 rounded-lg py-2 pl-4 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-custom">
<option>全部账户</option>
<option>招商银行(6288)</option>
<option>工商银行(8866)</option>
<option>支付宝</option>
<option>微信支付</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-400">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-medium transition-custom flex items-center">
<i class="fa fa-download mr-2"></i>导出报表
</button>
</div>
</div>
<!-- 总开关和时间筛选器 -->
<div class="bg-white rounded-xl p-4 shadow-sm mb-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div class="flex flex-wrap gap-2 mb-4 md:mb-0">
<button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium transition-custom">
收支趋势
</button>
<button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary/50 text-neutral-600 rounded-lg text-sm font-medium transition-custom">
支出分类
</button>
<button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary/50 text-neutral-600 rounded-lg text-sm font-medium transition-custom">
收入来源
</button>
<button class="px-4 py-2 bg-white border border-neutral-200 hover:border-primary/50 text-neutral-600 rounded-lg text-sm font-medium transition-custom">
资产负债
</button>
</div>
<!-- 时间筛选器 - 移动到总开关区域 -->
<div class="flex items-center space-x-3">
<div class="flex space-x-2">
<button class="px-3 py-1.5 bg-primary/10 text-primary rounded-md text-sm font-medium transition-custom">
近7天
</button>
<button class="px-3 py-1.5 bg-white border border-neutral-200 hover:border-primary/50 text-neutral-600 rounded-md text-sm font-medium transition-custom">
近30天
</button>
<button class="px-3 py-1.5 bg-white border border-neutral-200 hover:border-primary/50 text-neutral-600 rounded-md text-sm font-medium transition-custom">
近90天
</button>
</div>
<div class="relative">
<input type="text" placeholder="选择日期范围" class="appearance-none bg-white border border-neutral-200 rounded-lg py-2 pl-4 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-custom w-full md:w-48">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-400">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 数据概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-xl p-5 card-shadow transition-custom hover:shadow-md">
<div class="flex items-center justify-between mb-3">
<h3 class="text-neutral-500 font-medium text-sm">总收入</h3>
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
<i class="fa fa-arrow-down text-primary"></i>
</div>
</div>
<div class="flex items-end">
<p class="text-2xl font-semibold">¥28,642.50</p>
<p class="ml-2 text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>12.5%
</p>
</div>
<p class="text-neutral-400 text-xs mt-1">较上月增长 ¥3,125.75</p>
</div>
<div class="bg-white rounded-xl p-5 card-shadow transition-custom hover:shadow-md">
<div class="flex items-center justify-between mb-3">
<h3 class="text-neutral-500 font-medium text-sm">总支出</h3>
<div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center">
<i class="fa fa-arrow-up text-danger"></i>
</div>
</div>
<div class="flex items-end">
<p class="text-2xl font-semibold">¥19,285.30</p>
<p class="ml-2 text-danger text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>8.2%
</p>
</div>
<p class="text-neutral-400 text-xs mt-1">较上月增长 ¥1,476.23</p>
</div>
<div class="bg-white rounded-xl p-5 card-shadow transition-custom hover:shadow-md">
<div class="flex items-center justify-between mb-3">
<h3 class="text-neutral-500 font-medium text-sm">净收入</h3>
<div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
<i class="fa fa-balance-scale text-secondary"></i>
</div>
</div>
<div class="flex items-end">
<p class="text-2xl font-semibold">¥9,357.20</p>
<p class="ml-2 text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>18.3%
</p>
</div>
<p class="text-neutral-400 text-xs mt-1">较上月增长 ¥1,649.52</p>
</div>
<div class="bg-white rounded-xl p-5 card-shadow transition-custom hover:shadow-md">
<div class="flex items-center justify-between mb-3">
<h3 class="text-neutral-500 font-medium text-sm">结余率</h3>
<div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">
<i class="fa fa-percent text-warning"></i>
</div>
</div>
<div class="flex items-end">
<p class="text-2xl font-semibold">32.7%</p>
<p class="ml-2 text-success text-sm flex items-center">
<i class="fa fa-arrow-up mr-1"></i>3.2%
</p>
</div>
<p class="text-neutral-400 text-xs mt-1">较上月增长 3.2 个百分点</p>
</div>
</div>
<!-- 图表区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 收支趋势图表 -->
<div class="bg-white rounded-xl p-5 card-shadow lg:col-span-2">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">收支趋势</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-md">日</button>
<button class="px-3 py-1 text-xs bg-white border border-neutral-200 text-neutral-500 rounded-md">周</button>
<button class="px-3 py-1 text-xs bg-white border border-neutral-200 text-neutral-500 rounded-md">月</button>
</div>
</div>
<div class="h-80">
<canvas id="incomeExpenseChart"></canvas>
</div>
</div>
<!-- 支出分类统计图表 -->
<div class="bg-white rounded-xl p-5 card-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">支出分类统计</h3>
<div class="relative">
<select id="expenseCategoryFilter" class="appearance-none bg-white border border-neutral-200 rounded-lg py-1 pl-3 pr-8 text-xs focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-custom">
<option>全部类别</option>
<option>餐饮美食</option>
<option>购物消费</option>
<option>交通出行</option>
<option>住房缴费</option>
<option>休闲娱乐</option>
<option>医疗健康</option>
<option>其他支出</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-400">
<i class="fa fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div class="h-64 mb-4">
<canvas id="expenseCategoryChart"></canvas>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
<span class="text-sm text-neutral-600">餐饮美食</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium">¥4,285.75</span>
<span class="text-xs text-neutral-400 ml-2">22.2%</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
<span class="text-sm text-neutral-600">购物消费</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium">¥3,842.30</span>
<span class="text-xs text-neutral-400 ml-2">19.9%</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-success mr-2"></div>
<span class="text-sm text-neutral-600">交通出行</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium">¥2,756.80</span>
<span class="text-xs text-neutral-400 ml-2">14.3%</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-warning mr-2"></div>
<span class="text-sm text-neutral-600">住房缴费</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium">¥5,680.20</span>
<span class="text-xs text-neutral-400 ml-2">29.4%</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-danger mr-2"></div>
<span class="text-sm text-neutral-600">其他支出</span>
</div>
<div class="flex items-center">
<span class="text-sm font-medium">¥2,720.25</span>
<span class="text-xs text-neutral-400 ml-2">14.1%</span>
</div>
</div>
</div>
</div>
</div>
<!-- 交易记录表格 -->
<div class="bg-white rounded-xl p-5 card-shadow mt-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">最近交易记录</h3>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="搜索交易..." class="appearance-none bg-white border border-neutral-200 rounded-lg py-2 pl-9 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-custom w-full md:w-64">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
<i class="fa fa-search"></i>
</div>
</div>
<button class="text-neutral-500 hover:text-primary transition-custom">
<i class="fa fa-filter"></i>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-neutral-200">
<th class="text-left py-3 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">日期</th>
<th class="text-left py-3 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">描述</th>
<th class="text-left py-3 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">类别</th>
<th class="text-left py-3 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">账户</th>
<th class="text-right py-3 px-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">金额</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-custom">
<td class="py-3 px-4 text-sm text-neutral-600">2025-07-25</td>
<td class="py-3 px-4 text-sm text-neutral-600">星巴克咖啡</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 bg-warning/10 text-warning rounded-full text-xs">餐饮美食</span>
</td>
<td class="py-3 px-4 text-sm text-neutral-600">支付宝</td>
<td class="py-3 px-4 text-sm font-medium text-danger">-¥38.50</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-custom">
<td class="py-3 px-4 text-sm text-neutral-600">2025-07-25</td>
<td class="py-3 px-4 text-sm text-neutral-600">京东购物</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 bg-secondary/10 text-secondary rounded-full text-xs">购物消费</span>
</td>
<td class="py-3 px-4 text-sm text-neutral-600">招商银行(6288)</td>
<td class="py-3 px-4 text-sm font-medium text-danger">-¥285.90</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-custom">
<td class="py-3 px-4 text-sm text-neutral-600">2025-07-24</td>
<td class="py-3 px-4 text-sm text-neutral-600">工资入账</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 bg-success/10 text-success rounded-full text-xs">工资收入</span>
</td>
<td class="py-3 px-4 text-sm text-neutral-600">工商银行(8866)</td>
<td class="py-3 px-4 text-sm font-medium text-success">+¥12,500.00</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-custom">
<td class="py-3 px-4 text-sm text-neutral-600">2025-07-24</td>
<td class="py-3 px-4 text-sm text-neutral-600">地铁通勤</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">交通出行</span>
</td>
<td class="py-3 px-4 text-sm text-neutral-600">微信支付</td>
<td class="py-3 px-4 text-sm font-medium text-danger">-¥8.00</td>
</tr>
<tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-custom">
<td class="py-3 px-4 text-sm text-neutral-600">2025-07-23</td>
<td class="py-3 px-4 text-sm text-neutral-600">超市购物</td>
<td class="py-3 px-4 text-sm">
<span class="px-2 py-1 bg-secondary/10 text-secondary rounded-full text-xs">购物消费</span>
</td>
<td class="py-3 px-4 text-sm text-neutral-600">支付宝</td>
<td class="py-3 px-4 text-sm font-medium text-danger">-¥156.20</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between mt-4">
<p class="text-sm text-neutral-500">显示 1 至 5 条，共 24 条记录</p>
<div class="flex space-x-1">
<button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-custom">
<i class="fa fa-angle-left"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-custom">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-custom">3</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-custom">
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-4">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div class="text-center md:text-left mb-4 md:mb-0">
<p class="text-sm text-neutral-500">© 2025 财务报表分析系统. 保留所有权利.</p>
</div>
<div class="flex justify-center md:justify-end space-x-6">
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">
<i class="fa fa-question-circle"></i> 帮助中心
</a>
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">
<i class="fa fa-file-text-o"></i> 隐私政策
</a>
<a href="#" class="text-neutral-500 hover:text-primary transition-custom">
<i class="fa fa-cog"></i> 设置
</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
// 收支趋势图表
const incomeExpenseCtx = document.getElementById('incomeExpenseChart').getContext('2d');
const incomeExpenseChart = new Chart(incomeExpenseCtx, {
type: 'line',
data: {
labels: ['7/19', '7/20', '7/21', '7/22', '7/23', '7/24', '7/25'],
datasets: [
{
label: '收入',
data: [1250, 0, 0, 12500, 0, 0, 0],
borderColor: '#52C41A',
backgroundColor: 'rgba(82, 196, 26, 0.1)',
tension: 0.3,
fill: true
},
{
label: '支出',
data: [350, 210, 180, 260, 156, 8, 38],
borderColor: '#FF4D4F',
backgroundColor: 'rgba(255, 77, 79, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
boxWidth: 12,
usePointStyle: true,
pointStyle: 'circle'
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(255, 255, 255, 0.95)',
titleColor: '#1D2129',
bodyColor: '#4E5969',
borderColor: 'rgba(22, 93, 255, 0.1)',
borderWidth: 1,
padding: 10,
boxPadding: 5,
usePointStyle: true,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(context.parsed.y);
}
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
callback: function(value) {
return '¥' + value;
}
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
animation: {
duration: 1000,
easing: 'easeOutQuart'
}
}
});
// 支出分类统计图表
const expenseCategoryCtx = document.getElementById('expenseCategoryChart').getContext('2d');
const expenseCategoryChart = new Chart(expenseCategoryCtx, {
type: 'doughnut',
data: {
labels: ['餐饮美食', '购物消费', '交通出行', '住房缴费', '其他支出'],
datasets: [{
data: [4285.75, 3842.30, 2756.80, 5680.20, 2720.25],
backgroundColor: [
'#165DFF',
'#36CFC9',
'#52C41A',
'#FAAD14',
'#FF4D4F'
],
borderWidth: 0,
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.95)',
titleColor: '#1D2129',
bodyColor: '#4E5969',
borderColor: 'rgba(22, 93, 255, 0.1)',
borderWidth: 1,
padding: 10,
boxPadding: 5,
usePointStyle: true,
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
const percentage = Math.round((value / total) * 100);
return [
label,
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(value),
`占比: ${percentage}%`
];
}
}
}
},
animation: {
animateRotate: true,
animateScale: true,
duration: 1000,
easing: 'easeOutQuart'
}
}
});
// 使用AJAX加载图表数据
function loadChartData(timeRange) {
// 显示加载状态
document.getElementById('incomeExpenseChart').classList.add('opacity-50');
document.getElementById('expenseCategoryChart').classList.add('opacity-50');
// 模拟AJAX请求
setTimeout(() => {
// 更新收支趋势图表数据
if (timeRange === 'day') {
incomeExpenseChart.data.labels = ['7/19', '7/20', '7/21', '7/22', '7/23', '7/24', '7/25'];
incomeExpenseChart.data.datasets[0].data = [1250, 0, 0, 12500, 0, 0, 0];
incomeExpenseChart.data.datasets[1].data = [350, 210, 180, 260, 156, 8, 38];
} else if (timeRange === 'week') {
incomeExpenseChart.data.labels = ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周'];
incomeExpenseChart.data.datasets[0].data = [5200, 6800, 4500, 12500, 3800, 5600, 0];
incomeExpenseChart.data.datasets[1].data = [3200, 2800, 3400, 2600, 2900, 1800, 400];
} else if (timeRange === 'month') {
incomeExpenseChart.data.labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
incomeExpenseChart.data.datasets[0].data = [28500, 25600, 32400, 29800, 31200, 28600, 13750];
incomeExpenseChart.data.datasets[1].data = [18500, 16800, 19200, 17500, 20100, 18900, 9600];
}
incomeExpenseChart.update();
// 更新支出分类图表数据
expenseCategoryChart.data.datasets[0].data = [4285.75, 3842.30, 2756.80, 5680.20, 2720.25];
expenseCategoryChart.update();
// 隐藏加载状态
document.getElementById('incomeExpenseChart').classList.remove('opacity-50');
document.getElementById('expenseCategoryChart').classList.remove('opacity-50');
}, 800);
}
// 绑定时间筛选按钮事件
const timeButtons = document.querySelectorAll('#incomeExpenseChart').parentElement.parentElement.querySelectorAll('button');
timeButtons.forEach(button => {
button.addEventListener('click', function() {
// 移除所有按钮的激活状态
timeButtons.forEach(btn => {
btn.classList.remove('bg-primary/10', 'text-primary');
btn.classList.add('bg-white', 'border', 'border-neutral-200', 'text-neutral-500');
});
// 设置当前按钮为激活状态
this.classList.remove('bg-white', 'border', 'border-neutral-200', 'text-neutral-500');
this.classList.add('bg-primary/10', 'text-primary');
// 加载对应时间范围的数据
const timeRange = this.textContent.trim().toLowerCase();
loadChartData(timeRange);
});
});
// 绑定支出分类筛选事件
const categoryFilter = document.getElementById('expenseCategoryFilter');
categoryFilter.addEventListener('change', function() {
// 显示加载状态
document.getElementById('expenseCategoryChart').classList.add('opacity-50');
// 模拟AJAX请求
setTimeout(() => {
// 根据选择的类别更新图表数据
const selectedCategory = this.value;
// 这里应该根据实际选择的类别过滤数据
// 这里只是模拟数据更新
if (selectedCategory === '餐饮美食') {
expenseCategoryChart.data.datasets[0].data = [4285.75, 0, 0, 0, 0];
} else if (selectedCategory === '购物消费') {
expenseCategoryChart.data.datasets[0].data = [0, 3842.30, 0, 0, 0];
} else if (selectedCategory === '交通出行') {
expenseCategoryChart.data.datasets[0].data = [0, 0, 2756.80, 0, 0];
} else if (selectedCategory === '住房缴费') {
expenseCategoryChart.data.datasets[0].data = [0, 0, 0, 5680.20, 0];
} else if (selectedCategory === '休闲娱乐') {
expenseCategoryChart.data.datasets[0].data = [0, 0, 0, 0, 1850.50];
} else if (selectedCategory === '医疗健康') {
expenseCategoryChart.data.datasets[0].data = [0, 0, 0, 0, 869.75];
} else {
// 全部类别
expenseCategoryChart.data.datasets[0].data = [4285.75, 3842.30, 2756.80, 5680.20, 2720.25];
}
expenseCategoryChart.update();
// 隐藏加载状态
document.getElementById('expenseCategoryChart').classList.remove('opacity-50');
}, 600);
});
});
</script>
</body>
</html>