---
title: "E.4 数据可视化类（10 个）"
---


![99-appendix_e-4-content.png](/images/Basic/99-appendix_e-4-content.png)
# E.4 数据可视化类（10 个）

把数据变成图表，让信息一目了然。这类项目非常适合做数据分析、做报告的人。


## 1. 个人支出饼图

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：Chart.js 使用、数据聚合

**功能描述**：
- 输入支出数据
- 按分类生成饼图
- 显示各分类占比
- 可选择时间范围

**学到什么**：图表库使用、数据处理


## 2. 体重/健康追踪图

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：折线图、日期数据

**功能描述**：
- 每天记录体重/步数等
- 折线图展示趋势
- 显示平均值、最高/最低
- 目标线标注

**学到什么**：时间序列数据可视化


## 3. 习惯热力图

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：热力图、日历视图

**功能描述**：
- 类似 GitHub 贡献图
- 颜色深浅表示完成程度
- 点击查看当天详情
- 统计连续天数

**学到什么**：热力图实现、CSS Grid


## 4. 时间分配统计

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：计时器、环形图

**功能描述**：
- 记录时间花在哪里
- 分类统计（工作/学习/娱乐等）
- 环形图展示占比
- 周/月统计

**学到什么**：时间追踪、多种图表


## 5. 投票/调查结果展示

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：柱状图、实时更新

**功能描述**：
- 创建投票选项
- 用户投票
- 实时显示投票结果
- 柱状图可视化

**学到什么**：实时数据更新、柱状图


## 6. 项目进度仪表盘

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：进度条、多图表组合

**功能描述**：
- 项目任务列表
- 完成进度百分比
- 多维度统计
- 仪表盘布局

**学到什么**：仪表盘设计、多图表布局


## 7. 简易股票/币价图表

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：API 调用、实时数据

**功能描述**：
- 输入股票/加密货币代码
- 显示价格走势图
- K 线图基础版
- 自动刷新

**学到什么**：API 调用、金融图表


## 8. 学习时长统计

**难度**：⭐⭐（基础）  
**预计时长**：1-2 小时  
**核心技术点**：计时器、统计图表

**功能描述**：
- 学习计时（开始/结束）
- 分科目记录
- 日/周/月统计
- 图表展示

**学到什么**：时间统计、多维度展示


## 9. 目标完成雷达图

**难度**：⭐⭐⭐（进阶）  
**预计时长**：2-3 小时  
**核心技术点**：雷达图、多维度数据

**功能描述**：
- 设定多个目标维度
- 给每个维度打分
- 雷达图展示完成情况
- 对比不同时期

**学到什么**：雷达图实现、多维度分析


## 10. 简易数据看板

**难度**：⭐⭐⭐（进阶）  
**预计时长**：3-4 小时  
**核心技术点**：多图表、布局设计

**功能描述**：
- 数字卡片（总数、增长率等）
- 多个图表组合
- 响应式布局
- 可选择时间范围

**学到什么**：仪表盘设计、数据大屏基础


## 数据可视化常用图表库

| 库名 | 特点 | 适合场景 |
|------|------|----------|
| Chart.js | 简单易用 | 入门首选 |
| ECharts | 功能强大 | 复杂图表 |
| D3.js | 灵活度最高 | 高度定制 |
| ApexCharts | 现代美观 | 追求颜值 |

::: tip 建议
先用 **Chart.js** 入门，它的文档清晰，上手最快。等熟悉了再尝试其他库。
:::


## 数据可视化的核心原则

1. **清晰**：一眼能看懂在说什么
2. **准确**：数据不能误导
3. **美观**：颜色协调、布局合理
4. **交互**：鼠标悬停显示详情

::: warning 注意
做数据可视化项目时，先用假数据把图表做出来，最后再接真实数据。这样迭代更快。
:::