这是一个基于HTML、CSS和JavaScript的账单分析工具,用于加载、分析和可视化账单数据。它支持从CSV文件中加载数据,并通过图表和表格展示收支情况、分类统计等信息。
- 数据加载与解析:从CSV文件加载账单数据,支持微信、银行等多种来源。
- 数据筛选与筛选:按日期范围、分类、是否显示重复记录等条件筛选数据。
- 数据可视化:
- 支出分类饼图:展示不同分类的支出占比。
- 每日收支趋势图:展示每日的收入、支出和净值变化趋势。
- 月度收支对比图:展示月度的收入、支出和净值对比。
- 交易明细展示:支持按来源(微信、银行、汇总)和重复记录展示交易明细。
- 搜索功能:在汇总数据中搜索特定交易记录。
- 调试信息:提供调试信息面板,方便开发和问题排查。
- 确保你的浏览器支持HTML5、CSS3和JavaScript。
- 如果需要从CSV文件加载数据,确保CSV文件格式正确,包含以下列:
time(时间)
counterparty(交易对方)
product(商品/备注)
net_amount(金额)
category(分类)
source(来源,如wechat或bank)
- 将项目文件部署到一个支持静态文件服务的服务器(如Nginx、Apache)。
- 访问项目的根目录URL,例如
http://your-server.com/。
- 如果需要加载CSV数据,确保CSV文件位于
/data路径下,并且服务器支持/data路径的GET请求。
-
加载数据:
- 如果项目中包含静态数据(
window.statsData),将直接使用静态数据。
- 如果没有静态数据,将尝试从
/data路径加载CSV文件。
-
筛选数据:
- 使用顶部的筛选控件(日期范围、分类、是否显示重复记录)来筛选数据。
- 点击“应用筛选”按钮应用筛选条件。
-
查看图表和明细:
- 查看顶部的汇总卡片,了解总收入、总支出、净结余和交易笔数。
- 查看不同图表(支出分类饼图、每日收支趋势图、月度收支对比图)。
- 切换底部的标签页,查看微信、银行、汇总和重复记录的交易明细。
-
搜索记录:
- 在汇总数据标签页中,输入搜索关键词,按回车键或点击“应用筛选”按钮进行搜索。
-
调试信息:
- 点击右下角的“🐛”按钮,切换调试信息面板,查看调试信息。
CSV文件应包含以下列(列名区分大小写):
| 列名 | 描述 | 示例值 |
|---|
time | 交易时间 | 2023-10-10 12:34:56 |
counterparty | 交易对方 | 张三 |
product | 商品/备注 | 购买商品 |
net_amount | 金额(正数为收入,负数为支出) | 100.00 或 -50.00 |
category | 分类 | 餐饮 |
source | 数据来源(如wechat、bank) | wechat 或 bank |
is_duplicate | 是否重复记录(可选) | true 或 false |
- 确保CSV文件的编码为UTF-8,以避免字符编码问题。
- 如果数据量较大,加载和筛选操作可能会有一定延迟。
- 如果需要自定义分类颜色,可以在
statsData.categories中指定每个分类的颜色。
如果在使用过程中遇到问题,请检查以下内容:
- 确保CSV文件格式正确,包含所有必要列。
- 检查浏览器控制台是否有错误信息。
- 如果问题无法解决,请提供详细的错误信息和操作步骤,以便进一步排查。
希望这个 README.md 能够帮助你更好地理解和使用这个项目!如果有任何问题或需要进一步的说明,请随时告诉我。