数据可视化大屏的页面布局以及自适应

这篇具有很好参考价值的文章主要介绍了数据可视化大屏的页面布局以及自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在做数据可视化大屏之前,我们需要考虑到页面的布局问题以及页面缩放自适应问题,下面分别就这两个方面讲解。

页面布局

类似这种页面区块的明显划分,常用的布局方式有两种:
1、flex布局
2、grid布局

grid布局
grid布局可以按区块来划分页面布局,并且可以在划分布局的基础上配置区块在页面的占比大小。

关于grid的官方文档说明:https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

grid属性:

属性 说明
grid-template-columns 配置y轴的区块数量和占比
grid-template-rows 配置x轴的区块数量和占比
grid-area 来配置区块在x、y轴的占比大小。
grid-column-gap y轴的区块间隙
grid-row-gap x轴的区块间隙

我们可以使用网格布局实现如下效果:
数据可视化大屏的页面布局以及自适应
代码如下:

<div class="container">
         <div class="embody">
               <div class="head-title"></div>
               <div class="chunk">
                  <div class="left-chunk">
                     <div class="left-top"></div>
                     <div class="left-center"></div>
                     <div class="left-bottom"></div>
                  </div>
                  <div class="center-chunk">
                    <div class="center-main"></div>
                    <div class="center-bottom"></div>
                  </div>
                  <div class="right-chunk">
                    <div class="right-top"></div>
                    <div class="right-center-top"></div>
                    <div class="right-center-bottom">
                        <div class="right-center-bottom-inner-left"></div>
                        <div class="right-center-bottom-inner-right"></div>
                    </div>
                    <div class="right-bottom"></div>
                  </div>
               </div>
         </div>
    </div>
.container{
    width: 100%;
    height: 100vh;
    background: #101129;
}

.embody{
    width: 100%;
    height: 100%;
    border: 1px solid red;
    .head-title{
        width: 100%;
        height: 80px;
        border: 1px solid cyan;
        background: url('../../assets/logo.png') no-repeat center / 100%;
    }
    .chunk{
        width: 100%;
        height: calc(100% - 80px);
        border: 1px solid gold;
        display: grid;
        grid: repeat(5,1fr) / repeat(7,1fr);  /* x / y */
        grid-column-gap : 10px;
        grid-row-gap : 0px;

        .left-chunk { grid-area :  1 / 1 / 6 / 3; border: 1px solid cyan;}
        .center-chunk {grid-area : 1 / 3 / 6 / 6; border: 1px solid red;}
        .right-chunk { grid-area : 1 / 6 / 6 / 8; border: 1px solid violet;}
    }

    .left-chunk{
        display: grid;
        grid: 1fr 4fr 3fr / repeat(1,1fr);
        grid-column-gap:0px;
        grid-row-gap:10px;
        .left-top{ border: 1px solid red;}
        .left-center{border: 1px solid red;}
        .left-bottom{border: 1px solid red;}

    }
    .center-chunk{
        display: grid;
        grid: 5fr 3fr / 1fr;
        grid-column-gap : 0px;
        grid-row-gap : 10px;
        .center-main{border: 1px solid red;}
        .center-bottom{border: 1px solid red;}
    }
    .right-chunk{
       display: grid;
       grid: 1 repeat(3,2fr) / 1fr;
       grid-column-gap:0px;
       grid-row-gap:10px;
       >div{border: 1px solid red;}

       .right-center-bottom{
        display: grid;
        grid: 1fr / repeat(2,1fr);
        grid-column-gap : 10px;
        grid-row-gap : 0px;
        >div{border:1px solid red;}
       }

    }
}

这种布局的优点是可以根据页面的缩放自动调整大小,但需要注意的是,页面的区块内的元素不会自动缩放大小。
在使用grid网格布局时,网格内的元素也要使用相对大小。或者,给网格外面嵌套一层大容器,将网格布局的大小固定住。

flex布局
flex布局就是利用flex的比例大小来给页面进行区块划分

flex的文档说明:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

属性说明:

