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], }, }, ],