覆盖主要内容
版本: 下个版本

键值表格

键值表格是文字组件的一种，支持以键值的形式自定义表格内容，能够将数据信息以表格的形式清晰地展示在可视化应用上，仅支持两列数据的展示，且无法新增列。本文介绍键值表格各配置项的含义。

配置​

  • 基础属性：

    • 图表尺寸：包括组件的宽度和高度，单位为px。
    • 图表位置：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
    • 旋转角度：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度。
    • 透明度：取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1。

  • 表格

  • 自适应：

    • 打开开关，表格会自适应组件大小，合理分布。
    • 关闭开关，表格显示原始大小。

  • 边线框： 表格外侧边框线的样式。

    • 线条粗细：边框线的粗细。
    • 线条颜色：边框线的颜色，请参见颜色选择器说明进行修改。

  • 边线框： 表格中所有文本的字体系列，默认为微软雅黑。

  • 单元格：单元格的间距值。

参数说明
左右间距单元格中的文本与单元格左右边界的距离，取值范围为0~50，单位为px。
上下间距单元格中的文本与单元格上下边界的距离。当开启自适应配置项，且表格不溢出时，此配置项仅对表头生效，其余行会自适应高度，取值范围为0~50，单位为px。
  • 表头

  • 首行为表头：打开开关，表格的第一行作为表头，且可以配置表头的文本样式。若不需要配置表头，可关闭此配置项，且需要删掉数据中的label和value字段。关闭开关，表格无表头样式。
  • 文本样式：仅在打开首行为表头配置项后显示。
参数说明
字体颜色表头文本的颜色。
字号表头文本的大小，取值范围为0~100。
字体粗细表头文本的字体粗细。
  • 背景颜色：表头的背景颜色，仅在打开首行为表头配置项后显示。
  • 列
    • 宽度百分比%：第一列占表格宽度的百分比值。
    • 分割线
参数说明
线条粗细两列之间分割线的粗细。
线条颜色两列之间分割线的颜色。
  • 第一列
参数说明
文本样式第一列文本的颜色、字号和字体粗细。
背景颜色第一列的背景颜色。
对齐方式第一列文本的对齐方式，可选：左对齐、右对齐和居中对齐。
  • 第二列：参见第一列配置第二列样式。
  • 行
    • 分割线
参数说明
线条粗细不同行之间分割线的粗细。
线条颜色不同行之间分割线的颜色。
  • 是否区分奇偶行

  • 打开开关，系统会自动区分奇偶行，并且可以配置奇数行和偶数行的背景颜色。
参数说明
奇数行背景色表格中奇数行的背景颜色。
偶数行背景色表格中偶数行的背景颜色。
  • 关闭开关，系统不区分奇偶行，全部显示为列的背景颜色。

数据​

上图中的示例数据如下。

[
  {
    "label": "支持两种数据格式",
    "value": "这是第一种"
  },
  {
    "key0": "这是第二种",
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": "value4"
  }
]

表 1. 字段说明

字段说明
label（可选） 第一列表头的内容。
value（可选） 第二列表头的内容。
说明 只有在表头配置项中开启首行为表头选项后，label和value字段才表示表头内容。

表的主体数据格式为{"第一列key":"第二列的value值",……}，其他数据可自定义，以实际数据内容顺序分布在表格相应行列中。

信息

注意

  • 目前键值表格组件仅支持两列，不支持新增列。
  • 您可以通过配置数据来增加键值表格的行数。

表 2. 配置项说明

配置项说明
受控模式打开开关，组件初始化状态下不请求数据，仅通过回调ID或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。
自动更新请求选中后可以设置动态轮询，还可以手动输入轮询的时间频次。清除后则不会自动更新，需要手动刷新页面，或通过蓝图编辑器和回调ID事件来触发请求更新数据。
数据源单击配置数据源，可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据。
数据过滤器单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见组件过滤器使用说明。
数据响应结果展示数据请求的响应结果。当数据源发生改变时，可单击刷新数据，实时查看数据响应结果。

交互​

此组件没有交互事件。

蓝图编辑器交互配置​

  1. 在画布编辑器页面，右键单击组件，选择导出到蓝图编辑器。
  2. 单击页面左上角的 图标。
  3. 在蓝图编辑器配置页面，单击导入节点栏内的键值表格组件，在画布中可以看到如下图所示的键值表格的蓝图编辑器配置参数。

  • 事件当数据接口请求完成时：数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据请参见上文的数据示例。

  • 动作

动作
说明
请求数据接口重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如单张图片配置了API数据源为http://api.test/?id=:id，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。
导入数据接口按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例。
更新组件配置动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。
显示显示组件，不需要参数。
隐藏隐藏组件，不需要参数。
切换显隐状态切换组件显示或者隐藏。
移动将组件移动到指定位置。{// 移动方式。绝对定位：to，相对定位：by。默认值：to。"positionType": "to",// 指定位置。x坐标，y坐标。"attr": {"x": 0,"y": 0},// 动画方式。"animation": {"enable": false,// 动画延时。"animationDuration": 1000,// 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。"animationEasing": "linear"}}
最后一次更新 更新于