全部產品
Search
文件中心

DataV:組件畫布操作

更新時間:Nov 11, 2025

本文介紹組件在畫布編輯器中的操作方法,包括組件拖拽、縮放、旋轉、操作快速鍵等基礎功能,以及大量設定、使用輪播容器等進階功能,協助您更方便快捷地在資料看板中操作組件。

前提條件

已建立資料看板,支援使用模板建立使用空白畫布建立

進入畫布編輯器

  1. 登入DataV控制台

  2. 工作台頁面的資料看板地區,滑鼠移至上方至目標看板,單擊編輯,進入看板的畫布編輯頁面。

    在該頁面,您可按需執行基礎操作大量設定成組操作使用輪播容器等操作。

基礎功能

操作

描述

拖拽

在左側組件庫中選中一個或多個組件,按住滑鼠左鍵進行拖拽。

  • 選中一個組件:單擊某個組件進行選中。

  • 選中多個組件:按住鍵盤上的Ctrl鍵(蘋果鍵盤使用Cmd鍵)後,單擊多個組件進行選中。再次單擊對應按鍵可以取消選中當前組件。

    說明

    您也可以在左側的圖層列表中,使用同樣的方法選中一個或多個組件。

縮放

單選或者多選組件後,將滑鼠移動到組件的邊界框線附近。出現縮放表徵圖後,按住滑鼠左鍵拖拽。

旋轉

選擇一個或多個組件,將滑鼠移動到組件的上邊界附近的白點處。出現旋轉表徵圖後,按住滑鼠左鍵對組件進行旋轉。

組件鎖定

詳情請參見圖層管理

元件圖表層位置移動

在資料看板畫布或者圖層欄中,按右鍵某個組件。在彈出的菜單中,進行置頂置底上移一層下移一層等操作。

產生迭代器

詳情請參見圖層管理

進入藍圖編輯器

進入藍圖編輯器並直接定位到當前元件節點,通過低代碼的編輯實現較為複雜的互動效果。

組件隱藏

詳情請參見圖層管理

組件重新命名

詳情請參見圖層管理

複製ID

複製當前組件ID值,可以在畫布編輯器和藍圖編輯器中快捷搜尋。

組件複製

詳情請參見圖層管理

組件刪除

詳情請參見圖層管理

組件收藏

詳情請參見圖層管理

縮圖

DataV在畫布左下角提供了縮圖功能,您可以使用此功能,調整組件在畫布中的布局。

  • 拉動縮圖下方的比例尺,或者單擊+-調整畫布的大小比例。

  • 當組件超出畫布大小時,可以拖動縮圖的高亮藍色邊框,定位到組件的位置。image

  • 單擊畫布左下角的image表徵圖,可以選擇關閉或開啟縮圖。

快速鍵

畫布快速鍵

  • 選中:滑鼠點擊

  • 多選:ctrl/cmd+滑鼠點擊

  • 操作菜單:滑鼠右鍵

  • 全域搜尋:ctrl/cmd+f

大量設定

操作

描述

大量設定

選中多個組件後,在右側面板可以做如下大量設定。

1

  • 序號1:當選中任意組件時顯示。

    • 對齊:設定多個組件的對齊,包括但不限於靠左對齊、置中對齊、靠右對齊、頂部對齊、水平對齊、底部對齊。

    • 均分方式:設定多個組件的均分方式,包括水平均分和豎直均分。

    • 對象位置:設定多個組件左上方頂點相對於畫布的位置。

    • 對象尺寸:設定多個組件的寬度和高度值。

  • 序號2:當所有選中的組件都支援快捷配置時顯示。

    • 圖表顏色:設定多個組件的圖表顏色。

    • 圖表文字:設定多個組件的圖表文字的字型、字型粗細、字型大小和顏色。

    • 圖表複雜度:設定多個組件的圖表資訊類型,包括簡單、通用和詳細。

  • 序號3:即統一樣式,當所有選中的組件類型相同且所有組件大版本號碼一致時才出現。例如,兩個都是區間柱狀圖且均是5.x版本,即可大量設定。imageimage

成組操作

操作

描述

組操作

  • 成組/解組:詳情請參見圖層管理

  • 搜尋配置:單擊樣式面板右上方的搜尋配置項表徵圖image,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋配置項

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

  • 定位:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。

  • 旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。

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

    • 單擊image表徵圖,控制組件左右翻轉樣式。

    • 單擊image表徵圖,控制組件上下翻轉樣式。

  • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1

  • 互動穿透:開啟後,滑鼠可穿透該組件,避免看板中組件較多時,該組件會遮擋滑鼠與下層組件的互動。

  • 對齊:組件在編輯器中的對齊。

  • 背景:設定組件成組後容器的背景顏色和背景圖片,詳情請參見顏色選取器說明

  • 3D變換:單擊image.png表徵圖,開啟組的3D變換功能。

    • 視距:圖表透視攝影中的視距設定。通過設定消失點的位置,設定不同的視距參數。

    • 子層級變換配置:包括大量設定和單獨配置兩種配置模式。選擇不同的模式均可設定圖表的旋轉、縮放和平移參數。

