轮播列表

组件概述

轮播列表是一种表格组件，能够使用轮播动画的方式，将数据信息以列表的形式有序、清晰地展示在数据看板上。支持自定义行、列的样式和内容，支持将列表内容配置为超链接及图片。

前提条件

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

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

添加轮播列表

1. 登录DataV控制台。

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

3. 在左侧导航栏的组件库 > 表格列表下，单击轮播列表组件，添加该组件至画布。

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

接入业务数据

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

• 轮播列表接收的数据字段介绍如下。

  字段	说明

  字段	说明
  自定义参数	轮播列表的表格内容。可自定义多个字段值，需要与样式 > 自定义列 > 列字段名匹配使用。 说明 字段内容可使用HTML标签。例如，使用<a>实现超链接效果的代码示例为"DataV": "<a href='https://www.aliyun.com/product/bigdata/datav?'>DataV官网</a>"。

  示例轮播列表的数据结构如下。

  [
    {
      "area": "中国",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "美国",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "德国",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "英国",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    }
  ]

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

  配置项	描述

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

配置轮播列表

单击轮播列表组件，即可在右侧面板配置组件的基础样式、全局变量和交互事件等高级配置，以及蓝图交互配置。

{
  "area": "中国",
  "pv": 1,
  "attribute": "示例数据"
}

{
  "data": [
    {                     //当前页数据。
      "area": "中国",
      "pv": 1,
      "attribute": "示例数据"
     }
   ],  
  "index": 1              //列表行索引值，始终获取第一行数据。
}

{
  "data": [
    {                     //当前页数据。
      "area": "中国",
      "pv": 1,
      "attribute": "示例数据"
    }
  ],  
  "index": 1              //高亮所在的行索引值。
}

{
  "message": "第一轮滚动结束",
  "isEnding": "0"
}

{
  "area": "中国",
  "pv": 1,
  "attribute": "示例数据"
}

{
  "isOrder": true,                       //是否依次滚动高亮，支持逐条滚动高亮和指定高亮
  "hightLightIndex": "1",                //指定高亮值，指定高亮序列号（e.g:'1,2,3')
  "hightLightStyle": {                   //样式，高亮样式
    "color": "#f00",                     //文字颜色
    "borderColor": "#f00",               //边框额色
    "borderWidth": 1,                    //边框宽度
    "backgroundColor": "yellow",         //背景色
    "fontSize": 12,                      //字体大小
    "fontWeight": "normal",              //字体粗细
    "fontFamily": "Microsoft Yahei"      //字体
  }
}

{
  "isLoop": true //是否轮播，默认值为true。
}

{   // 移动方式。绝对定位：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. 配置柱状图。

   1. 接入数据。

      单击柱状图组件，选择数据源面板，修改静态数据内容。

      数据内容如下。

      [
        {
          "colorField": 100,
          "x": "1月",
          "y": 280000
        },
        {
          "colorField": 200,
          "x": "2月",
          "y": 200000
        },
        {
          "colorField": 300,
          "x": "3月",
          "y": 180000
        },
        {
          "colorField": 400,
          "x": "4月",
          "y": 160000
        },
        {
          "colorField": 100,
          "x": "5月",
          "y": 430000
        },
        {
          "colorField": 200,
          "x": "6月",
          "y": 200000
        },
        {
          "colorField": 300,
          "x": "7月",
          "y": 290000
        },
        {
          "colorField": 400,
          "x": "8月",
          "y": 760000
        },
        {
          "colorField": 100,
          "x": "9月",
          "y": 260000
        },
        {
          "colorField": 200,
          "x": "10月",
          "y": 370000
        },
        {
          "colorField": 300,
          "x": "11月",
          "y": 290000
        },
        {
          "colorField": 400,
          "x": "12月",
          "y": 150000
        }
      ]

   2. 配置组件样式。

      选择样式面板，配置X轴的标签展示数量为12，并关闭动画效果。

3. 配置轮播列表。

   • 单击数据源面板，开启受控模式。使该组件在初始化状态下不会请求自己的静态数据，仅可通过蓝图编辑器发起数据请求（即获取与柱状图交互后输出的数据）。

   • 单击轮播列表组件，选择样式面板，开启全局高亮效果，自定义列保留两个标签列，并修改列字段名和列显示名。

   • 列字段名：依次为Month、Total。

   • 列显示名：依次为月份、销售额。

4. 配置蓝图交互。

   使用蓝图交互，实现全年销售额按月轮播展示。

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

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

      您需依次执行该操作，添加柱状图、轮播列表组件至主画布。

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

   4. 按下图连接组件，并配置串行数据处理节点。

      配置串行数据处理节点的处理方法。

      • 导入数据

        return data.map(i => {
          return {
            Month: i.x,
            Total: i.y
          }
        })

      • 联动高亮

        return {
          "data": {
            "x": data.data[0].Month,
            "y": data.data[0].Total
          },
          "style": {
            "fillStyle": "#f00"
          }
        }

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