统计

src/views/study/chinese/chart-2.vue

@@ -40,10 +40,6 @@ const initChart = () => {
     tooltip: {
       trigger: 'axis',
     },
-    legend: {
-      data: ['语文成绩', '班级平均分'],
-      bottom: 0,
-    },
     grid: {
       left: '3%',
       right: '4%',
@@ -70,7 +66,7 @@ const initChart = () => {
     },
     series: [
       {
-        name: '语文成绩',
+        name: '成绩',
         type: 'line',
         data: [78, 82, 80, 85, 83, 88, 86, 90],
         smooth: true,

src/views/study/chinese/chart-4.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getCurrentInstance,
+  reactive,
+  ref,
+  onMounted,
+  watch,
+  nextTick,
+} from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  data: <any>{},
+})
+
+const { proxy } = getCurrentInstance()
+const state = reactive({
+  resizeObserver: <any>null,
+  chart: <any>null,
+})
+const ref_chart = ref()
+const ref_main = ref()
+const initChart = () => {
+  echarts.dispose(ref_chart.value)
+  const chart = echarts.init(ref_chart.value)
+  const option = {
+    title: {
+      text: '成绩趋势',
+      left: 'center',
+      textStyle: {
+        fontSize: 14,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [
+        '2025-03-02',
+        '2025-03-12',
+        '2025-03-22',
+        '2025-04-02',
+        '2025-04-12',
+        '2025-04-22',
+      ],
+    },
+    yAxis: {
+      type: 'value',
+      min: 60,
+      max: 100,
+      name: '分数',
+    },
+    series: [
+      {
+        name: '语文成绩',
+        type: 'line',
+        data: [78, 82, 80, 85, 83, 88, 86, 90],
+        smooth: true,
+        lineStyle: {
+          width: 3,
+          color: '#4361EE',
+        },
+        itemStyle: {
+          color: '#4361EE',
+          size: 8,
+        },
+        areaStyle: {
+          color: 'rgba(67, 97, 238, 0.1)',
+        },
+      },
+    ],
+  }
+  chart.setOption(option)
+  state.resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      chart && chart.resize()
+    }
+  })
+  state.resizeObserver.observe(ref_main.value)
+  return chart
+}
+watch(
+  () => props.data,
+  () => {
+    state.chart = initChart()
+  },
+)
+onMounted(() => {
+  nextTick(() => {
+    state.chart = initChart()
+  })
+  return () => {
+    state.resizeObserver?.unobserve(ref_main?.value)
+    state.resizeObserver?.disconnect()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-main {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/study/chinese/index.vue

@@ -268,46 +268,11 @@
                 >
                 </q-select>
               </div>
-              <!--              <div-->
-              <!--                class="ml-auto flex space-x-2 text-xs font-normal text-gray-800"-->
-              <!--              >-->
-              <!--                <div class="relative">-->
-              <!--                  <select-->
-              <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
-              <!--                  >-->
-              <!--                    <option value="recent">最近三个月</option>-->
-              <!--                    <option value="this_term">本学期</option>-->
-              <!--                    <option value="last_term">上学期</option>-->
-              <!--                    <option value="this_year">本年度</option>-->
-              <!--                    <option value="all">全部</option>-->
-              <!--                  </select>-->
-              <!--                  <div-->
-              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
-              <!--                  >-->
-              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
-              <!--                  </div>-->
-              <!--                </div>-->
-              <!--                <div class="relative">-->
-              <!--                  <select-->
-              <!--                    class="focus:ring-subject-color/50 appearance-none rounded-lg bg-gray-100 py-1.5 pr-8 pl-3 text-sm focus:ring-2 focus:outline-none"-->
-              <!--                  >-->
-              <!--                    <option value="all">全部类型</option>-->
-              <!--                    <option value="weekly">周测</option>-->
-              <!--                    <option value="monthly">月考</option>-->
-              <!--                    <option value="midterm">期中考试</option>-->
-              <!--                    <option value="final">期末考试</option>-->
-              <!--                  </select>-->
-              <!--                  <div-->
-              <!--                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"-->
-              <!--                  >-->
-              <!--                    <i class="fas fa-chevron-down text-xs"></i>-->
-              <!--                  </div>-->
-              <!--                </div>-->
-              <!--              </div>-->
             </div>
           </div>
-          <!-- 时间轴布局的考试记录 -->
-
+          <div class="h-[200px]">
+            <chart4 />
+          </div>
           <div class="flex-1 overflow-y-auto p-6">
             <div class="timeline-date">2023年12月</div>
             <div class="exam-item mb-3 rounded-lg border border-gray-300 p-3">
@@ -325,21 +290,21 @@
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
+                  <div class="text-xs text-gray-500">试卷难度</div>
+                  <div class="font-medium text-gray-800">S</div>
+                </div>
+                <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">用时</div>
                   <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">题量</div>
-                  <div class="font-medium text-gray-800">20题</div>
+                  <div class="text-xs text-gray-500">得分</div>
+                  <div class="font-medium text-gray-800">96分</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">错题</div>
                   <div class="font-medium text-red-500">3题</div>
                 </div>
-                <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">正确率</div>
-                  <div class="font-medium text-green-500">85%</div>
-                </div>
               </div>
               <div class="mt-3">
                 <div class="mb-1 text-xs text-gray-500">错题类型：</div>
@@ -379,21 +344,21 @@
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
+                  <div class="text-xs text-gray-500">试卷难度</div>
+                  <div class="font-medium text-gray-800">S</div>
+                </div>
+                <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">用时</div>
                   <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">题量</div>
-                  <div class="font-medium text-gray-800">20题</div>
+                  <div class="text-xs text-gray-500">得分</div>
+                  <div class="font-medium text-gray-800">96分</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">错题</div>
                   <div class="font-medium text-red-500">3题</div>
                 </div>
-                <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">正确率</div>
-                  <div class="font-medium text-green-500">85%</div>
-                </div>
               </div>
               <div class="mt-3">
                 <div class="mb-1 text-xs text-gray-500">错题类型：</div>
@@ -434,21 +399,21 @@
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
+                  <div class="text-xs text-gray-500">试卷难度</div>
+                  <div class="font-medium text-gray-800">S</div>
+                </div>
+                <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">用时</div>
                   <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">题量</div>
-                  <div class="font-medium text-gray-800">20题</div>
+                  <div class="text-xs text-gray-500">得分</div>
+                  <div class="font-medium text-gray-800">96分</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">错题</div>
                   <div class="font-medium text-red-500">3题</div>
                 </div>
-                <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">正确率</div>
-                  <div class="font-medium text-green-500">85%</div>
-                </div>
               </div>
               <div class="mt-3">
                 <div class="mb-1 text-xs text-gray-500">错题类型：</div>
@@ -488,21 +453,21 @@
               </div>
               <div class="mt-3 grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
                 <div class="rounded bg-gray-50 p-2 text-center">
+                  <div class="text-xs text-gray-500">试卷难度</div>
+                  <div class="font-medium text-gray-800">S</div>
+                </div>
+                <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">用时</div>
                   <div class="font-medium text-gray-800">45分钟</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">题量</div>
-                  <div class="font-medium text-gray-800">20题</div>
+                  <div class="text-xs text-gray-500">得分</div>
+                  <div class="font-medium text-gray-800">96分</div>
                 </div>
                 <div class="rounded bg-gray-50 p-2 text-center">
                   <div class="text-xs text-gray-500">错题</div>
                   <div class="font-medium text-red-500">3题</div>
                 </div>
-                <div class="rounded bg-gray-50 p-2 text-center">
-                  <div class="text-xs text-gray-500">正确率</div>
-                  <div class="font-medium text-green-500">85%</div>
-                </div>
               </div>
               <div class="mt-3">
                 <div class="mb-1 text-xs text-gray-500">错题类型：</div>
@@ -611,6 +576,7 @@ import StudyLayout from '@/views/study/components/study-layout.vue'
 import chart1 from './chart-1.vue'
 import chart2 from './chart-2.vue'
 import chart3 from './chart-3.vue'
+import chart4 from './chart-4.vue'
 
 const state: any = reactive({
   type: 1,