說明

如需要輪播功能,可以單擊使用輪播容器,具體操作請參見使用輪播容器

使用輪播容器

輪播容器可將多個組件集中在一個固定地區內,通過滑動、翻轉等多種動畫效果動態切換展示。若您的螢幕空間有限,但需要展示大量資料或資訊,可使用輪播容器。1D1861C9-CD15-4A45-98D7-01DBEB261FE8

建立輪播容器

進入畫布編輯器,選中需要進行輪播的所有組件,按右鍵任意組件,選擇使用輪播容器,即可建立輪播容器。建立完成後,輪播容器中的所有組件將作為一個整體進行輪播展示。

說明
  • 一個資料看板可建立多個輪播容器,但每個組件只能被添加至某一個輪播容器中。

  • 若無需再使用輪播容器,則可按右鍵輪播容器,選擇解除輪播容器,解除後,該輪播容器中的組件將會恢複為獨立狀態。

配置輪播容器

單擊輪播容器,可在右側面板配置其基礎樣式,以及互動事件和全域變數等進階配置。

  • 樣式配置

    樣式面板,可配置輪播容器的動畫效果、背景顏色、輪播時間長度等資訊,相關配置項介紹如下。

    說明

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

    配置項

    描述

    圖示

    全域配置

    定義組件在資料看板中的位置分布、透明程度、互動穿透。

    • 不透明度:數值越小,組件越透明。取值範圍為0~1內的數值。

    • 互動穿透:開啟後,滑鼠可穿透該組件,避免看板中組件較多時,該組件會遮擋滑鼠與下層組件的互動。

    image

    輪播樣式配置

    定義輪播的動畫效果:

    • 快速樣式:可快速切換輪播樣式,支援滑動、淡入淡出、翻轉等多種樣式。

    • 動效配置:用於配置輪播樣式、輪播容器中的組件排布(水平或垂直),以及輪播時間長度(單位為ms)。

    image

    基礎樣式配置

    定義輪播容器的背景、內外邊距、可視數量、輪播數量、組件間距、輪播方向、置中效果及陰影製作效果。主要說明如下:

    • 背景:支援更換背景顏色,也可上傳本地圖片作為背景。

    • 內外邊距:設定輪播容器中當前展示的組件距離上下左右四個邊框的距離。

    • 可視數量:輪播容器中同一時間可見的組件數量。

      說明

      僅當輪播樣式配置為滑動櫥窗時生效。

    • 輪播數量:每次輪播的組件數量。

      說明

      通常在可視數量大於1時使用,且僅當輪播樣式配置為滑動櫥窗時生效。

    • 間距:輪播容器中,兩個組件之間的距離。

      說明

      僅當輪播樣式配置為滑動櫥窗時生效。

    image

    自動播放及視差

    定義自動播放的展示及視差效果:

    • 延遲:用於設定自動播放時,兩個過渡動效之間的間隔時間長度(可認為是一個組件的展示時間長度),單位為ms

    • 滑鼠移至上方暫停:開啟後,當滑鼠移至上方至輪播容器時,自動播放將暫停。

    • 視差:用於配置輪播容器中組件的透明程度,以及組件相較於輪播容器的縮放比例。

    image

    其他

    單擊相應按鈕,即可快速執行輪播容器的啟動、暫停或取消(即解除輪播容器)。

    image

  • 進階配置

    進階面板,可定義輪播容器與其他組件間的互動及資料傳遞關係,相關配置項介紹如下。

    配置項

    描述

    圖示

    互動事件

    定義與其他組件、全域變數、工具節點(例如,Websocket節點)的互動配置,實現不同對象間的聯動。單擊添加下遊互動動作,即可定義相關互動動作。同時,支援配置執行該動作所需觸發的判斷條件。

    您也可單擊智能產生,使用自然語言描述互動需求,通過AI協助產生互動事件。

    image

    image

    全域變數

    可在輪播容器中關聯全域參數,實現組件間的參數傳遞,進行組件互動。

    單擊image表徵圖,即可開啟相應指令,並為該指令關聯所需全域變數。當輪播到某一頁時,會拋出臨時變數,預設拋出輪播容器的index欄位值。