vue3 数据可视化大屏 物流大数据可视化大屏

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

开发环境

nodejs 16

开发框架

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 物流大数据可视化大屏

演示demo:vue3 数据可视化大屏 物流大数据可视化大屏

效果截图

视频演示

项目模块

1.业绩增长分析

使用异形柱状图渲染数据

2.车辆使用情况

使用横向柱状图来渲染我们需要的效果

3.日报峰值增长

使用折线图来显示日报峰值增长

4.商品流通数据

使用表格渲染列表数据，当数据过多的时候，添加滚动效果。

5.业绩增长分析

使用不同颜色的底座图对数字进行装饰。

6.商品目的地排行

使用柱状图渲染数据排行，最大和最小用特殊颜色标注。

弹窗模块

增加弹窗模块，点击后可以看到弹窗列表

效果描述

顶部扫光动画
动画背景视频

数据模拟

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

mockjs数据生成部分代码

    // 业绩增长分析接口
    // 使用mockjs生成 业绩增长分析接口  name 为数组['票数', '件数', '营业额', '接待数', '咨询数', '司机总数', '库存量', '配送量', '入库量'] value 1-100随机

    {
        url: '/api/performance',
        method: 'get',
        response: () => {
            const names = ['票数', '件数', '营业额', '接待数', '咨询数', '司机总数', '库存量', '配送量', '入库量'];
            const data = names.map(name => {
                return {
                    name,
                    value: Math.floor(Math.random() * 100) + 1 // 1到100的随机数
                };
            });
            return {
                data,
                message: '成功',
                code: 0
            };
        },
    },

接口请求封装部分代码

// 业绩增长分析接口
export function performance(data) {
    return request({
        url: '/api/performance',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

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

更新日志

2024年04月21日 v1.3

1.删除node-sass依赖
2.echarts更新到5.4.0
3.业绩增长分析增加粒子效果
4.删除多余字体
5.删除用不到的图片资源

2023年11月01日 v1.2

增加弹窗

readme.md增加说明

更多可视化数据大屏

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

源码下载

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

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