216 lines
5.6 KiB
Markdown
216 lines
5.6 KiB
Markdown
# 图表组件说明
|
||
|
||
基于 Chart.js 和 Vue-ChartJS 构建的数据可视化组件库，为 OJ Next 项目提供丰富的图表展示功能。
|
||
|
||
## 技术栈
|
||
|
||
- **Chart.js** - 强大的图表库，支持多种图表类型
|
||
- **Vue-ChartJS** - Chart.js 的 Vue 3 封装
|
||
- **Vue 3 Composition API** - 现代化的组件开发方式
|
||
- **TypeScript** - 完整的类型支持
|
||
|
||
## 现有图表组件
|
||
|
||
### 1. DurationChart 混合图表
|
||
**文件位置**: `src/oj/ai/components/DurationChart.vue`
|
||
|
||
**功能描述**: 展示用户学习进度的时间趋势，结合柱状图和折线图。
|
||
|
||
**数据来源**: `durationData` API 接口
|
||
- 每周/每月的综合情况
|
||
- 题目数、提交数、等级变化
|
||
|
||
**图表类型**:
|
||
- 柱状图：完成题目数
|
||
- 折线图：提交次数、等级变化
|
||
|
||
**使用场景**: AI分析页面的主要图表
|
||
|
||
### 2. Heatmap 热力图
|
||
**文件位置**: `src/oj/ai/components/Heatmap.vue`
|
||
|
||
**功能描述**: 展示用户的提交活跃度分布。
|
||
|
||
**数据来源**: `heatmapData` API 接口
|
||
- 按日期统计提交数
|
||
- 可视化用户活跃度
|
||
|
||
**图表类型**: 热力图矩阵
|
||
|
||
**使用场景**: 展示学习习惯和时间规律
|
||
|
||
### 3. Details 详细数据
|
||
**文件位置**: `src/oj/ai/components/Details.vue`
|
||
|
||
**功能描述**: 展示用户详细的学习数据。
|
||
|
||
**数据来源**: `detailsData` API 接口
|
||
- 用户等级、已解决题目列表
|
||
- 标签统计、难度统计
|
||
- 参赛次数等
|
||
|
||
**展示方式**: 数据表格和统计卡片
|
||
|
||
## 可扩展的图表类型
|
||
|
||
### 1. 提交效率趋势图 (折线图)
|
||
**数据来源**: `durationData` 中的 `submission_count / problem_count`
|
||
**展示内容**: 每个时间段的提交效率（提交次数/完成题目数）
|
||
**价值**: 反映刷题质量的提升，值越接近1说明一次AC率越高
|
||
|
||
### 2. 排名分布图 (直方图/箱线图)
|
||
**数据来源**: `solved` 数组中每道题的 `rank` 和 `ac_count`
|
||
**展示内容**: 用户解题排名的分布情况（如：前10%、10-30%、30-50%等区间的题目数量）
|
||
**价值**: 了解解题速度和竞争力
|
||
|
||
### 3. 等级分布饼图/环形图
|
||
**数据来源**: `solved` 数组中每道题的 `grade`
|
||
**展示内容**: S/A/B/C 各等级题目的数量和占比
|
||
**价值**: 直观看出题目质量分布
|
||
|
||
### 4. 标签雷达图
|
||
**数据来源**: `tags` 对象
|
||
**展示内容**: 多维度展示各类标签的掌握程度（可以归一化处理）
|
||
**价值**: 可视化知识点覆盖面
|
||
|
||
### 5. 时间活跃度分析 (热力矩阵)
|
||
**数据来源**: `solved` 数组中的 `ac_time`
|
||
**展示内容**: 按星期几和时间段统计做题分布（如：工作日vs周末，早中晚时段）
|
||
**价值**: 了解学习习惯和时间规律
|
||
|
||
### 6. 难度-等级关联散点图
|
||
**数据来源**: `solved` 数组中的难度信息和 `grade`
|
||
**展示内容**: X轴为难度，Y轴为等级，每个点代表一道题
|
||
**价值**: 分析在不同难度下的表现
|
||
|
||
### 7. 做题加速度图
|
||
**数据来源**: `durationData`
|
||
**展示内容**: 每个时间段完成题目数的变化率
|
||
**价值**: 看出学习动力的变化趋势
|
||
|
||
### 8. 竞赛题目占比
|
||
**数据来源**: `solved` 数组中的 `contest_id` 和 `contest_count`
|
||
**展示内容**: 竞赛题 vs 常规题的数量对比
|
||
**价值**: 了解竞赛参与情况
|
||
|
||
### 9. 连续做题天数统计
|
||
**数据来源**: `heatmapData`
|
||
**展示内容**: 最长连续做题天数、当前连续天数等
|
||
**价值**: 激励持续学习
|
||
|
||
### 10. 月度对比雷达图
|
||
**数据来源**: `durationData`
|
||
**展示内容**: 多个维度（完成题目数、提交次数、等级、效率等）的月度对比
|
||
**价值**: 全面评估进步情况
|
||
|
||
## 组件开发指南
|
||
|
||
### 创建新图表组件
|
||
|
||
```vue
|
||
<template>
|
||
<div class="chart-container">
|
||
<Line
|
||
:data="chartData"
|
||
:options="chartOptions"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Line } from 'vue-chartjs'
|
||
import { computed } from 'vue'
|
||
|
||
// 定义 props
|
||
const props = defineProps<{
|
||
data: any[]
|
||
}>()
|
||
|
||
// 计算图表数据
|
||
const chartData = computed(() => ({
|
||
labels: props.data.map(item => item.label),
|
||
datasets: [{
|
||
label: '数据',
|
||
data: props.data.map(item => item.value),
|
||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||
borderColor: 'rgba(54, 162, 235, 1)',
|
||
borderWidth: 1
|
||
}]
|
||
}))
|
||
|
||
// 图表配置
|
||
const chartOptions = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 图表样式定制
|
||
|
||
```typescript
|
||
// 主题配置
|
||
const theme = {
|
||
colors: {
|
||
primary: '#6366f1',
|
||
secondary: '#8b5cf6',
|
||
success: '#10b981',
|
||
warning: '#f59e0b',
|
||
error: '#ef4444'
|
||
},
|
||
gradients: {
|
||
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
success: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)'
|
||
}
|
||
}
|
||
```
|
||
|
||
## 性能优化
|
||
|
||
### 1. 数据懒加载
|
||
- 按需加载图表数据
|
||
- 使用虚拟滚动处理大量数据
|
||
|
||
### 2. 图表缓存
|
||
- 缓存计算结果
|
||
- 避免重复渲染
|
||
|
||
### 3. 响应式设计
|
||
- 自适应容器大小
|
||
- 移动端优化
|
||
|
||
## 最佳实践
|
||
|
||
### 1. 数据预处理
|
||
- 在组件外部处理数据
|
||
- 使用 computed 属性缓存计算结果
|
||
|
||
### 2. 错误处理
|
||
- 添加数据验证
|
||
- 提供降级方案
|
||
|
||
### 3. 用户体验
|
||
- 添加加载状态
|
||
- 提供交互反馈
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2024-01-15)
|
||
- ✨ 初始版本发布
|
||
- 📊 基础图表组件
|
||
- 🎨 主题样式支持
|
||
- 📱 响应式设计
|
||
|
||
### v1.1.0 (2024-01-20)
|
||
- 🔧 性能优化
|
||
- 📈 新增混合图表
|
||
- 🎯 交互体验改进
|
||
|
||
## 许可证
|
||
|
||
MIT License |