2 数据可视化大屏 - 布局

本文总结了大屏设计中常用的两种布局方式:主次分布和平均分布。主次分布注重突出主要信息,通过地图与其他数据的对比展现;平均分布则适合平铺展示,常见于9宫格或12宫格布局,适用于不同屏幕比例。此外,还介绍了16:9和4:3屏幕比例的分辨率及其应用场景。
摘要由CSDN通过智能技术生成

目前大屏做了好多个,详细案例参考

YYDatav的数据可视化《精彩案例汇总》(Python&Echarts源码)_YYDataV的博客-CSDN博客

总结下行业上常用的几种大屏布局版式,主要分为两大类:

一.【主次分布】

主要用于突出显示大屏的主次信息,形成对比。比如有一个地图 chart,其他数据则用于辅助分析这个地图 chart。

布局一

 布局二

布局三

布局四

布局五

二. 【平均分布】

一般用于平铺展示,不存在主次关系,常用的有 9宫格(3*3)或 12宫格(3*4),通常用于二级页面。

1. 12宫格(3*4)适用于 16:9 宽屏

 2. 9宫格(3*3)适用于 4:3 屏幕

注:16:9 宽屏 和 4:3 的区别

16:9 是指显示器的宽高比,根据人体工程学的研究,发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形,所以电视、显示器行业根据这个的黄金比例尺寸设计产品。

16:9 比例分辨率有如下几种:

  • 1、3840×2160 (超高清 4K),它是2K投影机和 高清电视分辨率的4倍,属于超高清分辨率。
  • 2、2560X1440 (2K),数字电影联盟主导2K分辨率的标准。在数字电影制作中,2048×1556 为进入 2K 的门槛,分辨率的标准来自传统的超级35毫米电影。 
  • 3、1920×1080 (1080p全高清),是一种在逐行扫描下达到1920×1080的分辨率的显示格式。是数字电视和计算机技术的完美融合。
  • 4、1600×900,1600*900壁纸的适用范围比较小,只有15.6寸本本和20寸的液晶显示器。
  • 5、1366×768,被大多数液晶电视所采用,如一般32英寸的液晶电视分辨率通常为1366×768。

4:3 比例分辨率

常见的分辨率有640*480,800*600,1024*768,1200*900,1600*1200,1920*1440等,估计1600*1200是最大的,像1920*1440和其它更大分辨率只是显卡支持,并没有合适的屏幕与其配套。

注:参考资料

做大屏怎能离得开颜色设计?~ 具体请参考博文:

一文详细阐述UI设计颜色搭配,受益匪浅~_YYDataV的博客-CSDN博客_ui配色心理学家认为,人的第一感觉就是视觉,而对视觉影响最大的则是色彩。一图概括色彩意向:色系色彩意向红色系热情、张扬、高调、艳丽、侵略、暴力、血腥、警告,禁止橙色系明亮、华丽、健康、温暖、辉煌、欢乐、兴奋、热烈、温馨黄色系温暖、亲切、光明、疾病、懦弱、智慧、轻快绿色系希望、生机、成长、环保、.https://blog.csdn.net/lildkdkdkjf/article/details/120389349

对于 vue2 数据可视化大屏的开发,你可以使用一些常用的数据可视化库和组件来实现。以下是基本的步骤: 1. 安装 Vue2:首先确保你的项目已经安装了 Vue2,你可以使用 npm 或者 yarn 来安装。 2. 导入数据可视化库:选择适合你需求的数据可视化库,如 ECharts、Highcharts、D3.js。通过 npm 或 yarn 安装相应的库。 3. 创建数据可视化组件:在 Vue2 中,创建一个数据可视化组件。你可以使用 Vue 的单文件组件 (.vue) 来定义组件的结构、样式和行为。 4. 集成数据可视化库:在数据可视化组件中使用相应的库来实现图表和可视化效果。根据库的文档和示例,调用相应的 API 来绘制图表、处理数据和交互等。 5. 绑定数据:将需要展示的数据绑定到数据可视化组件的 props 或者 data 属性上,以便在绘制图表时使用。 6. 样式和布局:根据需求进行样式和布局的调整,可以使用 CSS 或者库提供的配置项来自定义图表的外观。 7. 动态更新:如果需要实现动态更新图表,可以通过监听数据变化或者与后端进行数据交互,来更新图表并重新渲染。 8. 其他功能:根据具体需求,可以实现一些其他的功能,如数据筛选、交互操作、数据导出等。 需要注意的是,数据可视化大屏的开发需要一定的前端基础和对数据可视化库的了解。在开发过程中,可以参考库的文档和示例,以及搜索相关的教程和案例来帮助你更好地实现需求。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYDataV软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值