一个基于 React + TypeScript + Vite + Tailwind CSS 的纯前端统计分析套件,支持 A/B 测试、显著性检验、回归/相关、分布计算、Bootstrap 模拟等常见任务,所有计算均在浏览器端完成,适合在无需后端支持的场景下快速洞察数据。
- 一站式统计工具:A/B 转化检验、样本量规划、t/z/ANOVA、卡方列联、自助法、分布计算器、相关性热力图、回归分析等模块开箱即用。
- 纯前端运行:采用
simple-statistics、jstat、mathjs等库实现核心算法,不依赖任何后端服务,数据仅停留在浏览器内存。 - 演示数据:内置多组 CSV 示例(位于
public/demo/),可通过界面上的“快速演示数据”按钮一键加载体验。 - 智能推荐:上传数据后自动识别列类型和分组,给出适合的分析模块建议。
- 懒加载优化:路由和分析模块均按需加载,首次进入页面仅请求基础框架资源,提升首屏速度。
- 体验细节:内置全屏品牌 Loading、骨架屏过渡、暗色模式、Sticky 表单面板、ECharts 动态可视化、结果导出等。
所有示例位于 public/demo/:
abtest_sample.csv:自带两组转化数据,可用于 A/B 检验。ttest_sample.csv:两组连续变量示例,适配 Welch t 检验。regression_sample.csv:营销投入与营收数据,用于回归分析和相关性热力图。correlation_sample.csv:多列连续指标,直接展示 Pearson 热力图。bootstrap_sample.csv:单列样本数据,可用于分布计算或 Bootstrap 效应量估计。tools_sample.csv:包含组别、分数、投入、转化率等字段的综合示例,便于 t 检验或 AB 评估。
| 路径 | 功能简介 |
|---|---|
/ |
首页;提供模块概览、产品价值说明。 |
/abtest |
A/B 转化检验与功效分析。 |
/ttest |
t/z 检验、卡方、单因子 ANOVA 等显著性检验。 |
/samplesize |
样本量计算 + AB 试验结果评估(访问量、转化量输入即可)。 |
/regression |
线性/多项式回归、残差分析、相关性矩阵。 |
/distribution |
正态、t、卡方、泊松、二项分布的 PDF/CDF/分位数计算。 |
/describe |
描述统计、缺失分析、分类 Top5、预览表格。 |
/tools |
其它实用工具(Bootstrap、分布计算等)。 |
/about |
项目原则、隐私声明、路线图与反馈方式。 |
# 安装依赖
npm install
# 开发模式
npm run dev
# 打开 http://localhost:5173
# 生产构建
npm run build
# 预览生产构建
npm run previewNode.js 要求:建议使用 Node 18+,Vite 默认端口为 5173。
- 构建工具:Vite(ESBuild)
- 前端框架:React 18 + React Router (懒加载)
- 语言:TypeScript
- 样式:Tailwind CSS、Framer Motion 动画、手写 Skeleton/Loading Overlay
- 状态管理:Zustand(持久化主题、数据集、模块状态)
- 数据处理:papaparse、xlsx、simple-statistics、jstat、mathjs、(按需)danfojs
- 可视化:ECharts(统一封装 heatmap、bar、line 等图表)
- 结构化模块:独立
modules/下实现各分析逻辑,通过动态import按需加载
├── index.html # 注入全局 Loading overlay
├── public/ # 静态资源、演示数据
│ └── demo/
│ ├── abtest_sample.csv
│ ├── correlation_sample.csv
│ └── ...
├── src/
│ ├── components/
│ │ ├── analysis/ # 上传、表单、结果卡片、数据表等
│ │ ├── charts/ # ECharts 封装
│ │ └── layout/ # 导航、Footer、Skeleton
│ ├── core/
│ │ ├── moduleRegistry.ts # 模块 manifest & 动态加载器
│ │ └── autoDetect.ts # 自动推荐引擎
│ ├── modules/ # 统计计算逻辑(按需加载)
│ ├── pages/ # 各路由页面
│ ├── store/ # Zustand 状态管理
│ ├── utils/ # 数据解析、类型推断、下载工具
│ ├── App.tsx # 路由懒加载、Suspense 入口
│ ├── index.css # Tailwind 基础样式
│ └── main.tsx # 应用入口、主题初始化、移除 Loading
├── tailwind.config.js # Tailwind 配置
├── tsconfig.app.json # TS 编译配置
├── vite.config.ts # 构建优化(chunk 拆分、懒加载)
└── package.json
- 主题设置:默认暗色,用户切换后写入
localStorage,下次加载自动应用。 - 全局 Loading:
index.html中的#initial-loader在 React 渲染完成时移除;路由切换时使用骨架屏作为Suspense fallback。 - 模块懒加载:
AnalysisWorkspace根据模块 id 动态import对应文件,首次加载显示提示,完成后缓存。 - 演示按钮:点击后 fetch CSV,解析后写入 Zustand 并自动运行对应分析。
- 结果导出:支持导出首张结果表到 CSV;图表可通过 ECharts 原生功能导出 PNG。
- 本地通过
npm run build验证生产构建(npm run preview可查看打包结果)。 - 代码风格由 ESLint 管控,按需运行
npm run lint。
欢迎提交 Issue 或 PR,可参考以下方向:
- 增加更多统计模块(非参数检验、时间序列等)。
- 对现有模块补充更详细的解释和可配置选项。
- 扩展演示数据、添加多语言支持、增强 UI 主题定制。
- 优化性能(Web Worker 支持、进一步拆分 vendor 包等)。
在提交 PR 前请确保:
- 通过
npm run build。 - 新增功能附带基础说明或演示数据。
- 保持中文注释与说明,代码遵循现有风格。
- 邮箱:
ctrlf4@yeah.net - Issue:欢迎在 GitHub 仓库提交问题或建议。
如果这个项目对你有帮助,欢迎 Star ⭐️ 支持!
九章算术,致力于让数据科学分析更简单、更普惠。
本项目采用 MIT License 开源许可。
你可以自由地使用、修改和分发本项目代码,用于商业或非商业目的。
只需在分发时保留原始的版权声明与许可文本。
This project is licensed under the MIT License.
You are free to use, modify, and distribute this software for personal or commercial purposes,
provided that the original copyright notice and license text are included.