logo
0
0
WeChat Login
official v0.1

1. 统一账单分析报告工具

项目简介

这是一个基于HTML、CSS和JavaScript的账单分析工具,用于加载、分析和可视化账单数据。它支持从CSV文件中加载数据,并通过图表和表格展示收支情况、分类统计等信息。

功能特点

  • 数据加载与解析:从CSV文件加载账单数据,支持微信、银行等多种来源。
  • 数据筛选与筛选:按日期范围、分类、是否显示重复记录等条件筛选数据。
  • 数据可视化
    • 支出分类饼图:展示不同分类的支出占比。
    • 每日收支趋势图:展示每日的收入、支出和净值变化趋势。
    • 月度收支对比图:展示月度的收入、支出和净值对比。
  • 交易明细展示:支持按来源(微信、银行、汇总)和重复记录展示交易明细。
  • 搜索功能:在汇总数据中搜索特定交易记录。
  • 调试信息:提供调试信息面板,方便开发和问题排查。

使用方法

环境准备
  • 确保你的浏览器支持HTML5、CSS3和JavaScript。
  • 如果需要从CSV文件加载数据,确保CSV文件格式正确,包含以下列:
    • time(时间)
    • counterparty(交易对方)
    • product(商品/备注)
    • net_amount(金额)
    • category(分类)
    • source(来源,如wechatbank
运行项目
  1. 将项目文件部署到一个支持静态文件服务的服务器(如Nginx、Apache)。
  2. 访问项目的根目录URL,例如http://your-server.com/
  3. 如果需要加载CSV数据,确保CSV文件位于/data路径下,并且服务器支持/data路径的GET请求。
操作步骤
  1. 加载数据

    • 如果项目中包含静态数据(window.statsData),将直接使用静态数据。
    • 如果没有静态数据,将尝试从/data路径加载CSV文件。
  2. 筛选数据

    • 使用顶部的筛选控件(日期范围、分类、是否显示重复记录)来筛选数据。
    • 点击“应用筛选”按钮应用筛选条件。
  3. 查看图表和明细

    • 查看顶部的汇总卡片,了解总收入、总支出、净结余和交易笔数。
    • 查看不同图表(支出分类饼图、每日收支趋势图、月度收支对比图)。
    • 切换底部的标签页,查看微信、银行、汇总和重复记录的交易明细。
  4. 搜索记录

    • 在汇总数据标签页中,输入搜索关键词,按回车键或点击“应用筛选”按钮进行搜索。
  5. 调试信息

    • 点击右下角的“🐛”按钮,切换调试信息面板,查看调试信息。

数据格式要求

CSV文件应包含以下列(列名区分大小写):

列名描述示例值
time交易时间2023-10-10 12:34:56
counterparty交易对方张三
product商品/备注购买商品
net_amount金额(正数为收入,负数为支出)100.00-50.00
category分类餐饮
source数据来源(如wechatbankwechatbank
is_duplicate是否重复记录(可选)truefalse

注意事项

  • 确保CSV文件的编码为UTF-8,以避免字符编码问题。
  • 如果数据量较大,加载和筛选操作可能会有一定延迟。
  • 如果需要自定义分类颜色,可以在statsData.categories中指定每个分类的颜色。

问题反馈

如果在使用过程中遇到问题,请检查以下内容:

  • 确保CSV文件格式正确,包含所有必要列。
  • 检查浏览器控制台是否有错误信息。
  • 如果问题无法解决,请提供详细的错误信息和操作步骤,以便进一步排查。

希望这个 README.md 能够帮助你更好地理解和使用这个项目!如果有任何问题或需要进一步的说明,请随时告诉我。