From 9bc58c6270f5c0af2e8dc34821bbae0a5fb428ae Mon Sep 17 00:00:00 2001
From: rjl <98n9@163.com>
Date: Wed, 1 Apr 2026 15:13:23 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE=E5=8A=A8=E7=94=BB=E4=B8=8E=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 启用平滑动画提升交互体验
- 调整颜色方案增强视觉层次
- 添加阴影效果和间距提升可读性
- 优化标签位置和字体大小
---
 .../views/user/game/modules/LineCharts.vue    | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/apps/admin/src/views/user/game/modules/LineCharts.vue b/apps/admin/src/views/user/game/modules/LineCharts.vue
index c454544..4002717 100644
--- a/apps/admin/src/views/user/game/modules/LineCharts.vue
+++ b/apps/admin/src/views/user/game/modules/LineCharts.vue
@@ -40,11 +40,17 @@ function buildOption(list: BarDatum[]): ECOption {
   const correct = list.map(i => i.correct)
 
   return {
-    // 禁用动画，避免频繁刷新时的抖动
-    animation: false,
+    // 启用动画，让柱子变化更平滑
+    animation: true,
+    animationDuration: 800,
+    animationEasing: 'cubicOut',
     tooltip: {
       trigger: 'axis',
       axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      borderColor: '#3b82f6',
+      borderWidth: 1,
+      textStyle: { color: '#1e3a8a' },
     },
     legend: {
       data: ['答题数量', '预估得分'],
@@ -52,17 +58,18 @@ function buildOption(list: BarDatum[]): ECOption {
       right: 0,
       icon: 'circle',
       textStyle: {
-        color: '#666',
+        color: '#64748b',
+        fontSize: 12,
       },
     },
-    grid: { left: 16, right: 16, top: 40, bottom: 0, containLabel: true },
+    grid: { left: 16, right: 16, top: 70, bottom: 0, containLabel: true },
     xAxis: {
       type: 'category',
       data: categories,
       axisTick: { show: false }, // 隐藏 x 轴刻度线
       axisLine: { show: false }, // 隐藏 x 轴线
       axisLabel: {
-        color: '#003366', // 深蓝色字体
+        color: '#1e3a8a', // 深蓝色字体
         fontWeight: 'bold',
         fontSize: 14,
         margin: 16,
@@ -82,6 +89,7 @@ function buildOption(list: BarDatum[]): ECOption {
         type: 'bar',
         data: total,
         barWidth: 24,
+        barGap: '40%', // 柱子间的间隙
         itemStyle: {
           // 从上到下：浅蓝 -> 深蓝
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -89,14 +97,17 @@ function buildOption(list: BarDatum[]): ECOption {
             { offset: 1, color: '#3b82f6' }, // blue-500 (底部深色)
           ]),
           borderRadius: [4, 4, 0, 0],
+          shadowBlur: 10,
+          shadowColor: 'rgba(59, 130, 246, 0.2)',
+          shadowOffsetY: 4,
         },
         label: {
           show: true,
           position: 'top',
-          color: '#003366', // 深蓝色
+          color: '#1e3a8a', // 深蓝色
           fontWeight: 'bold',
-          fontSize: 18,
-          offset: [0, 2],
+          fontSize: 16,
+          offset: [0, -4],
         },
       },
       {
@@ -111,14 +122,17 @@ function buildOption(list: BarDatum[]): ECOption {
             { offset: 1, color: '#f97316' }, // orange-500 (底部深色)
           ]),
           borderRadius: [4, 4, 0, 0],
+          shadowBlur: 10,
+          shadowColor: 'rgba(249, 115, 22, 0.2)',
+          shadowOffsetY: 4,
         },
         label: {
           show: true,
           position: 'top',
           color: '#ea580c', // orange-600
           fontWeight: 'bold',
-          fontSize: 18,
-          offset: [0, 2],
+          fontSize: 16,
+          offset: [0, -4],
         },
       },
     ],