vue3 可视化数据大屏 单位人员动态数据大屏

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

id

217

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:单位人员动态数据大屏 可视化数据大屏 vue3

动态效果

效果截图

人员外出类型分布

柱状图展示 人员外出类型分布 出差,培训学习,会议,休假,外派,其他

月度人员外出分布

折线图展示 月度人员外出分布

各部门外出人员分布情况

横向柱状图展示 各部门外出人员分布情况 人力资源部,财务部,市场部,技术研发部,销售部,行政部,客服部,运营部,法务部,采购部

数字卡片

数字卡片展示 总人数 在位人数 在外人数 在位率

单位人员分布

地图展示 单位人员分布

外出时长统计

折线图展示 外出时长统计

人员外出类型分布

柱状图展示 人员外出类型分布 公务出差 会议培训 业务洽谈 外出考察 其他事由

各部门在位率

展示各部门在位率 技术研发部,市场营销部,人力资源部,财务部,行政部

大屏数据可视化模板

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

部分代码

<template>
  <div class="home">
<!--    背景-->
    <bgAnimate></bgAnimate>
<!--    底座-->
    <bg></bg>
    <top title="单位人员动态数据大屏" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="homeMain">
      <div class="homeMainLeft">
        <div class="item1">
          <item name="人员外出类型分布" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="月度人员外出分布" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="各部门外出人员分布情况" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="containerRef">
          <item8></item8>
        </div>
      </div>
      <div class="homeMainRight">
        <div class="item1">
          <item name="外出时长统计" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="外出事由分类统计" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="各部门在位率" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import top from "./components/top/index.vue"
import item from "./components/item/index.vue"
import item1 from "./components/item1/index.vue"
import item2 from "./components/item2/index.vue"
import item3 from "./components/item3/index.vue"
import item4 from "./components/item4/index.vue"
import item5 from "./components/item5/index.vue"
import item6 from "./components/item6/index.vue"
import item7 from "./components/item7/index.vue"
import item8 from "./components/item8/index.vue"
import bg from "./components/bg/index.vue"
import bgAnimate from "@/components/bgAnimate/index.vue"
import WOW from "wow.js"
import gsap from 'gsap'
const containerRef = ref(null)
onMounted(() => {
  const wow = new WOW({})
  wow.init()
  // 初始设置
  gsap.set(containerRef.value, {
    scale: 0,
    opacity: 0
  })

  // 执行动画
  gsap.to(containerRef.value, {
    duration: 1, // 动画持续时间
    scale: 1, // 缩放到原始大小
    opacity: 1, // 完全显示
    delay: 0.2 // 延迟开始时间
  })
})
</script>

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

代码为vue3框架vue2写法

纯前端项目数据基于mockjs模拟实现

虚拟产品一经售出 概不退款请谅解