关于DataV大屏分辨率那些事

简介: 关于DataV如何选择合适分辨率的问题,实践中经常遇到一些疑惑。故写此文进行澄清,希望能够帮助各位朋友合理的选择适合自己业务场景的分辨率。

首先需要理解的是,DataV是基于Web浏览器的。加载完成开始,一共会涉及到3个重要的分辨率。 这三个分辨率分别是
1、大屏逻辑分辨率
2、显卡输出信号分辨率
3、实际物理设备分辨率

先说结论:
划重点
一、大屏逻辑分辨率 = 显卡输出信号分辨率

二、大屏逻辑分辨率长宽比尽可能接近物理设备分辨率长宽比

** 满足上面两点的情况下,即可在绝大多数情况下取得最优效果。

大屏逻辑分辨率就是DataV编辑界面中的分辨率
image

显卡输出信号分辨率:
一般来说在你的显卡设置里:
image

大屏物理分辨率:
没啥可说的……就是实际物理设备的分辨率;(这个分辨率大多数情况下无关紧要,但是长宽比极端重要

这里可能出现两种场景:
1、最终展示设备是类似于电视、投影这类的长宽比接近16:9 的,此时一般单路信号输出配合设备的最大分辨率即可。
2、最终展示设备是通过拼屏器控制的真正意义上的大屏,一般来说长宽比会显著高于16:9 可能是32:9甚至更多。
此时请考虑使用多路信号进行输出,而不是强行使用单路信号自定义分辨率。

选项2.1、多路信号:

多路信号的输出设置和同时使用多台显示器时的显卡配置一毛一样;
几个注意点:
1、尽可能使用统一的接口:HDMI或者 DP (要么都用HDMI 要么都用DP;一般来说两路基本都是够用的)
2、每路信号的分辨率和路数尽量以正好拼满实际分辨率为佳.

选项2.2、单路信号:不推荐

接下来进入实践环节,举个栗子:
实际物理设备是由每块1280X720的物理小屏,8X3块屏拼成,用一个可接受24路信号的物理拼屏器控制。控制电脑的显卡可用输出口为3个HDMI;那么大屏逻辑分辨率和显卡输出信号分辨率应该如何设置呢?

错误姿势:直接算设备的物理分辨率 1280X8; 720X3; 即10240 X 2160并将其作为大屏的逻辑分辨率;首先显卡正常情况下不可能到这个分辨率,信号输出的时候本身就会经过一次压缩;其次DataV是跑在Chrome这个以内存管理稀烂著称的浏览器里(加上Chrome单个线程只有1.4G内存限制)这么大分辨率分分钟崩给你看,其三开发过程中肯定卡的欲仙欲死,设计师和前端工程师每天来回改需求已经很可怜了,为了关爱设计师,不要用这么高的分辨率折磨他们。

下面是正确的打开姿势:
首先计算物理设备分辨率的长宽比(16X8):(9X3), 可以看到长宽比是128:27,算下来约等于4.74;16:9约等于1.78;可以看到4.74/1.78约等于2.7 距离3不远。
那么此时两种方案:
1,选择近似于48:9的逻辑分辨率

2,干脆拆成3块长宽比为1.6上下逻辑分辨率的独立大屏。

那么具体分辨率应该是多少呢?
先说方案二、如果选择3块独立大屏的方案,非常简单,一般情况下,直接按每块1920X1200或者调高一档就够了;一般的拼屏器大屏建设时都会照顾到常规电脑直接投屏的效果,用同样的效果展示大屏应该是足够令人满意的。
如果选择方案一,
需要注意两点:1、不要顶满显卡每路信号的输出分辨率,原因与错误做法相同,太卡;2、具体的选择可以在每路1920X1200 基础上稍微降低一至两档,例如1280X800,即3840X800,可以看到这个分辨率正好接近4.8,完美!

最后是懒人福利:
Step1: 计算实际设备分辨率长宽比 X
Step2:用X除以常用显卡输出分辨率的长宽比;选择结果最接近整数的值Y;
Step3:将Y向上取整得到Z,检查Z是否不大于显卡可用的输出口,如果结果为真,则选取Y对应的输出分辨率,作为逻辑分辨率及显卡输出分辨率。如果为假,选取可以让Z值低一点的Y值,Or更换显卡Or拆成多个独立大屏使用不同的电脑进行投送。

image

---完---

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
4月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
116 0
|
4月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
4月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
277 1
|
4月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
162 2
react+datav+echarts实现可视化数据大屏
|
9月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
539 0
|
12月前
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
790 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1493 0
使用阿里云dataV实现大屏自动轮播
|
JSON 编解码 监控
使用dataV还原销售实时监控大屏
使用dataV还原销售实时监控大屏
400 0
使用dataV还原销售实时监控大屏
|
数据可视化
宜搭&DataV在一起啦!宜搭大屏可视化正式全量上线
● 2021年10月,随着宜搭 3.0 的正式发布,为了让钉钉上的每一个企业数字化的工作方式被看见,在云栖大会上,宜搭在酷数据方面,正式“牵手”DataV,发布了宜搭大屏的能力; ● 2021年12月,宜搭 & DataV在产品侧充分融合无缝衔接,现,正式面向宜搭全量付费用户开放,真正让宜搭用户一键掌握专业炫酷的数据可视化表现力!
3552 1
|
JSON 监控 数据可视化
使用DataV模板搭建企业销售实时监控大屏
快速学习使用DataV模板搭建企业销售实时监控大屏
817 0
使用DataV模板搭建企业销售实时监控大屏