vue3 数据可视化大屏 高校成绩管理大数据决策驾驶舱

id

298

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 高校成绩管理大数据决策驾驶舱

演示demo:vue3 数据可视化大屏 高校成绩管理大数据决策驾驶舱

效果截图

视频演示

关键数据

数字卡片展示关键数据

在校学生总数,开设课程数,平均成绩,及格率,优秀率,在线用户数

历年成绩趋势对比

折线图展示历年成绩趋势对比

平均分
及格率
优秀率
满分率

成绩分布统计

饼状图展示成绩分布统计

优秀（90—100）
良好(80-89)
中等(70-79)
及格(60-69)
不及格(<60)

院系综合排名

列表展示院系综合排名

学业预警监控

列表展示学业预警监控

各年级成绩表现

进度条展示各年级成绩表现

成绩异常监控分析

表格展示成绩异常监控分析

课程选修热力分析

热力图展示课程选修热力分析

多维度成绩分析矩阵

折线图加柱状图展示多维度成绩分析矩阵

理论成绩
实践成绩
综合评价
创新能力

项目依赖

  "dependencies": {
    "@meruem117/vue-seamless-scroll": "^0.1.8",
    "autoprefixer": "^10.4.13",
    "axios": "^1.5.1",
    "dayjs": "^1.11.7",
    "disable-devtool": "^0.3.7",
    "echarts": "^5.4.3",
    "element-plus": "^2.10.4",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "lottie-web": "^5.13.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },

部分代码

<template>
  <div class="home">
    <top class="wow fadeInDown" name="高校成绩管理大数据决策驾驶舱"></top>
    <div class="homeMain">
      <div class="homeMain0">
        <item1></item1>
      </div>
      <div class="homeMain1">
        <div class="homeMainl">
          <div class="item1">
            <item name="历年成绩趋势对比" :duration="0.5" :delay="0">
              <item2></item2>
            </item>
          </div>
          <div class="item1">
            <item name="成绩分布统计" :duration="0.5" :delay="0.5">
              <item3></item3>
            </item>
          </div>
          <div class="item1">
            <item name="院系综合排名" :duration="0.5" :delay="1">
              <item4></item4>
            </item>
          </div>
        </div>
        <div class="homeMainc">
          <div class="item1">
            <item type="1" name="课程选修热力分析" :duration="0.5" :delay="0">
              <item8></item8>
            </item>
          </div>
          <div class="item2">
            <item type="1" name="多维度成绩分析矩阵" :duration="0.5" :delay="0.5">
              <item9></item9>
            </item>
          </div>
        </div>
        <div class="homeMainr">
          <div class="item1">
            <item name="学业预警监控" :duration="0.5" :delay="0">
              <item5></item5>
            </item>
          </div>
          <div class="item1">
            <item name="各年级成绩表现" :duration="0.5" :delay="0.5">
              <item6></item6>
            </item>
          </div>
          <div class="item1">
            <item name="成绩异常监控分析" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {gsap} from 'gsap'
import top from '@/components/top/index.vue'
import WOW from "wow.js"
import item from "@/components/item/index.vue"
import item1 from './components/item1/index.vue'
import item3 from './components/item3/index.vue'
import item5 from './components/item5/index.vue'
import item4 from './components/item4/index.vue'
import item2 from './components/item2/index.vue'
import item6 from './components/item6/index.vue'
import item7 from './components/item7/index.vue'
import item8 from './components/item8/index.vue'
import item9 from './components/item9/index.vue'

// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

相关大屏

学校概况数据大屏 - 数据可视化大屏 vue3
高校档案系统统计大屏 - 数据可视化大屏 vue3
绿色校园资源回收利用综合平台 - 数据可视化大屏 vue3
高校成绩管理大数据决策驾驶舱 - 数据可视化大屏 vue3
高校宿舍管理数据大屏 可视化数据大屏 vue3
智慧校园环境监测数据可视化 可视化数据大屏 vue3
智慧校园综合指挥中心 可视化数据大屏 vue3

源码下载

项目基于vue3+vite+js开发 nodejs 23

获取代码前请确保具备相关开发基础

本项目为纯前端大屏，无后端支持

默认数据为模拟数据，实际使用时需接入真实数据源

请在确认需求后再获取相关代码