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"

}

]