本章節以搭建WebSite Data Dashboard為例,為您示範如何使用DataV空白模板來開發可視化應用專案。
背景資訊
效果展示
按照本文提供的配置完成後,將產生如下效果的資料看板。

可視化應用涉及的配置較多,不同配置最終產生的樣式存在差異,本樣本僅用於瞭解相關功能及操作流程,實際效果請以您的操作為準。
組件資訊
下圖展示了樣本所使用的組件清單,包含各組件名稱及對應數量。

操作步驟
您可通過如下操作,完成空白畫布搭建可視化應用,快速體驗DataV-Board的相關功能。
步驟一:建立可視化應用
步驟二:添加並配置組件
多選操作:在Windows系統下按住Ctrl鍵(Mac系統下按住Command鍵)並單擊組件,可進行多選。
移動組件:通過畫布拖拽或在配置面板中修改座標位置,可調整組件在畫布中的位置。
圖層調整:在左側圖層欄中拖動組件上移或下移,可改變組件的圖層層級。圖層移動時,當兩個組件重疊,位置靠前的組件會覆蓋位置靠後的。
業務指標趨勢
在畫布左側全部資產欄,單擊,將組件添加到畫布中。
單擊組件,在可視化應用右側的配置面板中,根據效果圖配置底層面板中的標題、表徵圖和數值。

重複上述步驟,完成所有業務指標趨勢組件的配置。
通用標題
在畫布左側全部資產欄,單擊,將通用標題組件添加到畫布中。
單擊組件,在可視化應用右側的配置面板中,配置通用標題的樣式。

在通用標題的配置面板中,修改標題名。

重複以上操作,繼續添加其他的通用標題組件。
數字翻牌器
在畫布左側全部資產欄,單擊組件。
單擊組件,在可視化應用右側的配置面板中,配置數字翻牌器的樣式。

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

重複以上操作,繼續添加其他的數字翻牌器組件。
時間器
在畫布左側全部資產欄,單擊組件。
配置時間器的樣式,修改表徵圖樣式、時間器等配置。

自訂背景塊
在畫布左側全部資產欄,單擊組件。
配置自訂背景塊的樣式,修改圖表尺寸和背景色。

儀錶盤
在畫布左側全部資產欄,單擊組件。
配置儀錶盤的樣式,修改系列下的儀錶盤指標等欄位。

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

標註氣泡柱狀圖
在畫布左側全部資產欄,單擊組件。
配置標註氣泡柱狀圖的樣式,修改系列下的元素樣式並修改資料來源等配置。


地區圖
在畫布左側全部資產欄,單擊組件。
配置地區圖的樣式,修改折線樣式並設定資料來源。


重複以上操作,繼續添加其他的地區圖組件。
單張圖片
在畫布左側全部資產欄,單擊組件。
根據所需,修改單張圖片的背景圖。

重複以上操作,繼續添加其他的單張圖片組件。
步驟三:預覽並發布可視化應用
組件的樣式和資料來源都配置完成後,您可以預覽並發布可視化應用,實現看板的線上播放和示範。本步驟為您介紹預覽並發布可視化應用的方法。
單擊畫布編輯器右上方的
表徵圖,跳轉至新頁面預覽可視化應用。預覽成功後,可按照以下步驟發布可視化應用。
單擊畫布編輯器右上方的
表徵圖,在彈出的對話方塊中單擊發布大屏以開啟發佈頁面。在發佈頁面中單擊分享連結右側的
表徵圖複製連結。說明在發佈頁面中,可以按需進行發布資訊和快照管理。
開啟瀏覽器,將複製的連結粘貼到地址欄中,即可線上觀看發布成功的可視化應用。