xuyue/ojnext

Fork 0

Files

yuetsh 2c31acaba7

Deploy / deploy (push) Has been cancelled

Details

流程图的功能

2025-10-13 01:38:54 +08:00

5.6 KiB

Raw Permalink Blame History

图表组件说明

基于 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 展示内容: 多个维度（完成题目数、提交次数、等级、效率等）的月度对比价值: 全面评估进步情况

组件开发指南

创建新图表组件

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

图表样式定制

// 主题配置
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

5.6 KiB Raw Permalink Blame History Unescape Escape