数字翻牌器

组件概述

使用场景

数字翻牌器常用于时钟、计时器、计数器等设备，或金融领域显示金额、企业展示某个指标等场景。例如，展示企业的某个指标数据，通过指标的变化快速判断是否存在经营异常。

效果展示

数字翻牌器通常由标题、前/后缀及翻牌器内容组成。示例使用数字翻牌器展示某地区的日销售金额，效果如下。

使用限制

翻牌器内容仅支持显示Number类型。若您的数据非Number类型，则平台会将该内容视为异常字符，并自动替换为指定内容。详情请参见异常字符处理。

前提条件

• 已创建数据看板，支持使用模板创建、使用空白画布创建、使用AI智能生成。

• 已准备业务数据，详情请参见数据源。

添加数字翻牌器

1. 登录DataV控制台。

2. 在工作台页面的数据看板区域，鼠标悬停至目标看板，单击编辑，进入看板的画布编辑页面。

3. 在左侧导航栏的组件库 > 信息列表下，单击数字翻牌器组件，添加该组件至画布。

您也可使用全局搜索添加相关组件。

接入业务数据

添加组件后，您可将已准备的业务数据接入组件进行显示。单击数字翻牌器，在右侧的数据源页签，即可选择该组件所要呈现的数据。

• 翻牌器接收的数据字段介绍如下。

  字段	描述

  字段	描述
  name	（可选）数字翻牌器的标题内容。不为空时会覆盖样式中的配置；为空时会使用样式 > 基础样式 > 标题内容配置项中的内容。
  value	数字翻牌器的具体数值。
  prefix	（可选）数字翻牌器的前缀内容。不为空时会覆盖样式中的配置；为空时会使用样式 > 翻牌器 > 前缀内容配置项中的内容。
  suffix	（可选）数字翻牌器的后缀内容。不为空时会覆盖样式中的配置；为空时会使用样式 > 翻牌器 > 后缀内容配置项中的内容。

  示例翻牌器的数据结构及效果展示如下。

  [
   {
   "name": "这是标题",
   "value": 232425
   }
  ]

  

• 数据源的核心配置项介绍如下。

  配置项	描述

  配置项	描述
  选择数据源	支持接入CSV文件、API、各类数据库等多种类型数据，详情请参见支持的数据源类型。您可使用可视化表格或代码方式编辑数据字段。
  配置过滤器（可选）	用于自定义过滤代码，实现数据的结构转换、筛选、展示和简单的计算，详情请参见管理数据过滤器。
  配置数据映射	用于将所选数据源中的字段映射至组件对应的字段上，实现数据的实时匹配。单击图标可配置字段样式。
  查看响应结果	用于实时展示组件所接入的数据。当组件数据源发生变化时，此处会对应展示最新数据。 单击数据响应结果，可查看编写的数据字段代码。 单击查看示例，可查看数据源接收的数组类型及代码示例。您可参考示例编写相关字段。 其他数据请求配置： 禁止加载态：勾选后，在组件更新或预览数据看板时，将不呈现组件初始化时的加载内容。 受控模式：勾选后，组件在初始化状态下不会请求数据。此时仅支持通过蓝图编辑器或全局变量事件发起数据请求。 自动更新请求：勾选后，平台会根据您设置的轮询时间，动态轮询更新数据；不勾选，则需手动刷新页面，或通过蓝图编辑器和全局变量事件来触发请求更新数据。

配置数字翻牌器

{
  "value": "23"
}

{
  "value": "23"
}

[
  {
    "name": "第三季度营业额",
    "value": 283699,
    "prefix": "¥",
    "suffix": "元"
  }
]

{ 
  // 移动方式。绝对定位：to，相对定位：by。默认值：to。
    "positionType": "to",
  // 指定位置。x坐标，y坐标。
  "attr": {
   "x": 0,
   "y": 0
   },
  // 动画方式。
  "animation": {
    "enable": false,
    // 动画延时。
   "animationDuration": 1000,
    // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。
   "animationEasing": "linear"
  }
}

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

案例演示

数字翻牌器的使用示例，请参见实现动态数据加和。