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

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

开发环境

vue3+vite+js nodejs 14

分辨率

1920*1080

演示地址

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

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

效果截图

动画效果

项目模块

1.营业收入

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

2.期间费用分布

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

3.净利润

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

4.期间费用

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

5.营业成本

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

6.5年内净利润对比

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

更新日志

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);
  }
},

更多可视化数据大屏

100个酷炫的数据可视化大屏

源码下载

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

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