页面历史

如下图，一个页面中先是根据2行2列的布局分为四个区域，然后根据需要，每个区域内以列的方式依次放置资源。

页面布局包含内置和自定义布局。产品内置9种布局，当内置布局不能满足需求的时候，可以实现自定义布局。 页面资源的显示效果主要由布局管理和Dashlet设置共同作用来显示，下面分别介绍布局管理和Dashlet高宽度设置对资源显示的影响。

2. 布局管理

通过布局管理增删行列和宽高度百分比达到页面划分的整体效果。加减号代表着增删行列，宽度和高度设置入口。如下图：

进行行列设置即代表着页面的布局区域划分。

注意事项：

• 尽量设置为：同一行的宽度加起来为100%，如高度设置为百分比，则加起来也应该是100%。

• 行高可以设置为固定值，当设置为固定值表示为像素显示。

• 同一列的宽度只能设置一个数值，如下图设置，宽度默认取第一个区域的值25和75，则只有25才生效。如想实现同一列不同宽度，需要和合并一起使用，具体参考应用场景不规则布局。

3. Dashlet设置

页面布局中每一个区域可以添加多个资源，每个资源可以设置Dashlet属性高度和宽度来实现这个资源的显示。

Dashlet设置的高度和宽度既可以设置为固定值，也可以设置为百分比。

• 当高度和宽度设置为百分比的时候，表示当前资源占所在区域的百分比。设置为100%则充满整个区域。

设置为100%

• 当高度和宽度设置为百分比的时候。设置为50%则之占区域的一半，剩下一半为空白。

设置为50%：

• 当高度和宽度设置为具体值（单位为PX）时，如果固定值在区域设置值范围内，则多余区域使用空白显示。

• 当高度和宽度设置为具体值时，如果固定值超出区域设置值范围，则按照最大的固定值显示。

• 对于报表来说，如设置为高度自适应，则不受布局管理及其Dashlet属性高度和宽度的影响，以报表本身高度为准。

4. 应用场景

4.1 基本示例

1、如下图：页面被划分为两行两列，4个区域，区域布局数值设置如下图：

2、根据区域设置的数值，页面中每个区域设置高度和宽度的指标（高度，宽度）如下：

页面中的布局效果如下图：

3、资源Dashlet高度和宽度都设置为100%。

4、页面浏览的效果如下图：

4.2 不规则布局

如下图：页面被划分为两行两列，4个区域，页面设置是不规则的，如下图：

实现步骤：

1、新建自定义布局，增加两列一行，总共两行三列6个区域。如下图

2、分别选中第一行的前两列和后一行的后两列，按Ctrl键合并。

3、根据需要填写各个区域的对应数值，如下图：

4、把对应资源应用于此布局，并设置各个资源Dashlet高度和宽度都设置为100%。

5、仪表盘页面浏览的效果如下图：

原始文档：http://pan.baidu.com/s/1eQBrdp4