全部產品
Search
文件中心

DataV:空白畫布搭建可視化應用

更新時間:Jun 19, 2025

本章節以搭建WebSite Data Dashboard為例,為您示範如何使用DataV空白模板來開發可視化應用專案。

背景資訊

  • 樣本使用待用資料源,因此可以直接在組件的資料配置地區粘貼準備好的資料。如果您的資料來源為CSV檔案資料庫等其他類型,需要先添加資料來源

  • 如果您需要使用API資料來源,可直接在資料配置欄輸入API地址。具體配置時,如需啟用伺服器代理請求等操作,請參見配置跨域資料

效果展示

按照本文提供的配置完成後,將產生如下效果的資料看板。

image

說明

可視化應用涉及的配置較多,不同配置最終產生的樣式存在差異,本樣本僅用於瞭解相關功能及操作流程,實際效果請以您的操作為準。

組件資訊

下圖展示了樣本所使用的組件清單,包含各組件名稱及對應數量。

image

操作步驟

您可通過如下操作,完成空白畫布搭建可視化應用,快速體驗DataV-Board的相關功能。

步驟一:建立可視化應用

  1. 登入DataV控制台

  2. 我的可視化頁面中,單擊PC端建立。在頁面中選擇空白畫板並單擊建立專案

  3. 建立資料大屏對話方塊中,輸入可視化應用程式名稱並選擇專案分組,未建立分組時可選擇未分組

    應用建立成功後會跳轉到應用編輯器頁面。您可按需接入資料來源並配置畫布資訊。

    說明

    畫布尺寸預設為1920*1080,您可在畫布編輯器右側的頁面配置地區按需調整。

步驟二:添加並配置組件

說明
  • 多選操作:在Windows系統下按住Ctrl鍵(Mac系統下按住Command鍵)並單擊組件,可進行多選。

  • 移動組件:通過畫布拖拽或在配置面板中修改座標位置,可調整組件在畫布中的位置。

  • 圖層調整:在左側圖層欄中拖動組件上移或下移,可改變組件的圖層層級。圖層移動時,當兩個組件重疊,位置靠前的組件會覆蓋位置靠後的。

業務指標趨勢

  1. 在畫布左側全部資產欄,單擊資訊 > 業務指標趨勢,將組件添加到畫布中。

  2. 單擊組件,在可視化應用右側的配置面板中,根據效果圖配置底層面板中的標題表徵圖數值image

  3. 重複上述步驟,完成所有業務指標趨勢組件的配置。

通用標題

  1. 在畫布左側全部資產欄,單擊資訊 > 通用標題,將通用標題組件添加到畫布中。

  2. 單擊組件,在可視化應用右側的配置面板中,配置通用標題的樣式。通用標題-樣式

  3. 通用標題配置面板中,修改標題名。image

  4. 重複以上操作,繼續添加其他的通用標題組件。

數字翻牌器

  1. 在畫布左側全部資產欄,單擊資訊 > 數字翻牌器組件。

  2. 單擊組件,在可視化應用右側的配置面板中,配置數字翻牌器的樣式。

    數字翻牌器-樣式

  3. 數字翻牌器資料面板,將value值改成您需要顯示的資料。

    配置數字翻牌器組件資料

  4. 重複以上操作,繼續添加其他的數字翻牌器組件。

時間器

  1. 在畫布左側全部資產欄,單擊資訊 > 時間器組件。

  2. 配置時間器的樣式,修改表徵圖樣式時間器等配置。image

自訂背景塊

  1. 在畫布左側全部資產欄,單擊媒體 > 自訂背景塊組件。

  2. 配置自訂背景塊的樣式,修改圖表尺寸背景色

    image

儀錶盤

  1. 在畫布左側全部資產欄,單擊圖表 > 餅環圖 > 儀錶盤組件。

  2. 配置儀錶盤的樣式,修改系列下的儀錶盤指標等欄位。

    image

  3. 根據所需,修改資料項目JSON檔案。image

標註氣泡柱狀圖

  1. 在畫布左側全部資產欄,單擊圖表 > 柱狀圖 > 標註氣泡柱狀圖組件。

  2. 配置標註氣泡柱狀圖的樣式,修改系列下的元素樣式並修改資料來源等配置。

    imageimage

地區圖

  1. 在畫布左側全部資產欄,單擊圖表 > 地區圖組件。

  2. 配置地區圖的樣式,修改折線樣式設定資料來源

    imageimage

  3. 重複以上操作,繼續添加其他的地區圖組件。

單張圖片

  1. 在畫布左側全部資產欄,單擊媒體 > 單張圖片組件。

  2. 根據所需,修改單張圖片的背景圖image

  3. 重複以上操作,繼續添加其他的單張圖片組件。

步驟三:預覽並發布可視化應用

組件的樣式和資料來源都配置完成後,您可以預覽並發布可視化應用,實現看板的線上播放和示範。本步驟為您介紹預覽並發布可視化應用的方法。

  1. 單擊畫布編輯器右上方的{FA4AF138-6B6B-4DF3-AA90-521D2359AFB3}表徵圖,跳轉至新頁面預覽可視化應用。

    預覽成功後,可按照以下步驟發布可視化應用。

  2. 單擊畫布編輯器右上方的{F18FCB2F-9D3E-4A35-9995-D9A7EFEA0EF6}表徵圖,在彈出的對話方塊中單擊發布大屏以開啟發佈頁面。

  3. 在發佈頁面中單擊分享連結右側的image.png表徵圖複製連結。

    說明

    在發佈頁面中,可以按需進行發布資訊和快照管理

  4. 開啟瀏覽器,將複製的連結粘貼到地址欄中,即可線上觀看發布成功的可視化應用。

相關文檔