今天来讲讲 数据大屏自适应如何实现。

我们知道，根据不同的业务场景，做一个好的大屏需要考虑大屏布局、图表展现、交互动效、操作是否简单、是否能自适应等等因素。其中大屏是否能自适应也是一个比较重要的因素。

因为大屏不仅需要支持PC、手机、平板、液晶显示屏、拼接大屏等多种终端展示，支持单屏和多屏展现，还需要在不同的设备上切换。

在不同的分辨率下，用户往往有自适应的烦恼，即大屏页面需根据不同的分辨率进行自适应，达到了可以一页用多屏的效果。

4.1一页用多屏.png

而要实现这种自适应的效果，选择一个好的BI工具尤为重要。比如Smartbi的自助仪表盘，它支持高宽自适应、宽度自适应和自由布局三种布局方式，可以根据需要选择合适的布局方式来完成仪表盘或是大屏的制作。

高宽自适应

设置了高宽自适应后，仪表盘会根据需要填充显示仪表盘的窗口的大小自动调节；此种布局方式适用于单屏展示的仪表盘，比如CEO看板；

4.2CED看板.png

宽度自适应

设置了宽度自适应后，仪表盘会自动调整显示宽度以适应不同设备的宽度，但高度固定以实现垂直滚动效果；此种布局方式是流式布局，一般适用于报告型的仪表盘，汽车销售分析报告；

4.3分析报告.png

自由布局

大屏可视化编辑使用的是自由布局，包括设置宽、高以及缩放方式等。自由布局包括四种缩放方式。

1. 等比缩放宽度铺满：宽度铺满全屏，高度按比列自动缩放。

2. 等比缩放高度铺满：高度铺满全屏，宽度按比列自动缩放。

3. 全屏铺满：不保持高宽比例，按当前屏幕大小显示全部内容

4. 不缩放：保持画布原先的大小。

4.4大小.png

ITPub博客

数据可视化大屏自适应，满足不同分辨率需求