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 |