通用標題的配置及使用 - DataV

本文介紹通用標題的使用指南。

組件概述

通用標題是一種資訊組件，旨在傳達模組的核心內容或重要訊息。在資料看板中，您可以使用多個通用標題組件，以展示看板中各個子模組的標題或中心思想。

使用情境

通用標題常用於可視化應用中添加標題及說明資訊，以便明確相關內容的主題，從而協助您直觀、快速地瞭解核心內容。同時，它支援與其他組件互動，通過標題控制不同維度視圖或資料內容的呈現。

效果展示

靜態標題
互動情境
連結跳轉

前提條件

已建立資料看板，支援使用模板建立、使用空白畫布建立。
已準備業務資料，詳情請參見資料來源。

添加通用標題

登入DataV控制台。
在工作台頁面的資料看板地區，滑鼠移至上方至目標看板，單擊編輯，進入看板的畫布編輯頁面。
在左側導覽列，按下圖步驟添加通用標題組件至畫布。

您也可使用全域搜尋添加相關組件。

接入業務資料

添加組件後，您可將已準備的業務資料接入組件進行顯示。單擊通用標題，在右側的資料來源頁簽，即可選擇該組件所要呈現的資料。

通用標題接收的資料欄位介紹如下。

欄位	說明
`value`	（可選）標題的內容。不為空白時會覆蓋樣式中的配置；為空白時會使用樣式 > 基礎樣式 > 標題內容配置項中的內容。
`url`	（可選）標題跳轉的超連結位址。不為空白時會覆蓋樣式中的配置；為空白時會使用樣式 > 互動 > 超連結配置 > 超連結配置項中的URL。

樣本通用標題的資料結構及效果展示如下。

[
  {
    "value": "DataV官網",
    "url": "https://www.aliyun.com/product/bigdata/datav?spm=5176.28536895.nav-v2-dropdown-menu-0.d_main_8_2_0.2d5b586cgSLMNb"
  }
]

在預覽或發布介面，單擊組件即可跳轉至相應連結。

資料來源的核心配置項介紹如下。

配置項	描述
選擇資料來源	支援接入CSV檔案、API、各類資料庫等多種類型資料，詳情請參見支援的資料來源類型。您可使用可視化表格或代碼方式編輯資料欄位。
配置過濾器（可選）	用於自訂過濾代碼，實現資料的結構轉換、篩選、展示和簡單的計算，詳情請參見管理資料過濾器。
配置資料對應	用於將所選資料來源中的欄位對應至組件對應的欄位上，實現資料的即時匹配。單擊表徵圖可配置欄位樣式。
查看響應結果	用於即時展示組件所接入的資料。當組件資料來源發生變化時，此處會對應展示最新資料。單擊資料響應結果，可查看編寫的資料欄位代碼。單擊查看樣本，可查看資料來源接收的數群組類型及程式碼範例。您可參考樣本編寫相關欄位。其他資料請求配置：禁止載入態：勾選後，在組件更新或預覽資料看板時，將不呈現組件初始化時的載入內容。受控模式：勾選後，組件在初始化狀態下不會請求資料。此時僅支援通過藍圖編輯器或全域變數事件發起資料請求。自動更新請求：勾選後，平台會根據您設定的輪詢時間，動態輪詢更新資料；不勾選，則需手動重新整理頁面，或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

配置通用標題

單擊通用標題組件，即可在右側面板配置組件的基礎樣式、全域變數和互動事件等進階配置，以及藍圖互動配置。

樣式配置

在樣式面板，可配置通用標題的文字大小、布局、背景顏色等樣式，相關配置項介紹如下。

說明

您也可單擊表徵圖，通過關鍵詞搜尋，快速定位到所需配置項，搜尋支援模糊比對。詳情請參見搜尋配置項。

相關配置項介紹如下。

配置項	描述	圖示
全域配置	定義組件在資料看板中的位置分布、透明程度、互動穿透。不透明度：數值越小，組件越透明。取值範圍為`0~1`內的數值。互動穿透：開啟後，滑鼠可穿透該組件，避免看板中組件較多時，該組件會遮擋滑鼠與下層組件的互動。
基礎樣式配置	定義標題內容，以及文字大小、布局、顏色、是否溢出省略等樣式。開啟溢出省略後，溢出的文本將使用省略符號填充。
互動配置	設定通用標題的超連結和手勢游標。超連結：配置連結後，在預覽或發布頁，單擊通用標題即可跳轉至相應連結。是否新開視窗：開啟後，在預覽或發布頁單擊通用標題，將在瀏覽器中新開一個視窗呈現跳轉連結的內容；若未開啟，則在當前頁面呈現連結內容。手勢游標：開啟後，預覽看板時，滑鼠移至上方至通用標題組件時將顯示為手勢游標。

