# 图表组件说明

基于 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