反饋已提交
網絡繁忙
布局方式是指决策报表 body 框架内所有组件的放置方式,包括自适应布局和绝对布局。布局方式下又分不同的缩放逻辑,如下表所示:
缩放逻辑不同,浏览器端报表的自适应效果也不同,所以设计决策报表时,选择一个合适的布局和缩放是至关重要的。本文将介绍这四种方式的区别和应用场景。
body 自适应布局和绝对布局下,body 框架内组件的放置方式是不同的,如下表所示:
添加在 body 中的所有组件会铺满整个 body。新增或删除组件后,body 内的其他组件重新铺满 body。如果修改某个组件的大小,相邻组件的大小也会发生变化,大小变化表现为此消彼长。
横向自适应
说明:
1)自适应布局下,为了报表美化,可以统一调整组件间隔和 body 边界距组件的边距,详情可参考:决策报表 body 3.1.2 节和 3.1.3 节。
2)绝对布局下,选中组件后,可以通过改变横纵坐标的方式调整组件的位置。详情可参考:决策报表 body 3.2.3 节。
不同的布局和缩放,报表在浏览器端将呈现不同的自适应效果,用户可根据应用场景来选择合适的布局方式。如下表所示:
报表双向充满浏览器窗口,内容全部呈现在一页;
此种方式适用于框架简洁,内容需要固定在一个屏幕中显示,不允许向下拖动的驾驶舱或大屏看板。
报表横向充满浏览器窗口,纵向高度按一定比例缩放,内容过多时,单页不能显示全,纵向出现滚动条,拖动显示剩余内容;
此种流式布局方式,适用于内容丰富,表格数据较多,无法固定在一个屏幕中,需要滚动的大屏报表,也适合移动端报表。
此种方式适用于内容丰富,一个小主题内既要图表又要文字,组件小且多,body平铺空间不足,需要组件重叠才能实现的驾驶舱或大屏看板。
报表不根据浏览器窗口大小进行调整,按照设计模板时 form 的大小原样展示在浏览器窗口;
此种方式适用于明确知道显示窗口大小的驾驶舱或大屏看板,也适用于需要固定显示在浏览器窗口的左上方,不需要铺满整个页面的报表。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