一.仪表板布局介绍

1.1概述

仪表板布局主要是指quickbi中的页面边距、组件间距、组件大小调整,组件内容对齐、不同分辨率适应，仪表板布局美观度等内容，帮助您快速在数量庞大的组件中进行合理的布局，高效完成页面的整理汇总，让仪表板更清晰丰富的展现。

1.2 应用场景

用户已经完成某张仪表板内所有组件的制作和基本排版，希望针对此部分制作好的组件和进行大小，对齐等调整，或希望对仪表板进行合理的整体布局与处理，更美观清晰的展现仪表板的内容。

1.3 功能说明

从用户的使用链路拆解布局，分别为对组件的细节调整布局，以及仪表板的内容和样式布局，最终是适配不同展现页面的合理设置方案及美观推荐；

1.3.1组件的调整

1. 组件大小调整

在QuickBI中，您可以通过以下方式调整组件大小：

• 拖拽调整：选中组件后，拖动组件边缘或角落的控制点自由调整大小

• 精确设置：表格类组件（交叉表，明细表，趋势分析，多维分析这四类图表）可在「表格基础样式」中对表格等列宽，表格高度等进行精确设置

注意事项：若开启表格高度动态自适应，则表格高度无法通过拖拽自行调整，默认自适应当前整体表格内容。

2. 组件和内容对齐方式

QuickBI提供多种对齐工具帮助组件整齐排列：

• 对齐参考线：移动组件时自动显示与其他组件的对齐参考线

1. 字段对齐：对于表格类组件，进入仪表板编辑页，点击字段配置界面的齿轮图标，批量设置字段的垂直或水平对齐方式。

2. 全局对齐设置：若需调整图表或Tab组件间的列间距以实现对齐，可前往“主题-全局样式-卡片间间距-列间距”进行统一设置。此功能适用于Quick BI专业版。

3. 层级关系管理

当前quickbi不支持多图层重叠排列，若您有相关精细化设置需求，可以使用数据大屏模块进行设置。

1.3.2 仪表板布局

1. 页面边距设置

合理的边距能让仪表板更专业和美观

• 全局边距：在仪表板设置中统一调整整个页面的边距（建议8-20px）

• 组件内边距：单独设置每个组件内部内容与边框的距离

2. 栅格应用

利用栅格系统实现专业布局，栅格布局目前只支持纵向延伸，不支持横向延伸（即只可调整纵向排列，横向排列无法自定义）

• 显示栅格：在页面右上角视图选项中开启网格显示辅助布局，页面会显示栅格线，方便调整组件是更精准的调整大小和对齐。

3.主题设置中的页面布局

注意： 组件间距控制与建议，科学的间距能提升可读性：

• 等距原则：保持相邻组件间距一致（建议15-30px）

• 分组间距：相关组件建议组内间距小，组间间距大

• 安全区域：考虑不同设备显示差异，重要内容不要过于靠近边缘

1.3.3 仪表板适应与美观度调整

1. 不同分辨率适应

确保仪表板在各种设备上正常显示：

• 响应式布局：开启"自适应"选项让组件自动调整位置和大小

• 预览测试：使用不同设备预览功能检查显示效果

2. 布局美观度提升技巧

• 视觉平衡：重要组件适当放大，次要组件缩小

• 留白艺术：合理使用空白区域避免界面拥挤

• 色彩协调：统一组件配色方案，突出关键数据

• 字体统一：控制标题、正文等字体样式的一致性

通过以上布局技巧，您可以在QuickBI中高效组织大量组件，创建出专业、清晰且美观的数据仪表板，有效提升数据传达效果和用户体验。