动手:图表可视化
你要做什么
一个数据仪表盘,包含柱状图、折线图、饼图。
⏱️ 20 分钟 | 🛠️ Vue 3 + Chart.js
跟着做
帮我用 Chart.js 做一个数据可视化仪表盘(Vue 3):
1. 安装 chart.js:npm install chart.js
2. 三个图表并排显示:柱状图(月度销售额)、折线图(用户增长)、饼图(流量来源)
3. 图表响应式,窗口大小变化时自动调整
4. 图表有标题、图例、数据标签
5. 用一组模拟数据
6. 整体深色卡片背景,图表配色现代
🎯 进阶挑战
- 加上日期范围选择器,切换数据时间段
- 图表之间联动:点击饼图切片,柱状图跟着变
- 用 ECharts 替代 Chart.js 再做一版
✅ 你做到了
- 学会了引入和使用第三方图表库
- 理解了数据可视化的基本概念
- 做了一个可以展示数据的仪表盘