style(图表): 优化柱状图动画与视觉样式

- 启用平滑动画提升交互体验
- 调整颜色方案增强视觉层次
- 添加阴影效果和间距提升可读性
- 优化标签位置和字体大小

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,
+          fontSize: 16,
-          offset: [0, 2],
+          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,
+          fontSize: 16,
-          offset: [0, 2],
+          offset: [0, -4],
         },
       },
     ],