学生成绩预测与分析可视化平台

原创

已于 2024-07-18 14:41:28 修改 · 2.4k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#信息可视化

于 2024-07-17 19:21:15 首次发布

一.创作思路

在平时办公中，我们往往需要对数据进行各种数据分析与图形可视化成图表，这些操作我们可以采用wps,word等等办公软件，于是我想自己尝试写一个线上的平台，专门实现上传文件，勾选相应的数据，采用Echarts生成图表，将Echars图表生成图表的全部步骤让用户自行选择生成图表，用户可以将生成的图表保存下来进行使用。目前开发中主要分析与预测学生数据为主，同时搭配上自主选择生成图表的工作台模块，以便后续的升级。

二.技术思路

1.技术路线：使用Vue3+pinia+router+Echarts+datav

2.功能模块:

1、 数据管理模块： 用于数据的收集、存储和管理，其中包括学生成绩数据、个人信息

等。

2、 成绩可视化模块： 能够根据用户需求，将成绩数据以柱状图、折线图、饼状图等形

式进行可视化展示。

3、 个性化分析模块： 根据用户的选择和参数设定，对成绩数据进行个性化分析。

4、 用户界面： 提供给用户的操作界面，包括数据输入、参数设置、图表展示等功能。

三.界面展示

1、登录注册页面：用户通过邮箱号和密码登录进入学生成绩可视化平台

1.1.实现思路：背景的动态粒子效果采用tsparticles，大家如果感兴趣的话，可以点击连接去官网查看。邮箱登录以及验证码方面，我主要是采用node里面的一个邮箱模块nodemailer，采用mysql存储用户信息，其实我感觉用mongdb可能更方便一些，但是当时没考虑这么多。

2.数据分析界面：用户可以在操作台勾选数据，选择自己想要生成的图标，定制化设计图表，提供各种可视化图表，如折线图、柱状图，饼状图等。

2.1.生成饼状图：用户可以点击鼠标左键，在平台上勾选相应的数据进行分析，用户可以自己定义图表的样式，布局，实时更改。然后图片中展示数据是采用mockjs随机生成。

2.2.勾选数据实现原理：使用xlsx模块将用户上传的文件数据解析出来存储在pinia，使用表格渲染到界面给每一个格子添加一个点击，移入，移出事件，方便用户勾选，主要数据代码如下

<template>
    <!-- 表格模板，使用 v-for 指令遍历 datatables.tables 中的数据 -->
    <table class="csv-table" ref="tablesbox">
        <tr v-for="(row, index) in datatables.tables" :key="index">
            <!-- 为每个单元格绑定点击和鼠标悬停事件，传递行列信息 -->
            <td v-for="(value, key) in row" :key="key" @click="draw" @mouseover="xuanran" :data-coloum="index"
                :data-row="key" :data-postion="index * 10 + key">{
  
  { value }}</td>
        </tr>
    </table>
</template>

<script setup>
import { ref, onMounted, watch, toRefs } from "vue";
import { useCounterStore } from "@/stores/counter"

// 使用 Pinia store
const datatables = useCounterStore()

// 将 store 中的属性转为 refs
const { Mouseselected, tables } = toRefs(datatables)

// 定义 ref 变量
let isMouseDown = false;
const tablesbox = ref()
let num = []

// 在组件挂载时添加事件监听器
onMounted(() => {
    document.addEventListener('mousedown', () => {
        isMouseDown = true;
        tablesbox.value.classList.add('cursor')
    });
    document.addEventListener('mouseup', () => {
        isMouseDown = false;
        tablesbox.value.classList.remove('cursor')
    });
})

// 定义起点和父节点坐标
let start = { x: 0, y: 0 }
let parent = { x: 0, y: 0 }

// 绘制选中的单元格
const draw = (e) => {
    guiling()  // 清除所有单元格的样式
    e.target.style.backgroundColor = 'rgb(180, 178, 178,0.7)';
    e.target.style.border = '2px dotted rgba(205, 208, 20)';
    start.y = e.target.getAttribute('data-coloum')
    start.x = e.target.getAttribute('data-row')
    datatables.dataprencet = [e.target.innerHTML]
}

// 渲染鼠标悬停时的效果
const xuanran = (e) => {
    if (isMouseDown) {