设计器

设计器是低代码设计器中最主要的设计部分，可以在这里设计布局和看板。
点击【新建大屏】，名称输入: 产品销售额分析，点击【确定】按钮。

新建成功后即可跳转到大屏设计器页面，在设计器页面点击左侧【图表】Tab页面，在图表中找到【基础柱状图】并将拖拽到中间画布上。

在画布中的柱状图上右击，点击【配置】按钮，数据来源选择：数据集，数据集选择：本月产品销售额，维度选择：类型，指标选择：销售额，点击【更新】按钮，可以看到画布中的柱状图已经改变了。

右侧属性切换到【样式】选项卡，可在配置中修改图表的基础样式内容。

参数配置

如果选择的数据集存在动态参数，就可在参数配置中修改动态参数指。不同组件就可以展示出不同的数据。

组件联动

在布局中，如果我们想实现组件之间通过点击事件可以改变数据的交互效果，可以采用【组件联动】配置。

联动逻辑

设计器中的联动逻辑是通过参数传递实现的，即从组件A获取某条数据的某个值，将其传递给组件B，组件B将该值作为它绑定的数据集的参数值，重新查询数据，从而达到数据刷新的目的。
这就要求：组件B绑定的数据集必须有参数，且数据集可以根据该参数值的不同，查询到预期的数据。

案例需求

大屏中包含展示区域行业产值数据的柱状图，以及展示指定区域行业产值详情的表格，点击柱状图的柱子，表格将展示该柱子所对应的区域的行业产值数据。

准备数据

按照需求，我们需要完成柱状图和表格之间的联动，那么我们需要准备两个数据集，且需要满足以下两个条件：
1、两个数据集之间有关联的字段：两个组件之间要实现数据联动，则组件所绑定的数据集必须包含关联字段，以案例需求为例，两个组件均用于展示区域的数据，那么区域就是我们需要的关联字段；
2、参数：被关联的数据集必须包含至少一个参数，并且该参数可以改变数据集所对应的数据，以案例需求为例，我们应该设置一个参数，用于接收柱状图传过来的区域值，并且我们要能够根据区域值的不同，查询出对应的数据。
这里我们以自助数据集为例，可以创建出如下两个数据集：

柱状图数据集

以自助数据集为例，我们从数据库中直接查询需要的数据，由于柱状图是联动的发起方，所以不需要设置参数

表格数据集

表格数据集由于需要根据柱状图选中的区域进行详细展示，所以需要设置查询参数，如下所示，我们设置了参数 筛选区域，用于获取指定区域的数据。

联动配置

这里的【组件联动】为柱状图，【目标组件】为表格，我们点击柱状图进行配置，点击配置面板中的【新增联动组件】按钮。

然后选择目标组件为表格，点击设置按钮，进入到联动配置页面

在联动配置页面，有如下配置项：
● 当前组件映射参数：指将我们点击的那条数据的哪一个值作为参数传递为目标组件，可选项为数据集的字段列表
● 目标组件接收参数：指将当前组件传递的值，赋值给目标组件数据集的哪一个参数，可选项为目标数据集的参数列表
该案例中，我们需要将柱状图中点击的 区域 值，传递给表格组件数据集的 筛选区域 参数，按照如下配置即可

联动效果

点击柱状图的柱子时，可以看到下方的表格的数据也作出相应的变化

组件绑定

在布局中，如果我们想实现按钮组件通过点击事件可以改变数据的交互效果，可以采用【组件绑定】配合【组件联动】配置。

绑定逻辑

设计器中的绑定逻辑是通过参数值传递实现的，即从组件A获取某个值，将其传递给组件B，组件B将该值作为它绑定的参数值，然后可以将参数值传递到其他组件中，从而达到数据传递的目的。

案例需求

布局中包含展示设备状态分类的表格，点击按钮，表格将根据按钮提示的分类对表格内的设备状态进行筛选显示。

准备数据

按照需求，我们需要完成按钮和表格之间的联动，那么我们需要准备一个数据集，且需要满足以下条件：
1、参数：被关联的数据集必须包含至少一个参数，并且该参数可以改变数据集所对应的数据，以案例需求为例，我们应该设置一个参数，用于接收按钮传过来的设备状态参数，并且我们要能够根据设备状态值的不同，查询出对应的数据。

表格数据集

表格数据集由于需要根据设备状态进行详细展示，所以需要设置查询参数，如下所示，我们设置了参数 设备状态类型，用于获取指定设备的数据。

绑定配置

这里需要将文本组件的数值绑定到按钮组件上，【目标组件】为按钮，我们点击按钮组件进行配置，点击配置面板中的【新增绑定组件】按钮。然后选择绑定组件为文本组件。

联动配置

之后在进行【组件联动】配置，将文本组件的参数值联动到表格组件的 设备状态类型。

联动效果

通过点击按钮将数值4传递到目标组件图表的接收参数中，达到点击按钮切换图表内容的效果。