---
description: 仪表板设计器
order: 3
navTitle: 仪表板设计器
---
# 仪表板设计器界面介绍

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

![仪表板设计器](./images/dashboard-designer.png)

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

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

## 设计器快捷键{#shortcut-keys}

设计器快捷键：

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

## 查看引用{#view-reference}

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

![查看引用](./images/2021-11-25-11-27-28.gif)

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

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

### 快速修改引用错误{#modify-reference-errors}

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

![错误提示](./images/2021-11-25-19-20-28.gif)

## 调整组件图层{#adjust-layer}

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

![调整组件层](./images/2021-11-24-14-57-53.png)

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

:::tip 技术原理

- 这里的**图层**，对应`z-index`属性
- [固定宽度](./design/layout/README.md#fixwidth)布局是一种流式布局，如果需要调整组件在图层中的顺序，则需要组件**脱离网格**
  :::

## 组件大纲树{#outline-tree}

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

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

![组件大纲树](./images/2021-11-25-12-05-08.png)

## 快速预览{#query}

仪表板的[组件](./components/README.md)每次取数时，都会发起一次数据的查询请求，当数据量较大时，一定程度上会影响**编辑**仪表板时的性能，通过启用快速预览，在**工具栏**>**视图**>**快速预览**中设置，启用**快速预览**限制查询的数据行数，即限制仪表板**设计器**查询数据时，最多只能查询5000行数据：

![快速预览](./images/2024-01-05-00-00-01.png)