属性 说明
display:flex 开启flex布局
flex:1 对应区块的占比大小
align-items 元素在交叉轴的对齐方式
justify-content 元素在x轴的排列方式
flex-wrap 是否允许元素换行

我们可以使用flex布局实现如下效果:
数据可视化大屏的页面布局以及自适应
代码如下:

<div class="embody">
     <!-- 视图区域 -->
     <div class="chunk">
          <!-- 左侧区域 -->
          <div class="left-chunk">
	          <div class="left-top"></div>
	          <div class="left-center"></div>
	          <div class="left-bottom"></div>
          </div>
          <!-- 中间区域 -->
          <div class="center-chunk"></div>
          <!-- 右侧区域 -->
          <div class="right-chunk"></div>
     </div>
</div>
.embody{
    min-width: 1024px;
    max-width: 1920px;
    min-height: 780px;
    height: 100%;
    border: 1px solid red;
    padding: 0px 1rem 0px 1rem;
    flex-wrap: wrap-reverse;
    .chunk{
        width: calc(100% - 2rem);
        border: 1px solid gold;
        margin-top: -1.5rem;
        display: flex;
        margin: 0 auto;
        .left-chunk{flex: 3;}
        .center-chunk{flex: 4;}
        .right-chunk{flex: 3;}
    }

    .left-chunk{
        .left-top{ 
            height: 10rem;
            box-sizing:border-box;  
            border: 1px solid red
        }
        .left-center{
            box-sizing: border-box;  /* 去掉内边距和边框的展位,全都计算在width中 */
            width: 100%;
            height: 40rem;
            margin-top: 1rem;
            border: 1px solid red;
        }
        .left-bottom{
            height: 20rem;
            margin-top: 1rem;
            border: 1px solid red;
        }

    }
    .center-chunk{
        border: 1px solid red;
        .center-main{border: 1px solid red;}
        .center-bottom{border: 1px solid red;}
    }
    .right-chunk{
       display: grid;
       grid: 1 repeat(3,2fr) / 1fr;
       grid-column-gap:0px;
       grid-row-gap:10px;
       border: 1px solid red;
       >div{border: 1px solid red;}

       .right-center-bottom{
        display: grid;
        grid: 1fr / repeat(2,1fr);
        grid-column-gap : 10px;
        grid-row-gap : 0px;
        >div{border:1px solid red;}
       }
    }
}

在这两种布局方式上,优先选择flex布局,因为grid布局会随着页面的缩放而自动更改大小,这种大小的变化只是页面划分的区块变化,在此基础之上还要实际更改区块内容的大小缩放问题


页面自适应

由于页面的窗口大小是不确定的,所以我们要使用相对单位来设置大小,css中有一个rem的概念,rem也就是根据根节点字体大小单位而来的相对单位,例如:根节点的字体大小为20px,那么1rem = 20px,基于rem,我们要根据窗口的大小来计算根节点的字体大小,具体的实现方式如下:

// 自调用
(function(){
    /* 页面加载获取页面宽度 */
    let setFont = function () {
        // 因为要定义变量可能和别的变量冲突,造成污染,所以用自调用函数
        let html = document.documentElement; // 获取html
        // 获取html宽度
        let width = html.clientWidth;

        // 判断,限制最小和最大宽度(这一步可省略)
        if(width < 1024) width = 1024
        if(width > 1920) width = 1920

        // 设置html的基准值, 1920 / 80 = 24px也就是1rem=24px
        let fontSize = width / 153 + 'px'  // 那么这里屏幕大小1530px,1rem=10px
        
        // 设置给html
        html.style.fontSize = fontSize;
    }
    setFont(); // 调用

    /* 页面改变的时候需要重新设置 */
    // 尺寸改变事件,window.onresize为当浏览器重置大小的时候执行的函数
    window.onresize = function () {
        setFont();
    }
})()

将该文件引入main文件即可。


如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~文章来源地址https://www.toymoban.com/news/detail-448512.html

