vue3 数据可视化大屏 企业经营数据看板
id
304
运行环境
nodejs 23
开发框架
vue3 vite js
分辨率
1920*1080
演示地址
vue3 数据可视化大屏 企业经营数据看板
演示demo:vue3 数据可视化大屏 企业经营数据看板
效果截图
视频演示
核心经营指标
数字卡片展示核心经营指标
营收与利润趋势
折线图展示营收与利润趋势
营收
净利润
现金流入流出
柱状图展示现金流入流出
人力资源结构
饼状图展示人力资源结构
研发
生产
销售
管理
销售业绩与销售漏斗
漏斗图展示销售业绩与销售漏斗
线索
意向
报价
成交
质量管控趋势
折线图展示质量管控趋势
合格率 缺陷率 返工率
市场营销效果分析
柱状图折线图展示市场营销效果分析
渠道ROI
获客成本
风险控制指标
雷达图展示风险控制指标
流动性风险
合规风险
信用风险
市场风险
各营销渠道效果分析
柱状图展示各营销渠道效果分析
线上
线下
代理
自营
客户分层与满意度
柱状图折线图展示客户分层与满意度
高价值客户
活跃客户
客户满意度
信用风险与坏账率
柱状图折线图展示信用风险与坏账率
逾期账款
坏账率
项目依赖
{
"name": "304_qiyejingying_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",
"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="itemBody">
<div class="homeMainTop">
<div class="item wow fadeInDown" :data-wow-delay="0.5*index+'s'" v-for="(item,index) in topList" :key="index">
<div class="icon">
<div class="iconbg">
<sequence></sequence>
</div>
<i :class="item.icon" :ref="`icon-${index}`"></i>
</div>
<div class="itemRight">
<div class="itemRightName">
<span>{{ item.name }}</span>
</div>
<div class="itemRightNum">
<gsapNumDot :number="item.value" :delay="0.5*index" :precision="item.precision" :comma="true"></gsapNumDot>
<span v-if="item.unit">{{ item.unit }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { gsap } from "gsap";
import gsapNumDot from "@/components/gsapNum/index.vue";
import sequence from './sequence/index.vue'
export default {
name: "title",
data() {
return {
topList: []
}
},
mounted() {
// 页面加载时生成随机数据
this.generateRandomData();
// 添加图标动画
this.startIconAnimation();
// 每30秒更新一次数据（可根据需要调整间隔）
this.dataUpdateTimer = setInterval(() => {
this.generateRandomData();
}, 30000);
},
beforeDestroy() {
// 清除定时器
if (this.dataUpdateTimer) {
clearInterval(this.dataUpdateTimer);
}
// 清除GSAP动画
gsap.killTweensOf("i[class^='icon-']");
},
methods: {
getRandomFloat(min, max, precision) {
const random = Math.random() * (max - min) + min;
return parseFloat(random.toFixed(precision));
},
// 生成随机财务数据
generateRandomData() {
this.topList = [
{
name: '营业收入',
value: this.getRandomFloat(800, 1500, 2), // 800万~1500万，保留2位小数
unit: '万元',
precision: 2,
icon: 'icon-shouru' // 营收图标
},
{
name: '净利润',
value: this.getRandomFloat(80, 250, 2), // 80万~250万，保留2位小数
unit: '万元',
precision: 2,
icon: 'icon-jinglirun' // 利润图标
},
{
name: '经营现金流',
value: this.getRandomFloat(120, 400, 2), // 120万~400万，保留2位小数
unit: '万元',
precision: 2,
icon: 'icon-xianjinliu' // 现金流图标
}
];
},
// 启动图标动画
startIconAnimation() {
this.$nextTick(() => {
// 为每个图标创建上下晃动动画
this.topList.forEach((item, index) => {
const iconElement = this.$refs[`icon-${index}`];
if (iconElement && iconElement[0]) {
gsap.to(iconElement[0], {
y: -8,
duration: 1.5,
ease: "sine.inOut",
yoyo: true,
repeat: -1,
delay: index * 0.2
});
}
});
});
}
},
components: {gsapNumDot, sequence}
}
</script>
大屏数据可视化模板
更多背景图资源
项目文件目录
源码下载
项目基于vue3+vite+js开发 nodejs 23
获取代码前请确保具备相关开发基础
本项目为纯前端大屏，无后端支持
默认数据为模拟数据，实际使用时需接入真实数据源
请在确认需求后再获取相关代码
