仪表板设计器界面介绍

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

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

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

设计器快捷键

设计器快捷键：

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

查看引用

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

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

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

快速修改引用错误

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

调整组件图层

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

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

技术原理

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

组件大纲树

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

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

快速预览

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