vue 数据可视化大屏页面布局写法

2023-04-03 07:44| 来源: 网络整理| 查看: 265

vue3 数据可视化大屏项目开发前，我们需要先对大屏进行布局，把整体框架给搭建起来，然后一块作为，其他区域每一块作为一个组件单独来写，最后就像堆积木一样，将其放在对应的位置这样一个数据大屏页面就完成了。

数据可视化大屏页面布局

头部和主体

从上面的数据大屏设计图来看，我们可以先分为两部分，头部和身体两部分。

头部按照设计图来宽度百分百高度也按照设计图的高度来。

下面的主体身体部位我们也是按照宽度百分百高度为100-头部高度-底部空余，这就是主体的大小了。

vue 数据可视化大屏页面布局

实现代码

我们通过css 将主体宽高设置为100%，然后通过css的calc方法减去头部和底部的高度就是主体了。

html css .homeMain { width: 100%; position: relative; z-index: 100; height: calc(100% - 130px); margin-top: -54px; display: flex; background: red; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; } 数据大屏主体布局

头部和主体布局搞定后，我们就可以处理中间部分了，根据设计图来看，我们可以先把设计图分为左中右三部分。左中右中间都有一些间隔，我们通过百分比计算。

数据大屏主体布局

通过像素来看，左侧宽度为472，距离左侧30 距离中间24 (472+30)/页面宽度1920 约等于26% 右侧宽度为472，距离右侧30 距离中间24 (472+30)/页面宽度1920 约等于26%

html css

我们通过css实现,通过flex来让其布局

左侧：width: calc(26% - 30px); margin-left: 30px; 中间：width: calc(48% - 24px - 24px); margin-left: 30px; 右侧：width: calc(26% - 30px); margin-right: 30px;

.homeMain { width: 100%; position: relative; z-index: 100; height: calc(100% - 130px); margin-top: -54px; display: flex; background: red; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; .homeMainLeft { margin-left: 30px; height: 100%; width: calc(26% - 30px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; } .homeMainCenter { height: 100%; width: calc(48% - 24px - 24px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; } .homeMainRight { margin-right: 30px; height: 100%; width: calc(26% - 30px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; } } 分析封装

通过分析，我们把他们分为10个模块，这10个模块的都有标题以及一个背景边框，所以我们把这一部分单独封装为一个组件。分析封装

这样整个框架就基本搭建起来了，然后就是对内部进行填充分析封装

html css .homeMain { width: 100%; position: relative; z-index: 100; height: calc(100% - 130px); margin-top: -54px; display: flex; //background: red; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; .homeMainLeft { margin-left: 30px; height: 100%; width: calc(26% - 30px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; .homeMainLeftItem { width: 100%; height: calc(33.33% - 15px); position: relative; } } .homeMainCenter { height: 100%; width: calc(48% - 24px - 24px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; .homeMainCenterItem { width: 100%; height: calc(33.33% - 15px); position: relative; } .homeMainCenterItem2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; .homeMainCenterItemInner { position: relative; width: calc(50% - 12px); height: 100%; } } } .homeMainRight { margin-right: 30px; height: 100%; width: calc(26% - 30px); position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; flex-direction: column; align-content: flex-start; .homeMainRightItem { width: 100%; height: calc(33.33% - 15px); position: relative; } } }

经过上面的步骤，整个数据可视化大屏的整体框架就搭建好了，然后我们开始针对性的来写对应模块的组件了。vue 数据可视化大屏页面布局写法到这里就分享完毕了。框架配置好以后，接下来我们就要添加入场动画效果了。

更多数据可视化大屏教程

vue3 vite 数据可视化大屏教程

喜欢 (0)

【本文地址】

公司简介

联系我们