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

开发环境

nodejs v16.20.0

开发框架

vue3+vite+js

分辨率

1920*1080

演示地址

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

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

效果截图

动画效果

项目模块

1.运营分析

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

2.视频监控

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

3.跨域车辆分析

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

4.运营情况

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

5.要素预警

列表展示，数组滚动。

6.服务呈现

使用饼状图进行数据展示

7.地区分布

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

其他说明

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

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