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

数据大屏 yekong 1251℃

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

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

开发环境

vue3+vite+js nodejs 16

分辨率

1920*1080

演示地址

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

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

效果截图

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

动画效果

项目模块

1.营业收入

使用echarts实现横向柱状图,并通过不同颜色标注最大和最小柱状图

1.营业收入

2.期间费用分布

使用雷达图实现期间费用分布

2.期间费用分布

3.净利润

使用echarts异形柱状图实现净利润

3.净利润

4.期间费用

使用echarts折线图显示期间费用

4.期间费用

5.营业成本

使用echarts柱状图显示营业成本
5.营业成本

6.5年内净利润对比

使用饼状图显示5年内净利润对比

6.5年内净利润对比

更新日志

2024年02月25日 v1.2

移除node-sass插件改为sass插件

移除lodash插件,使用原生写法代替lodash减少文件大小

数字滚动效果更新

增加jsconfig.json配置文件

调整柱状图间距避免间距太小数字显示不完整

顶部扫光动画替换为流光动画

2023年08月08日 v1.1

顶部标题背景改为帧动画

顶部标题背景改为帧动画

使用mockjs 来生成模拟数据,使用axios来进行接口请求,代替原有的写死的数据。

中间数据底座更换图片,增加gsap动画

mockjs数据生成部分代码

// 营业收入
// 使用mockjs生成 营业收入接口

{
    url: '/api/business-revenue',
    method: 'get',
    response: () => {
        const months = [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
        ]
        const data = months.map(item => {
            return {
                name: item,
                value: Mock.Random.integer(50000, 100000).toString()
            }
        })

        return {
            data,
            message: '成功',
            code: 0
        };
    },
},  

接口请求封装部分代码

// 营业收入
export function businessRevenue(data) {
    return request({
        url: '/api/business-revenue',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

async getData() {
  try {
    const res = await businessRevenue();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

顶部流光和扫光源文件

顶部流光和扫光源文件

项目依赖

"dependencies": {
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.4.0",
    "dayjs": "^1.11.7",
    "echarts": "^5.5.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "mockjs": "^1.1.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",
    "vite-plugin-mock": "^2.9.8",
    "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"
  }

项目文件目录

项目文件目录

更多可视化数据大屏

大屏数据可视化模板

源码下载

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

vue3框架 vue2写法

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

相关文件下载地址
此资源需支付 ¥50 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
公司年终财务数据看板 数据可视化大屏 vue3