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

数据大屏 yekong 1753℃

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

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

开发环境

nodejs 16

开发框架

vue3+vite+js

分辨率

1920*1080

演示地址

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

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

效果截图

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

视频演示

项目模块

1.业绩增长分析

使用异形柱状图渲染数据

1.业绩增长分析

2.车辆使用情况

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

2.车辆使用情况

3.日报峰值增长

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

3.日报峰值增长

4.商品流通数据

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

4.商品流通数据

5.业绩增长分析

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

5.业绩增长分析

6.商品目的地排行

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

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开发,购买代码请确保有相关开发基础

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

相关文件下载地址
此资源需支付 ¥100 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (1)
物流大数据可视化大屏 - 数据可视化大屏vue3