圖表樣式

輪播列表是表格組件的一種，支持各行各列的樣式和內容的自定義配置，支持列表內容的超鏈接配置，同時支持圖片格式的列表內容，能夠使用輪播動畫的方式，將數據信息以列表的形式清晰地展示在數據看板上。

樣式面板

• 搜索配置：單擊樣式面板右上角的搜索配置項圖標，可在搜索配置面板中輸入您需要搜索的配置項名稱，快速定位到該配置項，系統支持模糊匹配。詳情請參見搜索配置項。

• • 尺寸：包括組件的寬度和高度，單位為px。

  • 定位：包括組件的橫坐標和縱坐標，單位為px。橫坐標為組件左上角距離頁面左邊界的像素距離，縱坐標為組件左上角距離頁面上邊界的像素距離。

  • 旋轉：以組件的中心為中心點，進行旋轉，單位為度（°）。

    • 手動輸入角度值，控制組件的旋轉角度。

    • 單擊圖標，控制組件左右翻轉樣式。

    • 單擊圖標，控制組件上下翻轉樣式。

  • 不透明度：取值范圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。默認為1。

• 快速樣式：輪播列表具備快速樣式功能，您可以根據實際應用場景選擇不同的樣式。

• 全局

  參數	說明
  表格行數	輪播列表的表格行數。
  是否輪播	打開開關，在預覽或發布頁面列表內容可自動輪播。關閉開關，動畫樣式無法配置。
  字體	組件中所有文本的字體，默認為微軟雅黑。
  動畫	僅在開啟是否輪播配置項時才生效。 動畫模式：輪播動畫的模式，可選全部滾動和逐條滾動。 輪播間隔(秒)：輪播間隔的時間，單位為秒。 單頁不輪播：打開開關，若數據條數達不到表格行數（數據只有一頁）時，不進行輪播。
  高亮	輪播表格內單行內容高亮顯示樣式，可單擊圖標控制列表高亮樣式的顯隱。 自動依次高亮：打開開關，輪播列表中的每一行內容輪播時自動依次高亮顯示；關閉開關，可指定某一行高亮展示。 指定高亮序列號：自定義輸入輪播列表的某一行的序列號，可以指定列表內該序列號行內容高亮顯示。僅在關閉自動依次高亮配置項時生效。 高亮樣式：輪播表格內高亮顯示行的樣式。 文本樣式：列表高亮行內容的文本樣式，包括行內文本的字體樣式、 文字粗細、字號和顏色。 背景色：列表高亮行的背景顏色。 邊框：列表高亮行的邊框樣式，包括邊框的粗細值、邊框線的類型和邊框的顏色。 說明 當邊框顏色為漸變色時，邊框類型失效。
  空值隱藏行	打開開關，數據內容為空的情況下，自動隱藏該行不顯示。
  溢出文本滾動	輪播表格內內容溢出文本滾動樣式。 是否滾動：打開開關，在預覽或發布頁面溢出文本可自動滾動。 勻速滾動：打開開關，在預覽或發布頁面溢出文本可勻速滾動。 速率：設置勻速滾動的速率值，單位px/s。僅在打開勻速滾動配置項時可設置。 滾動時間（秒）：溢出文本的滾動時間，單位為秒。僅在關閉勻速滾動配置項時可設置。
  即刻更新	打開開關，當數據更新時立即更新視圖渲染；關閉開關，視圖將在下次輪播時更新。
  默認圖片	當自定義列內容類型為圖片時的非真實圖片地址，用于顯示的默認圖片。 說明 默認圖片的格式可選png、jpg、gif、jpeg等。

• 表頭：列表的表頭樣式，可單擊圖標控制表頭樣式的顯隱。

  參數	說明
  表頭行高(%)	表頭部分占整個圖表高度的比例值，取值范圍為0~100，單位為%。
  背景顏色	表頭部分的背景顏色，請參見顏色選擇器說明進行修改。
  文本樣式	表頭中文本的樣式。 文本對齊：文本對齊的方式，可選：左對齊、居中對齊和右對齊。 字體：文本的字體系列，默認為微軟雅黑。 字體顏色：文本的顏色。 字號：文本的大小，取值范圍為0~200。 字體粗細：文本字體的粗細樣式。

• 行配置

  參數	說明
  奇行背景色	列表中奇數行的背景顏色。
  偶行背景色	列表中偶數行的背景顏色。
  回調字段	作為回調參數的字段，需要取數據中的某個字段。

• 序列號：列表中序列號的樣式，可單擊圖標控制序列號的顯隱。

  參數	說明
  背景顏色	序列號的背景顏色。
  列寬占比(%)	序列號所在列的寬度，取值為占列表寬度的百分比，取值范圍為0~100，單位為%。
  半徑占比(%)	序列號的半徑，取值為占序列號所在列的寬度的百分比，取值范圍為0~100，單位為%。
  文本樣式	序列號文本的文本樣式，包括字體樣式、顏色、字號和字體粗細。

