[JavaScript知识库]2 数据可视化大屏 - 布局

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

YYDatav的数据可视化《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客??数据可视化??：基于 Echarts + Vue 实现的大屏范例【14】_小魔怪的博客-CSDN博客_echarts数据可视化??数据可视化??：基于 Echarts + Python 实现的大屏范例【13】国庆黄金周旅游监测???来了~_小魔怪的博客-CSDN博客??数据可视化??：基于 Echarts + Python 实现的大屏范例【12】（你想要的酷炫世界地图在这里了！）_小魔怪的博客-CSDN博客数据可视化：基于 Echarts + Python 实现的动态实时大屏范例【十一】https://yydatav.blog.csdn.net/article/details/120705616?spm=1001.2014.3001.5502总结下行业上常用的几种大屏布局版式，主要分为两大类：

一.【主次分布】

主要用于突出显示大屏的主次信息，形成对比。比如有一个地图 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