仪表板设计器界面介绍

仪表板设计器是一个所见即所得的进行数据分析和可视化的工具，仪表板设计器界面如下图所示：

可以将其划分为如下几个区域：

1. 组件区：提供了丰富的可视化组件，如表格、图形、输入组件等，可以使用拖拽的方式从组件下拉面板中将组件快速添加到画布
2. 数据源：数据源区域列出了可以用于可视化分析的可用数据模型，也可以添加数据模型、添加表内数据加工、定义模型间的关联关系、增加计算字段、删除数据模型等
3. 属性栏：显示画布中当前选中组件的可配置属性，包括：数据、样式、交互等
4. 画布：画布是可视化组件布局的区域，可以在画布中添加任意组件，并通过拖拽的方式，任意布局组件的位置
5. 工具栏：工具栏中提供的是对仪表板的全局设置，如缩放、全局参数、定时刷新等

设计器快捷键

设计器快捷键：

功能	Windows/Linux	macOS
剪切	Ctrl + X	Command + X
复制	Ctrl + C	Command + C
粘贴	Ctrl + V	Command + V

查看引用

使用查看引用可以快速查看以及定位当前模型表、组件或参数在页面中被引用的地方。在设计器中，选中模型表或组件，点击鼠标右键，在弹出的菜单中选择查看引用选项即可查看引用列表，点击内容，可定位到对应组件或数据源，如下所示：

设计器中支持查看引用的内容如下：

• 数据模型查看引用：可以查看模型或字段被哪些组件属性引用
• 组件查看引用：可以查看选中组件被其他组件或数据源引用情况
• 参数查看引用：可以查看引用该参数的组件或数据源列表

快速修改引用错误

删除被引用的模型表、组件以及参数时，会弹出引用该内容的列表，当强制删除后，被引用的地方出现报错。同时右上角信息处会显示错误提示，点击可快速定位错误，也就是删除内容被引用的地方。

调整组件图层

在制作仪表板过程中，同一个区域中拖入较多组件会存在组件之间互相覆盖情况，可通过选中组件>右键菜单，点击上移一层、下移一层等选项去调整组件图层层次的顺序，上层的组件会覆盖下面的组件。具体可操作选项如下：

• 上移一层：将组件在图层中向上移动一层
• 下移一层：将组件在图层中向下移动一层
• 置于顶层：将组件置于图层最上面一层
• 置于底层：将组件置于图层最下面一层

技术原理

• 这里的图层，对应z-index属性
• 固定宽度布局是一种流式布局，如果需要调整组件在图层中的顺序，则需要组件脱离网格

组件大纲树

在设计器中拖入组件制作内容时，会依据拖入顺序以及包含关系自动生成组件大纲树，点击左上角布局即可查看。借助大纲树有以下优点：

• 快速定位组件在画布中的位置
• 能清楚看到组件之间的包含关系，快速调整布局
• 右键弹出菜单可对其进行快捷操作

查询设置

由于仪表板的设计器是所见即所得的，可以将当前制作的内容和数据的查询结果实时展示在界面中，当引入到仪表板的模型数据量较大时，为了提高设计器界面的查询性能，提供了以下两种方法：

• 限制查询的触发条件
• 限制查询的数据行数

限制查询的触发条件

仪表板的组件每次取数时，都会发起一次数据的查询请求，当数据量较大时，一定程度上会影响编辑仪表板时的性能，通过限制查询的触发条件，即禁用组件每次取数的数据查询请求，可以使仪表板仅在预览仪表板时查询数据，需要在工具栏>更新中设置，有下图两种情况：

组件取数时查询数据（自动更新）	组件取数时不查询数据（运行更新）

设置方法如下：

1. 展开更新的下拉列表：在仪表板右上角的工具栏中，点击更新按钮的下拉箭头
2. 选择更新模式：在下拉列表中选择运行更新

根据所选择的更新模式不同，在编辑仪表板时，发起数据查询的情况不同，设计器中画布上的组件效果也不同，有以下几种：

• 继承项目：与项目设置>分析中设置的自动更新仪表板选项保持一致，若在项目设置中勾选了自动更新仪表板，则表示自动更新，若没有勾选，则表示运行更新
• 自动更新：表示编辑仪表板时，每次为组件添加数据时就发起查询请求，并将查询的结果填充在组件上，当组件中带有数据时，能更清晰、更明确的调整组件样式或其他属性
• 运行更新：表示在编辑仪表板时，不主动发起数据的查询请求，当首次进入仪表板编辑界面时，由于组件中无数据填充，组件以空白的形式呈现。此时只有点击了预览后，仪表板才会发起查询请求，并将结果填充到相应的组件中，退出预览后，仪表板组件中仍然保留刚才查询到的数据结果，并在组件上遮罩一层白色50%透明度的蒙版

限制查询的数据行数

限制查询的数据行数，即限制仪表板设计器查询数据时，最多只能查询5000行数据，需要启用预览数据，可以在编辑界面中设置，也可以在预览界面设置，两界面共用同一个开关。