【大屏項目】—— 使用DataV開發步驟


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"

  }

]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM