vue3 数据可视化大屏 网络信息化大数据平台

开发环境

nodejs 16

开发框架

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 网络信息化大数据平台

演示demo:vue3 数据可视化大屏 网络信息化大数据平台

效果截图

视频演示

项目模块

1.综合数据分析

数字卡片效果，卡片包括图标 标题 和 数字，数字为滚动效果。

可以替换为自己需要的图标，标题和数字。

2.订单数据分析

这是一个排行榜占比效果，使用gsap实现进度条加载效果。根据数字大小自动从大到小进行排序展示。

3.数据异常次数

由echarts实现的渐变色柱状图。

4.订单列表

一个有三套三角装饰图标装饰的滚动表格，对数据进行滚动展示。

5.类型占比

echarts实现的饼状图，因为echarts的legend自定义程度不够，所以右侧使用html实现类似legend的效果。

6.数据展示分析

echarts实现的渐变饼状图，因为echarts的legend自定义程度不够，所以右侧使用html实现类似legend的效果。饼状图中心展示数组总数以及标题。

7.每月数据统计

echarts实现的仿圆柱体柱状图效果。

8.卡片数据

中间顶部为卡片数据，可以展示自己需要展示的数据内容。

9.echarts地图

中间地图是使用的echarts渲染的地图，可以通过点击地图展示自己需要展示的数据。

顶部标题

顶部标题为从两侧向中间扫光，标题为渐变色，右侧实时展示日期时间和周。

背景图

背景图为蓝色科幻装饰背景图，更多可查看数据大屏背景图.

更新日志

2023年07月30日 v1.1

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

mockjs数据生成

// 综合数据分析
export function comprehensiveDataAnalysis(data) {
    return request({
        url: '/api/comprehensiveDataAnalysis',
        method: 'get',
        data
    })
}

接口请求封装

// 综合数据分析
{
    url: '/api/comprehensiveDataAnalysis',
    method: 'get',
    response: () => {
        const titles = ['数据1', '数据2', '数据3', '数据4'];
        const data = titles.map(title => {
            return {
                title,
                num: Mock.Random.integer(1, 100),
            };
        });

        return {
            status: 200,
            message: 'success',
            data,
        };
    },
},

接口请求实例

使用await/async进行数据请求，使用gsap增加数据渲染动画

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

更多可视化数据大屏

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

源码下载

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

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