1. 概述
布局方式是指決策報表 body 框架内所有組件的放置方式，包括自适應布局和絕對布局。布局方式下又分不同的縮放邏輯，如下表所示：
| 自适應布局 | 絕對布局 | ||
|---|---|---|---|
| 雙向自适應 | 橫向自适應 | 固定大小 | 适應區域 |
縮放邏輯不同，浏覽器端報表的自适應效果也不同，所以設計決策報表時，選擇一個合适的布局和縮放是至關重要的。本文将介紹這四種方式的區别和應用場景。
2. 組件放置
body 自适應布局和絕對布局下，body 框架内組件的放置方式是不同的，如下表所示：
| 自适應屬性設置 | 類型 | body 内組件布局 | 描述 |
|---|---|---|---|
| 自适應布局 | 雙向自适應 |  | 添加在 body 中的所有組件會鋪滿整個 body。新增或删除組件後，body 内的其他組件重新鋪滿 body。如果修改某個組件的大小，相鄰組件的大小也會發生變化，大小變化表現爲此消彼長。 |
橫向自适應 | |||
| 絕對布局 | 适應區域 | | 允許組件随意放置，只要組件在 body 中即可，所有組件不會鋪滿整個 body。組件可以重疊，改變一個組件的大小，其他組件的大小不會受影響。 |
| 固定大小 |
說明：
1）自适應布局下，爲了報表美化，可以統一調整組件間隔和 body 邊界距組件的邊距，詳情可參考：決策報表 body 3.1.2 節和 3.1.3 節。
2）絕對布局下，選中組件後，可以通過改變橫縱坐标的方式調整組件的位置。詳情可參考：決策報表 body 3.2.3 節。
3. 自适應效果
不同的布局和縮放，報表在浏覽器端将呈現不同的自适應效果，用戶可根據應用場景來選擇合适的布局方式。如下表所示：
| 布局方式 | 縮放類型 | 自适應效果 | 描述 |
|---|---|---|---|
| 自适應布局 | 雙向自适應 | | 報表雙向充滿浏覽器窗口，内容全部呈現在一頁； 此種方式适用於框架簡潔，内容需要固定在一個屏幕中顯示，不允許向下拖動的駕駛艙或大屏看板。
|
橫向自适應 |
| 報表橫向充滿浏覽器窗口，縱向高度按一定比例縮放，内容過多時，單頁不能顯示全，縱向出現滾動條，拖動顯示剩餘内容； 此種流式布局方式，适用於内容豐富，表格數據較多，無法固定在一個屏幕中，需要滾動的大屏報表，也适合移動端報表。
| |
| 絕對布局 | 适應區域 | | 報表雙向充滿浏覽器窗口，内容全部呈現在一頁； 此種方式适用於内容豐富，一個小主題内既要圖表又要文字，組件小且多，body平鋪空間不足，需要組件重疊才能實現的駕駛艙或大屏看板。
|
| 固定大小 | | 報表不根據浏覽器窗口大小進行調整，按照設計模板時 form 的大小原樣展示在浏覽器窗口； 此種方式适用於明确知道顯示窗口大小的駕駛艙或大屏看板，也适用於需要固定顯示在浏覽器窗口的左上方，不需要鋪滿整個頁面的報表。
|
