3.1.1 平铺容器

第二章对仪表板页面做了一个初步的介绍，接下来尝试把多张图表添加到一个仪表板中，并进行合理的布局和美化，以达到同时从多个角度分析数据的目的。

资源添加到仪表板中默认布局方式是平铺，如图3-1-1-1，如果资源中带了图例或过滤器，则会为图例和过滤器生成一个垂直容器存放，资源本身还是在平铺容器中，这个资源的平铺容器和图例的垂直容器又是放在一个共同的水平容器中，水平容器则是放在最原始的平铺容器中，从图3-1-1-2可以看清楚此布局方式。

图3-1-1-1 默认平铺布局

图3-1-1-2 资源带了图例后的布局

下面通过双击添加的方式，依次将“全国销售概况”、“各品类市场表现”、“产品等级销售额概况”、“各子品类市场表现”几个资源添加到仪表板操作区。

图3-1-1-3 建立一个含多个资源的仪表板

在创建好的仪表板中，共有4个资源，最右侧一列都是图例。因“各品类市场表现”和“各子品类市场表现”两个资源都带了“区域”图例，可以选择移除一个重复的图例，移除图例的方式和移除资源一致，选中图例，点击右上角的删除按钮即可。此操作对整个仪表板做了适当的简化，以使其清晰整洁，更具可读性。

图3-1-1-4 对仪表板图例进行适当简化

经过上一步的操作后，可以看到右侧的两个图例是分别针对“各品类/各子品类市场表现”和“产品等级销售额概况”设置的，因此当前的布局容易产生误解，考虑修改一下各资源的布局。先将“产品等级销售额概况”和“各子品类市场表现”换一个位置，选中“各子品类市场表现”后资源顶部中间的位置会出现一个图标，鼠标选中此图标进行拖动，拖到“产品等级销售额概况”所在的位置，灰色阴影区域即是拖动的目标区域，拖动到完整覆盖“产品等级销售额概况”资源的情况下松开鼠标，两个资源成功互换位置。

图3-1-1-5 拖动资源改变位置

改变资源位置后，将产品类别图例拖到产品等级销售概况内部，调整大小，使该图例属于“产品等级销售额概况”这个资源。

图3-1-1-6 调整图例产品类别的位置

调整后效果如下，整个资源更加清晰明了，易读性高。

图3-1-1-7 调整后仪表板

在调整布局的过程中可以看到，每个资源的边界位置有虚线进行分隔，鼠标放在虚线上图标会从箭头变成类似“<->”的图标，此状态下拖动可以改变资源的大小，方便调整布局。

在自由仪表板中，每一个元素都会被视为一个独立的区域，不论是图表、图例还是过滤器等，它们都被单独放置在一个虚线框内。因此想要页面清晰易懂，还需要操作者对每一个部分的位置和大小进行灵活的调整，做适当的保留和简化。