DataV：輪播列表

組件概述

輪播列表是一種表格組件，能夠使用輪播動畫的方式，將資料資訊以列表的形式有序、清晰地展示在資料看板上。支援自訂行、列的樣式和內容，支援將列表內容配置為超連結及圖片。

前提條件

• 已建立資料看板，支援使用模板建立、使用空白畫布建立。

• 已準備業務資料，詳情請參見資料來源。

添加輪播列表

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. 單擊頁面右上方的預覽，預覽展示結果。