# data-analysis

**Repository Path**: zzdx713320/data-analysis

## Basic Information

- **Project Name**: data-analysis
- **Description**: 这是一个基于 Vue 3 + Vite 构建的现代化单页应用程序，专注于 Excel 数据的深度分析和统计可视化。无需专业的数据分析背景，通过简单的拖拽和点击，即可完成从数据导入到专业报告导出的全流程。
核心亮点
🚀 零门槛操作 - 上传 Excel 即可自动分析，无需编程基础
📈 专业统计 - 内置多种统计算法，结果与 Excel 完全兼容
🎨 交互式图表 - 基于 ECharts 的动态
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-04-23
- **Last Updated**: 2026-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

  # 📊 Excel 数据分析平台

  **一款功能强大的 Excel 数据分析和统计可视化工具**

  [![Vue](https://img.shields.io/badge/Vue-3.5.13-42b883?logo=vue.js&logoColor=white)](https://vuejs.org/)
  [![Vite](https://img.shields.io/badge/Vite-6.3.5-646cff?logo=vite&logoColor=white)](https://vitejs.dev/)
  [![Ant Design Vue](https://img.shields.io/badge/AntDesign-4.2.6-0170FE?logo=antdesign&logoColor=white)](https://antdv.com/)
  [![ECharts](https://img.shields.io/badge/ECharts-5.6.0-c23531?logo=apache&logoColor=white)](https://echarts.apache.org/)
  [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

  [在线演示](#) · [快速开始](#-快速开始) · [功能介绍](#-核心功能) · [使用指南](#-使用指南)

</div>

---

## ✨ 项目简介

这是一个基于 **Vue 3 + Vite** 构建的现代化单页应用程序，专注于 Excel 数据的深度分析和统计可视化。无需专业的数据分析背景，通过简单的拖拽和点击，即可完成从数据导入到专业报告导出的全流程。

### 核心亮点

- **🚀 零门槛操作** - 上传 Excel 即可自动分析，无需编程基础
- **📈 专业统计** - 内置多种统计算法，结果与 Excel 完全兼容
- **🎨 交互式图表** - 基于 ECharts 的动态可视化，支持导出高清图片
- **🔍 数据质量检测** - 自动识别异常值、缺失值和重复数据
- **💾 多格式导出** - 支持导出 PNG 图片和 Excel 报告
- **📱 响应式设计** - 适配多种屏幕尺寸，流畅体验

---

## 🎯 核心功能

### 📁 数据处理

| 功能 | 说明 |
|------|------|
| **多文件管理** | 支持同时上传多个 Excel 文件，快速切换查看 |
| **多 Sheet 支持** | 自动识别所有工作表，一键切换数据源 |
| **双列分组** | 支持按单列或双列进行数据分组聚合 |
| **零值过滤** | 可选在统计计算中排除零值 |
| **实时计算** | 配置变更即时更新结果，无需手动刷新 |

### 📊 统计分析

提供与 Excel 兼容的专业统计指标：

- **集中趋势**：平均值、中位数
- **离散程度**：标准差、四分位数（Q1、Q2、Q3）
- **极值统计**：最大值、最小值
- **分布形态**：偏度、峰度、变异系数

### 📉 可视化图表

| 图表类型 | 功能描述 |
|----------|----------|
| **正态分布曲线** | 展示数据分布规律，标注均值和标准差 |
| **箱线图** | 五数概括可视化，清晰显示数据范围和异常值 |
| **分布直方图** | 直方图叠加正态拟合曲线，直观判断分布形态 |
| **数据类型饼图** | 展示数值型与文本型列的占比分布 |

### 🔍 数据质量分析

- **异常值检测**：支持 Z-score 和 IQR 两种检测方法
- **缺失值分析**：统计缺失情况并提供处理建议
- **重复行检测**：快速识别完全重复的数据记录
- **相关性分析**：计算数值列间的皮尔逊相关系数
- **质量评分**：综合评估数据完整性、一致性和准确性

### 📤 导出功能

- **单图表导出**：将任意图表导出为高清 PNG 图片
- **组合导出**：图表 + 数据表组合导出为一张图片
- **完整报告**：一键生成包含所有分析结果的完整报告

---

## 🛠️ 技术栈

```
前端框架
├── Vue 3.5.13        # 渐进式 JavaScript 框架
├── Vite 6.3.5        # 下一代前端构建工具
└── <script setup>    # Vue 3 组合式 API

UI 组件
├── Ant Design Vue 4.2.6   # 企业级 UI 组件库
└── @ant-design/icons-vue  # 图标库

数据可视化
└── ECharts 5.6.0    # 强大的图表库

数据处理
├── XLSX 0.18.5      # Excel 文件读取
└── ExcelJS 4.4.0    # Excel 文件写入

工具库
├── html2canvas 1.4.1   # DOM 转 Canvas
└── file-saver 2.0.5    # 文件保存
```

---

## 🚀 快速开始

### 环境要求

- **Node.js** >= 18.0.0
- **npm** >= 9.0.0

### 安装步骤

```bash
# 1. 克隆项目
git clone https://github.com/your-username/data-analysis.git
cd data-analysis

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 打开浏览器访问
# 默认地址: http://localhost:3000
```

### 构建生产版本

```bash
# 构建项目
npm run build

# 预览生产构建
npm run preview
```

构建产物将输出到 `data-analysis-{version}/` 目录。

---

## 📖 使用指南

### 基础工作流

```
1️⃣ 上传文件
   │
   ├─ 点击上传区域或拖拽文件
   └─ 支持 .xls 和 .xlsx 格式

2️⃣ 选择数据源
   │
   ├─ 切换不同文件（多文件模式）
   └─ 选择工作表（多 Sheet 支持）

3️⃣ 配置分析参数
   │
   ├─ 选择分组列（支持双列分组）
   ├─ 选择聚合列（支持多选）
   └─ 启用/禁用零值过滤

4️⃣ 查看分析结果
   │
   ├─ 统计分析模式：正态分布 + 箱线图
   └─ 数据质量模式：质量报告 + 异常检测

5️⃣ 导出结果
   │
   └─ 选择导出方式，生成报告
```

### 统计分析模式

1. **设置分组列** - 选择按哪些列进行数据分组
2. **设置聚合列** - 选择要统计分析的数值列
3. **查看图表** - 系统自动生成正态分布曲线和箱线图
4. **数据表** - 详细展示各分组的统计指标

### 数据质量模式

1. **切换模式** - 点击顶部"数据质量报告"按钮
2. **概览指标** - 查看数据规模、类型分布
3. **异常检测** - 使用 Z-score 或 IQR 方法识别异常值
4. **分布分析** - 查看偏度、峰度等分布形态指标

---

## 📁 项目结构

```
data-analysis/
├── src/
│   ├── assets/                # 静态资源
│   │   └── 数据分析_简洁.svg   # 应用图标
│   ├── components/
│   │   ├── composables/       # 组合式函数（业务逻辑）
│   │   │   ├── useAppState.js      # 全局状态管理
│   │   │   ├── useFileHandler.js   # 文件处理
│   │   │   ├── useDataProcessor.js # 数据处理和统计
│   │   │   ├── useDataQuality.js   # 数据质量分析
│   │   │   ├── useCharts.js        # 图表管理
│   │   │   └── useExport.js        # 导出功能
│   │   ├── sub/               # 子组件（UI 展示）
│   │   │   ├── AppHeader.vue        # 顶部固定栏
│   │   │   ├── SettingsPanel.vue    # 设置面板
│   │   │   ├── StatisticsView.vue   # 统计分析视图
│   │   │   ├── QualityReportView.vue# 数据质量报告
│   │   │   ├── OutlierModal.vue     # 异常值弹窗
│   │   │   ├── DuplicateModal.vue   # 重复行弹窗
│   │   │   └── DistributionModal.vue# 数据分布弹窗
│   │   ├── HelloWorld.vue     # 主组件（协调器）
│   │   ├── style.css          # 主题样式
│   │   └── HelloWorld.css     # 组件样式
│   ├── Util/
│   │   └── exportExl.js       # Excel 导出工具
│   ├── App.vue                # 根组件
│   └── main.js                # 应用入口
├── index.html                 # HTML 模板
├── vite.config.js             # Vite 配置
├── package.json               # 项目配置
├── CLAUDE.md                  # 开发指南
└── README.md                  # 项目说明
```

---

## 🎨 界面预览

### 统计分析模式

#### 首页概览
![首页](screenshots/01-home.png)

#### 设置面板
![设置面板](screenshots/02-settings.png)

#### 正态分布曲线
![正态分布](screenshots/03-normal-chart.png)

#### 箱线图
![箱线图](screenshots/04-boxplot.png)

#### 统计数据表
![统计数据表](screenshots/05-table.png)

### 数据质量报告模式

#### 质量评分
![质量评分](screenshots/06-quality-score.png)

#### 数据类型分布
![数据类型分布](screenshots/07-data-types.png)

#### 缺失值分析
![缺失值分析](screenshots/08-missing-values.png)

#### 异常值检测
![异常值检测](screenshots/09-outliers.png)

#### 异常值详情弹窗
![异常值详情弹窗](screenshots/10-outlier-modal.png)

#### 重复行检测
![重复行检测](screenshots/11-duplicates.png)

#### 重复行详情弹窗
![重复行详情弹窗](screenshots/12-duplicate-modal.png)

#### 数据分布分析
![数据分布分析](screenshots/13-distribution.png)

#### 相关性分析
![相关性分析](screenshots/15-correlation.png)

#### 导出菜单
![导出菜单](screenshots/16-export-menu.png)

---

## 🔧 开发指南

### 架构设计

项目采用 **Composables 架构模式**，将业务逻辑与 UI 分离：

- **Composables** - 纯业务逻辑，可独立测试
- **Sub Components** - 纯 UI 展示，通过 props/events 通信
- **HelloWorld.vue** - 充当协调器，组合各模块

### 添加新功能

1. 新增业务逻辑 → 在 `src/components/composables/` 创建 composable
2. 新增 UI 组件 → 在 `src/components/sub/` 创建组件
3. 状态管理 → 优先使用 `useAppState`
4. 保持单一职责 → 每个模块专注特定功能

### 代码规范

- 使用 Vue 3 `<script setup>` 语法
- 组合式 API 替代 Options API
- 响应式状态集中在 composables 中
- 组件间通信通过 props 和 events

---

## 📝 更新日志

### v2.0.0 (最新)
- 🎉 重大架构重构，采用 Composables 模式
- ✨ 新增数据质量分析功能
- ✨ 新增异常值检测（Z-score + IQR）
- ✨ 新增数据分布分析（偏度、峰度）
- ✨ 新增相关性分析
- 🎨 优化 UI 布局，支持多文件管理
- 🐛 修复 undefined 值处理问题

### v1.0.0
- 🎉 首个正式版本发布
- ✨ 基础统计分析和可视化功能
- ✨ Excel 文件导入导出

---

## 🤝 参与贡献

欢迎任何形式的贡献！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

---

## 📄 许可证

本项目采用 [MIT](LICENSE) 许可证。

---

## 🌟 致谢

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [Ant Design Vue](https://antdv.com/) - 企业级 UI 组件库
- [Apache ECharts](https://echarts.apache.org/) - 强大的数据可视化库

---

<div align="center">

  **如果这个项目对你有帮助，请给一个 ⭐️ Star**

  Made with ❤️ by [Your Name](https://github.com/your-username)

</div>