决策报表布局方式

  • 文档创建者:RosieY
  • 编辑次数:1次
  • 最近更新:RosieY 于 2020-11-04
  • 1. 概述

    布局方式是指决策报表 body 框架内所有组件的放置方式,包括自适应布局和绝对布局。布局方式下又分不同的缩放逻辑,如下表所示:

    自适应布局绝对布局
    双向自适应
    横向自适应固定大小适应区域

    缩放逻辑不同,浏览器端报表的自适应效果也不同,所以设计决策报表时,选择一个合适的布局和缩放是至关重要的。本文将介绍这四种方式的区别和应用场景。

    2. 组件放置

    body 自适应布局和绝对布局下,body 框架内组件的放置方式是不同的,如下表所示:

    自适应属性设置
    类型body 内组件布局描述
    自适应布局双向自适应2020-10-25_21-02-32.gif

    添加在 body 中的所有组件会铺满整个 body。新增或删除组件后,body 内的其他组件重新铺满 body。如果修改某个组件的大小,相邻组件的大小也会发生变化,大小变化表现为此消彼长。


    横向自适应

    绝对布局
    适应区域2020-11-03_17-23-51.gif允许组件随意放置,只要组件在 body 中即可,所有组件不会铺满整个 body。组件可以重叠,改变一个组件的大小,其他组件的大小不会受影响。
    固定大小

    说明:

    1)自适应布局下,为了报表美化,可以统一调整组件间隔和 body 边界距组件的边距,详情可参考:决策报表 body 3.1.2 节和 3.1.3 节。

    2)绝对布局下,选中组件后,可以通过改变横纵坐标的方式调整组件的位置。详情可参考:决策报表 body 3.2.3 节。

    3. 自适应效果

    不同的布局和缩放,报表在浏览器端将呈现不同的自适应效果,用户可根据应用场景来选择合适的布局方式。如下表所示:

    布局方式缩放类型
    自适应效果描述
    自适应布局双向自适应image.png

    报表双向充满浏览器窗口,内容全部呈现在一页;

    此种方式适用于框架简洁,内容需要固定在一个屏幕中显示,不允许向下拖动的驾驶舱或大屏看板。

    2020-11-03_17-51-11.png



    横向自适应

    image.png


    报表横向充满浏览器窗口,纵向高度按一定比例缩放,内容过多时,单页不能显示全,纵向出现滚动条,拖动显示剩余内容;

    此种流式布局方式,适用于内容丰富,表格数据较多,无法固定在一个屏幕中,需要滚动的大屏报表,也适合移动端报表。

    2020-11-03_22-10-47.gif

    绝对布局
    适应区域image.png

    报表双向充满浏览器窗口,内容全部呈现在一页;

    此种方式适用于内容丰富,一个小主题内既要图表又要文字,组件小且多,body平铺空间不足,需要组件重叠才能实现的驾驶舱或大屏看板。

    image.png


    固定大小image.png

    报表不根据浏览器窗口大小进行调整,按照设计模板时 form 的大小原样展示在浏览器窗口;

    此种方式适用于明确知道显示窗口大小的驾驶舱或大屏看板,也适用于需要固定显示在浏览器窗口的左上方,不需要铺满整个页面的报表。

    2020-11-03_23-02-15.png


    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!