# 高校学生成绩数据可视化系统 **Repository Path**: itpan/data-visualization-system ## Basic Information - **Project Name**: 高校学生成绩数据可视化系统 - **Description**: 高校学生成绩数据可视化系统，vue+ssm - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2024-05-23 - **Last Updated**: 2024-05-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 一、作品背景 ​ 《中国教育现代化2035》提出，我国到2035年，要总体实现教育现代化，迈入教育强国行列。大数据作为当前新一代信息技术发展的重要领域,成为新一轮教育创新和教育重大变革的重要推手，是实现教育现代化宏伟目标的重要动力与支撑。 ​ 教育数据进入了大数据时代，生成的数据通常是庞大、复杂和异构的，尽管这些数据蕴含了大量关于学生自身及其与环境交互的丰富信息，但对于没有掌握数据挖掘和分析处理技术的教师和学校管理者来说，通常难以处理和解释这些数据。 ​ 数据可视化可将抽象的数据转换为形象的图表,利于数据特点和规律的发掘,因而将数据可视化技术应用于教育领域,服务于普通教育工作者具有重要意义，这也使得方便易用的数据可视化工具成为迫切需要。 ## 二、作品设计 #### 2.1整体框架 本项目采用SpringBoot + MySQL + Echarts技术实现数据可视化，数据存储在MySQL数据库里；通过SpringBoot技术搭建后台，抽取并分析数据，生成数据报表，提供接口给前端调用；前端用Echarts实现数据可视化，通过图像展示揭示数据规律。 img #### 2.2系统分层 ​ SpringBoot技术应用于交互设计中，它支持快速构建并独立运行，能够提高数据的抽取、处理效率。ECharts是一款开源的基于JavaScript的数据可视化图表库，它运用在视觉设计中，可以流畅的运行在PC设备上，兼容当前绝大部分浏览器。支持多图表、组件的联动和混搭展现，为系统使用者提供直观、生动的数据可视化图表。 img #### 2.3可视化设计思路 ​ 成绩数据可视化设计流程主要有分析数据、设计图形、优化图形、检查测试。首先，在了解需求的基础上，我们选择展示班级平均分、各科平均分、成绩分布、绩点排名、学业预警、专业贡献度六种数据分析；其次，采用数据可视化绘图库Echarts，设计贴合数据特征体现的创新性图表；接着，优化细节，修改图表展示方式更好展示数据特性，修改页面设计，增强舒适度；最后，检查测试、实现数据可视化。 image-20221122145840824 ## 三、技术运用 #### 3.1数据库建立 为确保数据的真实性，所有数据由任课老师提供，将数据收集、整理、存储到 MySQL中。在MySQL 中创建数据库db,设置 UTF8 数据编码以避免中文乱码；在 db中创建course（成绩）、各专业分表等数据库表。 #### 3.2前端页面建立 确定可视化需求后，首先使用flex布局和css样式等实现位置布局和整体风格，并且使用flexible+rem在不同终端特别是大屏实现页面适配；接着定制每个ECharts图表的样式，最后再利用Vue和jQuery绑定每个图表的位置，完成前端页面构建。 #### 3.3后端交互实现 首先确定后端所用到的技术，通过SpringBoot整合框架，Mybatis管理MySQL，实现查询获取数据集，进行分析并形成数据报表；接着在properties文件里输入正确的数据库信息并测试是否能连接成功；最后完成实体层、控制层、服务层、映射层的功能实现，产生API，实现前后端分离。 #### 3.4数据可视化 在数据可视化方面，我们考虑布局以及图表呈现方式的问题。在布局方面，我们选择在中间部分呈现整体情况，两边显示具体图表的分-总-分构造。由Vue+axios接收后端不同的API数据，Vue框架可以对所接收的数据实时绑定，再利用Echarts将各数据汇合、分析，最后形成各式图表，在PC设备等终端进行可视化展示，并进行网页及应用的数据渲染以及组件式开发，实现动态图表，使可视化页面更清晰、更直观。 ## 四、功能实现 ![img](https://gitee.com/paofuniuniu/typora-picture/raw/master/git@gitee.com:paofuniuniu/typora-picture.git/clip_image008.png) ## 五、项目创新 ​ 在这个项目中，我们使用了深色背景加动态图表的结合，是个性化色彩与工业审美结合的创新尝试；在页面布局中，我们采用分-总-分的结构层次，在页面中部展示学院总体信息，在两侧展示各专业对应的具体成绩信息，条理清晰、层次分明，是数据逻辑可视化的精巧展示；在图形设计上，我们选取汽车仪表盘图来展示学院人数、专业数量以及班级个数，利用方形面积大小来展示各专业人数比，让高位数据变为小比例图形，数据对比更为突出，是数据可视化的创新设计；在内容设计上，我们选用了个人分数成绩、班级平均分、班级绩点、课程平均分、班级数量、专业数量、专业人数、学院人数等10个数据作为数据源，充分考虑用户需求，展示多维数据；在视觉设计上，我们页面共有八种不同类型的图表展示，综合立体揭示数据规律，使项目整体既有实用性又具创新亮点。