257
docs/图表.md
257
docs/图表.md
@@ -1,41 +1,216 @@
|
||||
📊 可以添加的图表类型
|
||||
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
|
||||
展示内容: 多个维度（完成题目数、提交次数、等级、效率等）的月度对比
|
||||
价值: 全面评估进步情况
|
||||
# 图表组件说明
|
||||
|
||||
基于 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
|
||||
Reference in New Issue
Block a user