AI夹克

动手:图表可视化

你要做什么

一个数据仪表盘,包含柱状图、折线图、饼图。

⏱️ 20 分钟 | 🛠️ Vue 3 + Chart.js

跟着做

帮我用 Chart.js 做一个数据可视化仪表盘(Vue 3):
1. 安装 chart.js:npm install chart.js
2. 三个图表并排显示:柱状图(月度销售额)、折线图(用户增长)、饼图(流量来源)
3. 图表响应式,窗口大小变化时自动调整
4. 图表有标题、图例、数据标签
5. 用一组模拟数据
6. 整体深色卡片背景,图表配色现代

🎯 进阶挑战

  • 加上日期范围选择器,切换数据时间段
  • 图表之间联动:点击饼图切片,柱状图跟着变
  • 用 ECharts 替代 Chart.js 再做一版

✅ 你做到了

  • 学会了引入和使用第三方图表库
  • 理解了数据可视化的基本概念
  • 做了一个可以展示数据的仪表盘