• 自定義列：單擊右側的或圖標，添加或刪除一個標簽列。 單擊或圖標配置多個自定義系列的排列樣式。單擊圖標，即可復制當前選中數據系列配置內容并新增一個同樣配置的數據系列。

  說明

  該配置項為一個數組，可配置多個自定義列，編輯器會遍歷數據，使數據通過一個或多個自定義列配置循環渲染。若需要自定義某些數據為特定樣式，則需要手動對數據進行排序。

  參數	說明
  列字段名	自定義列所對應的字段名，需要與數據中的type字段相對應。
  列顯示名	自定義列所對應的顯示名，作為表頭的內容顯示。
  列寬占比(%)	自定義列占列表寬度的百分比，取值范圍為0~100，單位為%。所有列寬占比總和為100%，超出則會偏離您輸入的值。
  內容類型	自定義列的內容類型，可選文本和圖片。 說明 當選擇內容類型為圖片時，需要確保數據中對應的列字段名下的內容為真實圖片的地址。
  圖片寬度	自定義列內圖片的寬度值，單位為px，僅在內容類型配置項選擇圖片后可配置。
  圖片邊距	自定義列的圖片邊距值，包括配置圖片距離自定義列左側的邊距值和距離自定義列頂部的邊距值，單位為px，僅在內容類型配置項選擇圖片后可配置。
  自動換行	打開開關，自定義列的內容可自動換行。僅在內容類型配置項選擇文本后可配置。
  文本對齊	自定義列的文本對齊方式，可選：左對齊、居中對齊和右對齊。僅在內容類型配置項選擇文本后可配置。
  文本樣式	自定義列的文本樣式，僅在內容類型配置項選擇文本后可配置。 字體：自定義列的文本字體樣式，默認微軟雅黑。 字體粗細：自定義列文本的字體粗細。 字號：自定義列的文本大小，取值范圍為0~200。 顏色：自定義列的文本顏色。

數據源面板

高級面板

藍圖交互

1. 單擊頁面左上角的圖標，進入藍圖頁面。

2. 在圖層節點頁簽下，將當前組件添加至主畫布中。

3. 查看藍圖配置參數。

   • 事件

     事件	說明
     當數據接口請求完成時	數據接口請求返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     當點擊單行時	當單擊輪播列表的某一行時拋出當前行的數據，內容根據數據響應結果變化而變化，參考數據示例。 { "area": "中國", "pv": 1, "attribute": "示例數據" }
     當數據滾動時	當輪播列表的數據行滾動時，觸發并拋出當前頁的數據和索引值，參考數據示例。 { "data": [{ //當前頁數據 "area": "中國", "pv": 1, "attribute": "示例數據" }], "index": 1 //列表行索引值，始終獲取第一行數據。 }
     當高亮時	當輪播列表的數據行高亮顯示時，觸發并拋出當前頁的數據和索引值，參考數據示例。 重要 使用前請先打開樣式>高亮>自動依次高亮配置項。 { "data": [{ //當前頁數據 "area": "中國", "pv": 1, "attribute": "示例數據" }], "index": 1 //高亮所在的行索引值。 }
     一輪滾動結束	當輪播列表一輪滾動結束時，觸發并拋出一輪滾動結束的描述信息并結束滾動，參考數據示例。 { "message": "第一輪滾動結束", "isEnding": "0" }

   • 動作

     動作	說明
     導入數據接口	按組件繪制格式處理數據后，導入組件，重新繪制。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     請求數據接口	重新請求服務端數據，上游數據處理節點或圖層節點拋出的數據將作為參數。例如輪播列表配置了API數據源為https://api.test，傳到請求數據接口動作的數據為{ id: '1'}，則最終請求接口為https://api.test?id=1。
     高亮	高亮顯示輪播列表數據行內容，參考數據示例。 { "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" //字體 } }
     開啟滾動	開始輪播滾動，動作傳入數據為object類型，參考數據示例。 { "isLoop": true //是否輪播，默認值為true。 }
     暫停滾動	暫停滾動，不需要參數。
     移動	將組件移動到指定位置，參考數據示例。 { // 移動方式。絕對定位：to，相對定位：by。默認值：to。 "positionType": "to", // 指定位置。x坐標，y坐標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時，單位ms。 "animationDuration": 1000, // 動畫曲線?？蛇x值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
     切換顯隱	切換組件顯示或者隱藏，不需要參數。
     顯示	顯示組件，參考數據示例。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""http://動畫曲線 }
     隱藏	隱藏組件，參考數據示例。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""http://動畫曲線 }
     更新組件配置	動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊復制配置到剪貼板，獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。

案例演示

本案例使用柱狀圖和輪播列表實現全年銷售額按月輪播展示。

1. 登錄DataV控制臺。

2. 選擇任一數據看板，單擊編輯，進入畫布編輯器頁面。

3. 添加柱狀圖和輪播列表兩個組件到畫布中。

4. 單擊柱狀圖組件，選擇數據源面板，修改靜態數據。

   [
     {
       "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
     }
   ]

5. 選擇樣式面板，修改坐標 > X軸 > 軸標簽 > 標簽展示的數量為12，并關閉動畫開關。

6. 單擊輪播列表組件，選擇樣式面板，修改自定義列的列字段名和列顯示名，并打開全局設置下的高亮開關。

   說明

   • 列字段名-列顯示名：Month-月份

   • 列字段名-列顯示名：Total-銷售額

7. 單擊頁面左上角的圖標，進入藍圖頁面。

8. 在圖層節點頁簽下，添加所有組件至主畫布中。

9. 在邏輯節點頁簽下，添加2個串行數據處理節點到主畫布中。

10. 連接組件。

11. 配置串行數據處理節點的處理方法。

    • 導入數據

      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"
        }
      }

12. 單擊頁面右上角的預覽，預覽展示結果。