到了这里,关于数据可视化大屏的页面布局以及自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【11个适合毕设的Python可视化大屏】用pyecharts开发拖拽式可视化数据大屏

    你好,我是@马哥python说,一枚10年程序猿。 以下是我近期用Python开发的原创可视化数据分析大屏,非常适合毕设用,下面逐一展示:(以下是截图,实际上有动态交互效果哦) 以下大屏均为@马哥python说的个人原创,请勿转载。 以上大屏的开发技术流程如下: 1、爬虫采用

    2024年02月03日
    浏览(68)
  • python基于大数据的手机分析系统与可视化 -可视化大屏分析

    前言 该系统采用了多种数据源,包括用户行为数据、社交数据、市场趋势数据等,通过数据挖掘、统计分析等手段,对这些数据进行分析和建模。其中,用户行为数据包括用户使用手机的频率、时间、地理位置、应用使用情况等,社交网络数据包括用户在交网络上的行为、好

    2024年02月03日
    浏览(48)
  • 大数据毕设 大数据招聘岗位数据分析与可视化 - 爬虫 python 大屏可视化

    # 1 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。 为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项

    2024年02月10日
    浏览(55)
  • 大数据可视化大屏电子沙盘合集

    使用HTML、CSS、JavaScript,实现的可视化大数据电子沙盘 体验地址(请全屏查看): 智慧社区:https://zhoukaiwen.com/proj/dataVIS/community 金融行业:https://zhoukaiwen.com/proj/dataVIS/finance 智慧门店:https://zhoukaiwen.com/proj/dataVIS/store 项目说明 项目基于html/css/js,包含行业: 智慧政务 智慧社

    2024年02月06日
    浏览(47)
  • 新冠疫情数据可视化分析大屏

    新冠疫情的爆发对全球造成了深远的影响,实时监控和数据分析成为公共卫生管理的重要组成部分。为了更好地追踪疫情动态,本项目旨在开发一个集疫情数据采集、处理、分析与可视化于一体的大屏监控系统。 本项目采用Python Django作为后端框架,Vue.js作为前端框架,结合

    2024年01月19日
    浏览(59)
  • springboot+echarts+mysql制作数据可视化大屏(滑动大屏)

     作者水平低,如有错误,恳请指正!谢谢!!!!! 项目简单,适合大学生参考 分类专栏还有其它的可视化博客哦! 专栏地址:https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482 目录  一、数据源 二、所需工具 三、项目框架搭建 四、代码编写 温度堆叠折线图

    2024年02月11日
    浏览(42)
  • 基于Python的疫情数据可视化(matplotlib,pyecharts动态地图,大屏可视化)

    有任何学习问题可以加我微信交流哦!bmt1014 1、项目需求分析 1.1背景 2020年,新冠肺炎疫情在全球范围内爆发,给人们的健康和生命带来了严重威胁,不同国家和地区的疫情形势也引起了广泛的关注。疫情数据的监测和分析对疫情防控和科学防治至关重要。本报告以疫情数据

    2024年02月05日
    浏览(58)
  • 数据可视化大屏模板 | 保姆级使用教程

    近来很多朋友私信咨询怎么下载使用数据可视化大屏模板,在这里就给大家做一个相对简单的教程总结。有需要的朋友记得先收藏保存,以便不时之需。 数据可视化大屏制作软件:奥威BI系统 数据可视化报表模板板块:模板秀 主要操作:点击、拖拉拽 适用人群以及场景:所

    2024年02月07日
    浏览(42)
  • Python数据可视化大屏最全教程(全)

    阅读本文大约需要3分钟 主要内容:数据分析。 适用人群:Python初学者,数据分析师,或有志从事数据分析工作的人员。 准备软件:Anaconda(Spyder:代码编译)、Navicat Premium 12(数据库)。 从事IT项目管理这么多年,基本上已经遗弃编程技能,但从2019年开始接触Python,深深地

    2024年02月01日
    浏览(47)
  • 大屏数据可视化的设计流程及原则

    随着数字经济的快速发展和信息化在各行业各领域的深入推进,可视化大屏在各行各业得到越来越广泛的应用。可视化大屏不再只是电影里奇幻的画面,而是被实实在在地应用在政府、商业、金融、制造、交通、城市等各个行业的业务场景中,切切实实地实现着大数据的价值

    2024年01月19日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包