键值表格是文字组件的一种,支持以键值的形式自定义表格内容,能够将数据信息以表格的形式清晰地展示在大屏上,仅支持两列数据的展示,且无法新增列。本文档为您介绍键值表格各配置项的含义,帮助您快速准确地使用键值表格组件。

配置

  • 搜索配置:单击配置面板右上角的搜索配置,可在搜索配置弹出框中输入您需要搜索的配置项名称,快速定位到该配置项,系统支持模糊匹配。详情请参见搜索组件配置
  • 图表尺寸:包括组件的宽度和高度,单位为px。可单击锁定长宽比按键锁定组件的宽高比,等比例修改组件的宽高。再次单击进行解锁,解锁后宽高比不受限制。
  • 图表位置:包括组件的横坐标纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
  • 旋转角度:以组件的中心为中心点,进行旋转,单位为度(°)。
    • 手动输入角度值,控制组件的旋转角度。
    • 拖动圆圈旋转控制图标图标内的黑点,控制组件的旋转角度。
    • 单击左右翻转图标图标,控制组件左右翻转样式。
    • 单击上下翻转图标图标,控制组件上下翻转样式。
  • 透明度:取值范围为[0,1]。为0时,图表隐藏;为1时,图表全部显示。默认为1
  • 表格
    • 自适应
      • 打开后,表格会自适应组件大小,合理分布。
        打开键值表格自适应
      • 关闭后,表格显示原始大小。
        关闭键值表格自适应
    • 边框线:表格外侧边框线的样式。
      • 线条粗细:边框线的粗细。
      • 线条颜色:边框线的颜色,可参考颜色选择器说明进行修改。
    • 文本样式

      字体:表格中所有文本的字体系列,默认为微软雅黑

  • 单元格
    键值表格的单元格间距
    间距
    • 左右间距:单元格中的文本与单元格左右边界的距离,取值范围为0到50,单位为px。
    • 上下间距:单元格中的文本与单元格上下边界的距离。当勾选了自适应配置项,且表格不溢出时,此配置项仅对表头生效,其余行会自适应高度,取值范围为0到50,单位为px。
  • 表头
    键值表格表头配置项
    • 首行为表头:打开后,表格的第一行作为表头,且可以配置表头的文本样式。若不需要配置表头,可关闭此配置项,且需要删掉数据中的labelvalue字段。关闭后,表格无表头样式。
      关闭键值表格表头样式
    • 文本样式:打开首行为表头后显示。
      • 字体颜色:表头文本的颜色。
      • 字号:表头文本的大小,取值范围为0到100。
      • 字体粗细:表头文本的字体粗细。
      • 背景颜色:表头的背景颜色。
    • 宽度百分比:第一列占表格宽度的百分比。
    • 分割线
      • 线条粗细:两列之间分隔线的粗细。
      • 线条颜色:两列之间分隔线的颜色。
    • 第一列
      • 文本样式
        • 字体颜色:第一列文本的颜色。
        • 字号:第一列文本的大小,取值范围为0到100。
        • 字体粗细:第一列文本的字体粗细。
      • 背景颜色:第一列的背景颜色。
      • 对齐方式:第一列文本的对齐方式,可选:左对齐、右对齐、居中对齐。
  • 第二列:参考第一列配置第二列样式。
    键值表格列配置项
    • 分割线
      • 线条粗细:不同行之间分隔线的粗细。
      • 线条颜色:不同行之间分隔线的颜色。
    • 是否区分奇偶行
      键值表格区分奇偶行
      • 打开后,系统会自动区分奇偶行,并且可以配置奇数行和偶数行的背景颜色。
        • 奇数行背景色:表格中奇数行的背景颜色。
        • 偶数行背景色:表格中偶数行的背景颜色。
      • 去勾选,系统不区分奇偶行,全部显示为列的背景颜色。
        关闭显示键值表格奇偶行

数据


键值表格数据面板

上图中的示例数据如下:

[
  {
    "label": "支持两种数据格式",
    "value": "这是第一种"
  },
  {
    "key0": "这是第二种",
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": "value4"
  }
]
  • label:(可选) 第一列表头的内容。
  • value:(可选) 第二列表头的内容。
    说明 只有在表头配置项中勾选了首行为表头选项后,labelvalue字段才表示表头内容。
  • 表的主体数据格式为{"第一列key":"第二列的value值",……},其他数据可自定义,以实际数据内容顺序分布在表格相应行列中。
    注意
    • 目前键值表格组件支持两列,不支持新增列。
    • 您可以通过配置数据来增加键值表格的行数。
表 1. 配置项说明
配置项 说明
自动更新请求 勾选后可以设置动态轮询,还可以手动输入轮询的时间频次。
数据源 单击配置数据源,可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据
数据过滤器 单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见组件过滤器使用说明
数据响应结果 展示数据请求的响应结果。当数据源发生改变时,可单击右侧的刷新图标,实时查看数据响应结果。

交互

此组件没有交互事件。