登录界面

登录后欢迎界面

学生管理界面

教师管理界面

数据统计图界面

管理员个人信息界面

核心代码实现
前端 ECharts 统计组件
<template> <div> <VChart :option="option" autoresize /> </div> </template>
<script setup> import { ref } from 'vue' import VChart from 'vue-echarts' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { GridComponent, TooltipComponent, TitleComponent, DatasetComponent } from 'echarts/components' // 显式注册必需组件 use([ CanvasRenderer, BarChart, GridComponent, TooltipComponent, TitleComponent, DatasetComponent ]) // 模拟数据(管理员登录统计) const loginData = ref({ names: ['管理员 A', '管理员 B', '管理员 C', '管理员 D', '管理员 E'], counts: [128, 95, 216, 178, 64] }) const option = ref({ title: { text: '▮ 管理员登录次数统计', left: 'center', textStyle: { color: '#2c3543', fontSize: 20, fontFamily: 'Microsoft YaHei', fontWeight: 'bold' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: { type: 'category', data: loginData.value.names, axisLabel: { color: '#666', rotate: 45 }, axisLine: { lineStyle: { color: '#ddd' } } }, yAxis: { type: 'value', axisLabel: { color: '#666', formatter: '{value} 次' }, splitLine: { lineStyle: { type: 'dashed' } } }, series: [{ type: 'bar', data: loginData.value.counts, barWidth: '45%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#3ba0ff' }, { offset: 1, color: '#36cfc9' }] }, borderRadius: [6, 6, 0, 0] }, emphasis: { itemStyle: { shadowBlur: 20, shadowColor: 'rgba(54,207,201,0.5)' } }, animationType: 'scale', animationEasing: 'backOut' }], grid: { containLabel: true, left: '10%', right: '10%', bottom: '15%' } }) </script>
<style scoped> .chart-container { width: 100%; height: 480px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .chart { width: 100%; height: 100%; } @media (max-width: 768px) { .chart-container { height: 400px; padding: 10px; } } </style>


