1、選擇分組,新建可視化,創建一個新的大屏:
2、數據可視化的鋪屏:
根據設計圖,通過添加組件的方式,將大屏頁面在DataV中展示出來(可把設計圖置於底層,降低透明度,將需要的組件從組件列表中拖入畫布,更改組建的樣式及位置)
其中組件樣式的修改,可以在右側的配置面板中,根據實際需要調整並修改組件的樣式配置
3、數據的修改
可以在右側樣式面板中選擇數據頁簽,單擊配置數據源,默認是靜態數據源,我們開發的大屏要用API數據源,要通過天擎平台。
數據映射:
當多個組件使用同一個接口時,避免多次重復調用接口,可以選用一個組件配置接口作為數據源,在hook頁再進行各組件數據賦值:
示例:
大屏中地圖接口健康狀況部分中,幾個組件用同一個接口,使用標題組件作為數據源,在右側數據面板配置數據源,再在hook頁為其他組件賦值。首先要通過組件的key獲得組件,然后獲得數據源上的數據,賦值給其它組件
單擊常規組件,在“Console”里查看該組件的key,在hook頁使用
4、配置交互
在藍圖編輯器中配置多個組件之間的交互,如果存在組件之間的交互,交互少可在藍圖編輯器中配置,多的話建議在hook頁進行配置,方便修改和維護(詳細操作可參考在線文檔配置藍圖編輯器部分)
5、大屏的預覽及發布
(1)單擊畫布編輯器右上角的預覽圖標,預覽可視化應用。
預覽成功后,可按照以下步驟發布可視化應用。
(2)單擊畫布編輯器右上角的發布圖標。
(3)在發布對話框中單擊發布大屏。
(4)單擊分享鏈接右側的復制圖標。
(5)打開瀏覽器,將復制的鏈接粘貼到地址欄中,即可在線觀看發布成功的可視化應用。
發布成功后,大屏進行新增修改,可點擊覆蓋發布快照或者自動新增快照並發布,來更新已發布大屏頁面。
6、自定義組件
當DataV中的組件不能滿足開發需求時,需要進行自定義組件,流程如下:
(1)安裝開發工具套件
執行以下命令安裝套件(Mac在terminal中執行,Windows在cmd中執行)。
npm install --registry=https://registry.npm.taobao.org datav-cli -g
安裝成功后,執行datav --version命令,查看開發工具版本。
(需要下載並安裝NodeJS,推薦Node版本在 8.0.0 及以上,10.12.0以下)
(2)生成組件包
通過datav init命令生成組件包(Mac在terminal中執行,Windows在cmd中執行),執行后,需要輸入以下組件信息。
當命令行顯示組件創建完畢時,說明您的組件包已經成功生成。
(3)預覽組件
您可以通過以下命令預覽組件(Mac在terminal中執行,Windows在cmd中執行)。
cd 您的組件名
datav run
當命令行顯示服務啟動時,說明預覽組件的服務已經啟動,Chrome瀏覽器會被自動打開,並導航到組件預覽頁。
組件預覽成功后的效果如下圖所示。
(4)組件開發
具體組件開發包文件參考在線文檔
(5)發布組件
進入組件的目錄地址下,執行datav package命令,在組件目錄外會有一個以組件-版本號命名的tar.gz壓縮包,復制壓縮包名稱
退回到上一層目錄地址下,進行手動打包,執行命令:
將打包好的壓縮包上傳到DataV:
我的組件->我的組件包->對應組件包->點擊上傳組件,將壓縮包拖入,點擊保存
自定義組件在組件列表中我的組件進行查看
注:數據服務質量監控系統大屏,用到2個自定義組件,分別是水球圖以及標簽,組件代碼見文件夾內
四、注意事項
[
{
"area_tree": "/datav-static/2.38.1_14/modules/datavmap-2d-layer-drill/0.4.23/area_tree_city.json",
"area_topo_json": "/datav-static/2.38.1_14/modules/datavmap-2d-layer-drill/0.4.23/area_topo_json_city.json"
}
]