多行文本

组件概述

多行文本是一种文字组件，能够展示包含多行文字的内容，方便您获取更多文字信息。同时，该组件支持与其他组件交互、支持换行及添加超链接，您可按需进行格式排版。

使用场景

常用于在可视化应用中展示长文本内容，例如，功能介绍、产品说明、备注信息等。

效果展示

• 静态文本

  

• 动态文本

• 文本添加链接

  

• 交互场景

前提条件

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

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

添加多行文本

1. 登录DataV控制台。

2. 在工作台 > 全部应用 > 数据看板单击目标看板，进入看板的画布编辑页面。

3. 在左侧导航栏的组件库 > 信息列表下，单击多行文本组件，添加该组件至画布。

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

接入业务数据

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

• 多行文本接收的数据字段介绍如下。

  字段	说明
  value	组件显示的文本内容，支持部分HTML标签（例如，<a>、<br>）。不为空时会覆盖样式中的配置；为空时会使用样式 > 基础样式 > 段落内容配置项中的内容。

  示例多行文本的数据结构及效果展示如下。

  [
    {
      "value": "DataV-Board（数据看板）是DataV系列下的数据看板搭建工具，旨在通过图形化界面帮助不同专业背景的用户快速搭建具备专业水准的数据看板。无论是面对新兴数字孪生场景的创新探索，还是在传统数据场景的持续深挖，DataV-Board 致力于让用户更高效、灵活地完成数据的查看、分析及表达，以数据可视化技术解决数据场景最后一公里的问题。"
    }
  ]

  

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

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

配置多行文本

单击多行文本组件，即可在右侧面板配置组件的基础样式、交互事件，以及蓝图交互配置。

[
  {
    "value": "文本内容"
  }
]

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

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

案例演示

本案例将获取词云组件中的内容并展示至多行文本组件中。

1. 添加组件至画布。

   1. 登录DataV控制台。

   2. 选择任一数据看板，单击编辑，进入画布编辑器。

   3. 在左侧导航栏的组件库 > 信息列表，单击词云和多行文本，添加组件至画布。

2. 配置多行文本的滚动样式。

   在画布中单击多行文本，在样式面板的交互页签，配置溢出方式为匀速滚动溢出，且滚动速率为0.05px/s。

3. 配置蓝图交互。

   使用蓝图交互，将词云中获取的文本通过多行文本组件滚动展示。

   1. 单击页面左上角的图标，进入蓝图页面。

   2. 在左侧图层节点页签，鼠标悬停至组件，单击图标，添加组件至主画布。

      您需依次执行该操作，添加多行文本、词云组件至主画布。

   3. 在左侧逻辑节点页签，鼠标悬停至串行数据处理节点，单击图标，添加组件至主画布。

   4. 按下图连接组件，实现词云数据更新时，导入相应数据至多行文本。

      

   5. 单击串行数据处理节点，配置节点的处理方法。

      return [{"value": data.map(item => item.name).join('，')}];  //依次获取词云组件中的name字段信息。

4. 单击页面右上角的预览，预览展示结果。