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 | 现代美观 | 追求颜值 |
建议
先用 Chart.js 入门，它的文档清晰，上手最快。等熟悉了再尝试其他库。
数据可视化的核心原则
- 清晰：一眼能看懂在说什么
- 准确：数据不能误导
- 美观：颜色协调、布局合理
- 交互：鼠标悬停显示详情
注意
做数据可视化项目时，先用假数据把图表做出来，最后再接真实数据。这样迭代更快。