配置组件


组件是可视化页面中可配置的最小单元,能够以多种方式展示和分析数据,每个组件可以用于呈现一项业务指标。根据其功能和用途,组件分为 图表容器 两种类型。更多介绍,参见 DTV关键概念


在完成画布、图层和面板的配置后,你可以根据以下指引,完成组件的配置。

组件通用操作

添加组件

在图层面板中添加组件有 2 种方式:

  • 从左侧组件库中拖入组件,从头开始定义组件的数据、样式等。

  • 在配置图层的抽屉中,选择引入仪表盘页面的组件,复用已有的组件配置。注意:引入仪表盘页面的组件会将该仪表盘中的所有组件及其配置都添加到当前面板中。

widget


查看位置

将光标移动到组件左上角的位置图标上,即可查看组件在页面的位置或图表在容器内位置。

widget


页面位置

DTV 以左上角的顶点为坐标系的原点,以组件的左上角顶点为对象,定义组件的位置。

  • 纵轴:按照页面配置的网格高度为一个单位,向下延伸。

  • 横轴:按照页面配置的网格数量,向右延伸。

dashboard


容器内位置

与页面位置相同,以容器的左上角顶点为坐标系的原点,以图表的左上角顶点为对象,定义图表在容器内的位置。

  • 纵轴:按照页面配置的网格高度为一个单位,向下延伸。

  • 横轴:按照页面配置的网格数量,向右延伸。

dashboard


移动组件

在同一个面板内,你可以通过拖拽直接移动组件,调整组件的位置。通过拖拽组件右下角的双箭头图标,可以缩放组件大小。

如需将组件移动到其他的面板上,将光标移动到组件的(…)图标上,在下拉菜单中选择 移至其他面板

widget


删除组件

选择要删除的组件,将光标移动到组件左上角的(…)图标上,在下拉菜单中选择 删除

备注

  • 如删除容器,容器内的所有图表将一并删除。

  • 删除组件后,组件的关联关系都会被清除。


另存为模板

你可以将常用组件另存为模板,方便从模板快速开始编辑组件。通过以下步骤,将组件另存为模板:

  1. 在 页面编辑器 中,将光标移动到组件上,然后移动到省略号(…)上,此时将显示下拉菜单。

  2. 选择 另存为模板,在弹窗中完成 所属分组、文件夹名称、模板名称和标签配置

  3. 点击 确定 保存模板。


容器与图表的关联操作

将图表添加到容器中

容器用于收纳和管理其它组件。将容器添加到某一面板后,你可以通过以下步骤,将图表添加到该面板中的容器里:

  1. 选择要添加的图表,然后点击图表右上方的 进入容器 按钮。

  2. 选择容器与容器页签。

将图表从容器中移出

将光标移动到要移出容器的图表上,图表右上角会出现两个操作按钮。点击 移出容器 按钮,可以将图表移出它所在的容器。


single-page

组件配置

配置容器

将光标移动到已添加的容器上,点击编辑图标,可以进入 容器配置 弹窗。容器配置项的说明参见 通过容器对组件进行分组 > 添加容器

container

配置图表


图表通用配置

添加图表后,你可以通过编辑按钮打开配置抽屉,配置图表的布局、样式、数据等。各配置项的具体说明,参见 组件通用配置

widget


克隆图表

完成某一图表的具体配置后,如需要在当前页面中复用该图表,可以将光标移动到图表上,在(…)的下拉菜单中选择 克隆组件。 克隆出来的图表自动放置在同一面板中,如需要移动到其他面板,需手动进行调整。

widget

组件联动导航器

组件与导航器的联动可以在 画布配置 页面完成。通过配置组件与导航器的联动关系,当用户在导航器中选择筛选项时,组件会根据导航器传递的参数值,动态更新组件数据。根据以下指引完成组件与导航器的联动配置:

  1. 进入组件的配置抽屉,选择 过滤器 标签页。

  2. 组件联动导航器 区域,点击 数据联动 展开配置项。

  3. 选择 点击配置联动,打开 导航器与组件的数据联动 弹窗。

  4. 在弹窗中选择导航器参数和联动的数据项:

    • 导航器参数:来自 导航配置 步骤中你定义的筛选器、资产类型等。

    • 联动的数据项:从组件正在使用的数据源中选择数据项。数据项又分为 2 类:

      • 数据源参数:组件给数据源的请求参数,定义了每一次请求的条件,例如数据的开始时间和结束时间。

      • 数据项:数据源的返回参数,组件在这些返回参数中选择需要的数据项,以指标、扩展、维度等形式展示在组件中。

    • 联动条件:导航器参数与组件数据之间满足条件时,产生联动。

  5. 点击 确定 保存联动配置。


组件与导航器的联动还可以在 关联配置 页面完成。更多信息,参见 关联导航器与组件

组件联动其它组件

表格、饼图、时序图等组件支持配置组件之间的联动效果,你可以根据以下指引,完成联动配置:

  1. 进入组件的配置抽屉,选择 过滤器 标签页。

  2. 联动其它组件 区域,点击 +添加 打开 添加组件联动 配置抽屉。

  3. 选择 本组件中的触发行为,例如点击AssetName区域等。

  4. 选择 刷新的组件,即需要与本组件联动刷新的组件,可以是独立的组件,也可以是容器内的组件。

  5. 点击 确定 保存联动配置。



画布配置 页面完成组件相关配置后,你可以进入 关联配置 页面,为导航器、画布和组件数据配置关联关系。