来源：https://github.com/datawhalechina/vibe-vibe

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

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	现代美观	追求颜值

数据可视化的核心原则

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