進階配置

可定義通用標題與其他組件間的互動，以及資料傳遞關係。相關配置項介紹如下。

配置項

描述

圖示

互動事件

定義與其他組件間的互動行為，實現組件聯動。樣本使用通用標題控制展示不同維度銷售資料。 19577664-CFE8-4D57-B32D-9804B40A8E43

單擊表徵圖，即可定義相關互動事件及互動動作。

關聯全域變數

可在組件中關聯全域參數，實現組件間的參數傳遞，進行組件互動。單擊表徵圖，即可開啟相應指令，並為該指令關聯所需全域變數。

當點擊標題時會拋出回調值，預設拋出資料中的value和url欄位值，配置詳情請參見組件互動配置。

藍圖互動

可通過藍圖編輯器使用可視化連線方式，定義組件間的互動關係及行為邏輯。

操作步驟

在畫布編輯頁面，單擊頂部功能表列左側的表徵圖，進入藍圖編輯器。
在圖層節點列表，滑鼠移至上方至通用標題組件，單擊表徵圖，添加該組件至主畫布。
通過連線方式，按需配置相關組件的藍圖互動效果。
樣本如下。

配置項介紹

相關互動事件及動作的介紹如下。

說明

您也可在藍圖配置介面右側，單擊相應事件或動作後的表徵圖，查看相關參數詳細介紹。

類別	子類別	描述
事件	當資料更新時	當組件資料更新時拋出該事件。
	當資料請求狀態變化時	當資料請求狀態變化時拋出該事件。狀態值包括Void、Loading、Success、Error。
	當點擊標題時	單擊標題時拋出的事件，同時拋出對應的資料項目，資料樣本如下。 `{ "value": "標題", "url": "https://www.aliyun.com" }`
動作	匯入資料	按組件繪製格式處理資料後，匯入組件，重新繪製。無需重新請求服務端資料，資料樣本如下。 `[ { "value": "標題", "url": "https://www.aliyun.com" } ]`
	請求資料	重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如，通用標題配置的API資料來源為`https://api.test`，傳到請求資料動作的資料為`{ id: '1'}`，則最終請求為`https://api.test?id=1`。
	移動	將組件移動至指定位置，資料樣本如下。 `{ // 移動方式。絕對位置：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" }` animationType：動畫方式。可配置為appear（出現/消失）、fade（漸隱漸現）、slideToUp（飛入/飛出），不配置表示無動畫。 animationDuration：動畫延時，預設為1000ms。 animationEasing：動畫曲線。可配置為linear（勻速）、easeInOutQuad（平滑）、easeInOutExpo（慢快慢）。
	顯示
	隱藏
	更新群組件配置	動態更新組件的樣式配置。先在組件的樣式面板中，單擊複製配置到剪貼簿，擷取組件的配置資料。根據需要，在藍圖編輯器配置頁面的資料處理節點，更改對應樣式的欄位值。

案例示範

本案例通過Tab列表的輪播功能實現通用標題的動態展示。

添加組件至畫布。
1. 登入DataV控制台。
2. 選擇任一資料看板，單擊編輯，進入畫布編輯器。
3. 在左側導覽列的組件庫中，依次添加Tab列表和通用標題兩個組件至畫布。
配置藍圖互動。
1. 單擊頁面左上方的表徵圖，進入藍圖頁面。
2. 在左側圖層節點頁簽，滑鼠移至上方至組件，單擊表徵圖，添加組件至主畫布。
  您需依次執行該操作，添加通用標題、Tab列表組件至主畫布。
3. 在左側邏輯節點頁簽，滑鼠移至上方至串列資料處理節點，單擊表徵圖，添加組件至主畫布。
4. 按下圖串連組件，實現點擊Tab列表時，匯入相應資料至通用標題。
5. 單擊串列資料處理節點，配置節點的處理方法。
```
return [{value:data.content}];
```
單擊頁面右上方的預覽，預覽展示結果。
（可選）如需跳轉特定Tab頁簽，可在串列資料處理節點前加入條件判斷節點，滿足時再執行處理方法；不滿足顯示預設值。例如：不顯示第一個Tab頁簽內容。
- 條件判斷節點
```
return data.id > 1;
```
- 串列資料處理：滿足
```
return [{value:data.content}];
```
- 串列資料處理：不滿足
```
return [{value: "我是標題資料"}];
```
單擊頁面右上方的預覽，預覽展示結果。