固废全过程 数据可视化大屏 vue3

数据大屏 yekong

vue3 数据可视化大屏 固废全过程

开发环境

nodejs v16.20.0

开发框架

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 固废全过程

演示demo:vue3 数据可视化大屏 固废全过程

效果截图

vue3 数据可视化大屏 固废全过程

动画效果

项目模块

1.运营分析

包括描述以及数字信息,有3个tab类型,每次选择都会触发mockjs接口请求刷新数据。

运营分析

2.视频监控

使用数字底座,以及video.js实现视频播放器

视频监控

3.跨域车辆分析

表格展示数据,增加了滚动效果。

跨域车辆分析

4.运营情况

echarts柱状图,每次切换tab按钮都会触发接口请求。

运营情况

5.要素预警

列表展示,数组滚动。

5.要素预警

6.服务呈现

使用饼状图进行数据展示

6.服务呈现

7.地区分布

使用threejs绘制的3d饼状图,通过接口请求获取数据后,鼠标移动到对应的区域后,会显示接口返回的区域数据。

7.地区分布

其他说明

1.使用mockjs 来生成模拟数据,使用axios来进行接口请求。

mockjs数据生成

    // 运营分析
    //
    // name 累计产生量 数据随机1-5
    // name 累计转移量 数据随机1-5
    // name 累计库存量 数据随机1-500
    // name 危废产生种类 数据随机1-20
    // name 累计企业数 数据随机1-100
    // name 计转移联单 数据随机1-20

    {
        url: '/api/operationanalysis',
        method: 'get',
        response: () => {
            let data = Mock.mock({
                'data|6': [{
                    'name|+1': [
                        '累计产生量',
                        '累计转移量',
                        '累计库存量',
                        '危废产生种类',
                        '累计企业数',
                        '计转移联单'
                    ],
                    'value|1-100': 50
                }]
            })

            for (let i = 0; i < data.data.length; i++) {
                switch (data.data[i].name) {
                    case '累计产生量':
                    case '累计转移量':
                        data.data[i].value = Mock.Random.integer(1, 5)
                        break;
                    case '累计库存量':
                        data.data[i].value = Mock.Random.integer(1, 500)
                        break;
                    case '危废产生种类':
                    case '计转移联单':
                        data.data[i].value = Mock.Random.integer(1, 20)
                        break;
                    case '累计企业数':
                        data.data[i].value = Mock.Random.integer(1, 100)
                        break;
                    default:
                        break;
                }
            }
            return {
                status: 200,
                message: 'success',
                data: data.data,
            };
        },
    },

接口请求封装

// 运营分析
export function operationanalysis(data) {
    return request({
        url: '/api/operationanalysis',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

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

其他效果

使用threejs实现的3d图片旋转效果,threejs 3d旋转的图片效果

模块采用了自上而下 类似瀑布流的加载效果。vue3 数据可视化大屏实现自上而下展开的动画效果

数据可视化大屏顶部 采用了扫光动画效果 数据可视化大屏顶部组件 - 固废全过程

更多可视化大屏实例

酷炫的数据可视化大屏模板

源码下载

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

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

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