vue3 数据可视化大屏 公司年终财务数据看板

id

302

运行环境

nodejs 23

开发框架

vue3 vite js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 公司年终财务数据看板

演示demo:vue3 数据可视化大屏 公司年终财务数据看板

效果截图

视频演示

收入趋势

折线图展示收入趋势

实际收入
预算收入

成本分析

柱状图展示成本分析

直接成本
间接成本
毛利

营业成本结构

饼状图展示营业成本结构

直接生产成本
管理费用
研发支出
人工成本
销售费用

客户收入分析

饼状图展示客户收入分析

前五大客户
流失客户
新客户
普通客户

资本支出与回报

柱状图展示资本支出与回报

税负及合规

横向柱状图展示税负及合规

设备
厂房
研发
并购
市场拓展

现金流管理

折线图展示现金流管理

经营现金流
投资现金流
筹资现金流

财务健康度评估

雷达图展示财务健康度评估

流动比率
速动比率
利息保障
营运效率
资产负债率

关键数据

数字卡片展示

EBITDA
ROE
毛利率
总收入
净利润
同比增长率
环比增长

项目依赖

{
  "name": "302_gongsinianzhongcaiwu_vue3",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-qiniu": "vite build && node ./qiniu.js",
    "preview": "vite preview"
  },
  "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",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "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",
    "three": "^0.178.0",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "wow.js": "^1.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.0.0"
  }
}

部分代码

<template>
  <div class="home">
    <!--    粒子漂浮装饰-->
    <bgAnimate2></bgAnimate2>
    <item8></item8>
    <top class="wow fadeInDown" name="公司年终财务数据看板"></top>
    <div class="homeMain">
      <div class="homeMainl">
        <div class="item1">
          <item name="收入趋势" icon="icon-shouru" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="成本分析" icon="icon-chengben" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="营业成本结构" icon="icon-yingye" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainc">
        <div class="item1" ref="item2Ref">

        </div>
        <div class="item2">
          <div class="item2Inner">
            <item name="现金流管理" icon="icon-xianjinliu" :duration="0.5" :delay="1">
              <item7></item7>
            </item>
          </div>
          <div class="item2Inner">
            <item name="财务健康度评估" icon="icon-caiwu" :duration="0.5" :delay="1">
              <item9></item9>
            </item>
          </div>
        </div>
      </div>
      <div class="homeMainr">
        <div class="item1">
          <item name="客户收入分析" icon="icon-kehu" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="资本支出与回报" icon="icon-ziben" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="税负及合规" icon="icon-shuifu" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </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'
import bgAnimate2 from "@/components/bgAnimate2/index.vue";
const item2Ref = ref(null)

// 生命周期钩子
onMounted(() => {
  const wow = new WOW({})
  wow.init()
  // GSAP 动画：从小到大的缩放效果
  if (item2Ref.value) {
    gsap.fromTo(item2Ref.value,
        {
          scale: 0,
          opacity: 0,
          transformOrigin: "center center"
        },
        {
          scale: 1,
          opacity: 1,
          duration: 0.8,
          delay: 0.5,
          ease: "back.out(1)"
        }
    )
  }
})
</script>

大屏数据可视化模板

数据可视化大屏模板

更多背景图资源

数据可视化大屏背景图

项目文件目录

源码下载

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

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

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

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

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