在数据驱动业务的今天,数据分析师和业务人员往往受限于 Excel 的功能瓶颈或 Python 的编程门槛。作为一个前端开发者,我一直在思考:能否利用现代浏览器的强大算力,构建一个零门槛、纯前端的深度数据分析平台?
今天分享的开源项目 data-analysis 正是这样一个尝试。它不仅仅是一个 Excel 查看器,更是一个集成了 PCA(主成分分析)、统计检验、质量报告的现代化单页应用。

01
系统简介
这是一个基于 Vue 3 + Vite 构建的现代化数据分析工具。它允许用户通过简单的拖拽上传 Excel 文件,即可在浏览器端完成从数据清洗、统计分析到专业报告导出的全流程。
对于开发者而言,这个项目最大的价值在于它展示了如何在前端生态中集成复杂的统计算法(如 ml-pca),以及如何利用 Web Worker 和虚拟滚动解决大数据量下的性能瓶颈。
02
核心功能
1、统计分析模式:
基础指标:平均值、中位数、标准差、四分位数、偏度、峰度等。
可视化:正态分布曲线、箱线图、分布直方图。
高级分析:集成 PCA 主成分分析,支持碎石图、得分散点图(含 95% 置信椭圆)、载荷热力图及双标图。
2、数据质量报告:
质量检测:自动识别缺失值、重复行。
异常检测:支持多种算法检测异常值,并提供交互式弹窗查看详情。
相关性分析:计算皮尔逊相关系数矩阵。
3、数据导出:支持将图表导出为高清 PNG,或将完整分析报告导出为 Excel。
单图表导出:将任意图表导出为高清 PNG 图片
组合导出:图表 + 数据表组合导出为一张图片
完整报告:一键生成包含所有分析结果的完整报告
4、数据处理

5、可视化图表

6、数据质量分析
异常值检测:支持 Z-score 和 IQR 两种检测方法
缺失值分析:统计缺失情况并提供处理建议
重复行检测:快速识别完全重复的数据记录
相关性分析:计算数值列间的皮尔逊相关系数
质量评分:综合评估数据完整性、一致性和准确性
02
系统特点与技术优势
该项目在技术选型和架构设计上充分考虑了性能与体验,具有以下显著特点:
纯前端算力释放:利用 ml-matrix 和 ml-pca 库,直接在浏览器端完成矩阵运算和降维分析,无需后端服务器支持,保障数据隐私。
高性能渲染架构:
Web Worker:将数据聚合、质量分析等计算密集型任务移至后台线程,避免主线程阻塞。
虚拟滚动:集成 useVirtualScroll,支持万级数据行的流畅展示。
ShallowRef 优化:针对大型数据集使用 shallowRef 替代 ref,大幅减少 Vue 的响应式开销。
专业级统计算法:内置与 Excel 兼容的统计算法,支持 Z-score 和 IQR 异常值检测,甚至实现了加权马氏距离算法来识别离群点。
Composables 架构模式:业务逻辑与 UI 彻底分离,代码结构清晰,易于扩展和维护。
03
系统架构
项目采用了典型的 Vue 3 组合式 API 架构,核心设计模式如下:
逻辑层 (Composables):位于 src/components/composables/,包含 useAppState(全局状态)、useDataProcessor(数据处理)、usePca(PCA 核心逻辑)等。这些 Hook 函数封装了所有业务逻辑,可独立测试。
视图层 (Sub Components):位于 src/components/sub/,负责纯 UI 展示,通过 Props 和 Events 与逻辑层通信。
协调层 (HelloWorld.vue):作为主容器,负责组合各个模块,调度数据流。
04
功能截图
1、数据预览

2、设置面板

3、正态分布曲线

4、箱线图

5、统计数据表

6、数据质量评分报告

7、数据类型分布

8、缺失值分析

9、异常值检测


10、重复数据检测


11、数据分布特征分析

12、相关性分析

05
使用指南
1️⃣ 上传文件│├─ 点击上传区域或拖拽文件└─ 支持 .xls 和 .xlsx 格式2️⃣ 选择数据源│├─ 切换不同文件(多文件模式)└─ 选择工作表(多 Sheet 支持)3️⃣ 配置分析参数│├─ 选择分组列(支持双列分组)├─ 选择聚合列(支持多选)└─ 启用/禁用零值过滤4️⃣ 查看分析结果│├─ 统计分析模式:正态分布 + 箱线图└─ 数据质量模式:质量报告 + 异常检测5️⃣ 导出结果│└─ 选择导出方式,生成报告
如果你对本项目的架构或统计算法感兴趣,可以快速在本地启动:
环境要求:
Node.js >= 18.0.0
npm >= 9.0.0
启动步骤:
# 1. 克隆项目git clone https://gitee.com/qxi_Miku/data-analysis.gitcd data-analysis# 2. 安装依赖npm install# 3. 启动开发服务器npm run dev# 4. 访问应用# 浏览器打开 http://localhost:3000
项目地址:
Gitee: https://gitee.com/qxi_Miku/data-analysis
更多历史热门技术
以 Magic-API + AMIS 构建快速低代码开发平台:赋能开发者高效交付
告别繁琐ETL:用Data Formulator让AI为你“烹调”数据可视化大餐
ECharts再见!Vue3开发者的新宠:Vue Data UI 真香体验
别再让失败的任务拖垮系统!SnailJob:一个被低估的分布式任务重试利器
零代码写 API?Surpass 让 SQL 直接变成 RESTful 接口!
END
更多数据科学与技术,请关注:全栈数据