本文轉錄自雲智慧前端開發工程師 Martel Sun 的視訊課程。

原視訊地址：【拖拉拽資料視覺化大屏教程】不用程式碼完成酷炫大屏製作！

FlyFish介紹

FlyFish 是雲智慧開源的一款資料視覺化編排平臺。通過配置資料模型為使用者提供上百種視覺化圖形元件，零編碼即可實現符合自己業務需求的炫酷視覺化大屏。需注意，本教程僅適用於雲智慧開源資料視覺化平臺FlyFish。如果喜歡我們的專案，請點選 FlyFish 程式碼倉庫地址，在 GitHub / Gitee 倉庫上點個 Star。

使用方式一： 線上Demo環境體驗

使用方式二： Gitee本地下載部署使用

使用方式三： GitHub本地下載部署使用

資料視覺化大屏製作

相較於 FlyFish 2.1，FlyFish 2.2.1 的整體大屏編輯頁面均作了優化，因此編輯大屏的時候體驗會更好。FlyFish 2.2.1 支援在同一應用中新增多張大屏，並可以在多張大屏中來回跳轉以及實現大屏輪播資料。除此之外，FlyFish 2.2.1 增加了資料查詢以及PostgreSQL、ClickHouse等更多資料來源，方便開發者們在使用大屏中元件的時候接入資料。最後，FlyFish 2.2.1 也增加了大屏輔助線，以此方便開發者們更快捷、更準確地拖拽以及調整大屏中元件的位置。

大屏配置

下圖為大屏構建頁面，“martel專用”為新新增應用。下方標紅按鈕分別代表編輯應用、刪除應用、匯出應用、複製應用，以及預覽與開發。

點選開發按鈕後，可進入到大屏編輯頁面。左側是大屏頁面編輯區，通過點選左上方的新增按鈕即可新增一個頁面，若想刪除該新增頁面，只需將滑鼠移至頁面標題位置待顯示出刪除按鈕後，點選刪除即可。

左下角為 FlyFish 的元件區，FlyFish 將元件分為基礎元件和專案元件。在基礎元件中，FlyFish 內建了一批開箱即用的高質量元件，能夠應付絕大部分的業務應用場景。包括各類折線圖、柱狀圖、餅圖、散點圖等圖表類元件；自定義中國地圖、地圖路線圖等地圖類元件；圖片、視訊、導航欄、流動箭頭等媒體佈局元件。專案元件即單獨專案開發中所用到的元件。

中間區域為大屏編輯區，正上方按鈕為元件相關編輯按鈕，包括元件置頂、置底、組合、拆解等操作選項。然後我們可以拖拽一個元件過來，可通過 Ctrl+C/V 可複製貼上元件。此外，該大屏編輯頁面的輔助線可以確保開發者們在拖拽元件的時候可以保證能精確對齊，同時也能可以看到每個元件的區域分佈情況。

右上角為大屏儲存、預覽、匯入、匯出相關按鈕。為防止開發者重新進入介面出現已開發大屏丟失的情況，因此在開發大屏時開發者需實時檢視大屏預覽效果並進行儲存。點選預覽時，由於大屏的解析度基本上為 1920*1080 畫素，與部分電腦上的解析度不相匹配，因此會看到大屏預覽介面下方有滾動條。如開發者無需滾動條，可通過在縮放方式選項中選擇全屏鋪滿即可。當開發者選擇匯出大屏時，此時會匯出一個 JSON 檔案，若要重新匯入，則只需將之前匯出的JSON操作匯入即可。

右下方為大屏設定、事件、函式、資料集相關按鈕。點選設定，開發者可以對大屏的解析度、縮放方式進行設定。元件請求 Domain 用於設定元件請求字首，在元件發出請求中會組合介面和字首傳送請求，需注意，請求字首要求必須包含 http://或 http://。此外，開發者可以設定一些全域性變數。通過設定頁面和標題以此變更頁面名稱和瀏覽器頁籤 icon。

自定義 CSS 主要是改變元件的樣式。設定自定義 CSS 會掛載在視覺化預覽區域全域性，可設定全域性 CSS 覆蓋元件預設樣式。如下圖所示，可以通過設定自定義 CSS 將元件背景色改為紅色。

事件主要用途為監聽頁面或者元件的行為，觸發相應的動作。常用於頁面和元件的互動、元件間相互通訊。需注意，設定的自定義事件只能提供給當前頁面使用。如下圖所示，開發者可通過完成設定事件源（趨勢圖）➡️ 事件型別（滑鼠移入）➡️ 操作（呼叫元件方法（趨勢圖 複製））➡️ 時間動作（hide）➡️ 配置系列動作達到移入滑鼠趨勢圖消失的目的。

函式通常與事件搭配使用，開發者可對函式進行增刪改查。需注意，設定的自定義函式只能提供給當前頁面使用。如下圖所示，開發者可通過編寫相關函式以及設定相關事件達成大屏this的日誌的列印。

資料集目的是為大屏提供資料支撐。主要解決多元件公用資料情況，支援靜態資料、資料查詢、資料模型、HTTP資料。

元件配置

在元件配置中，當開發者選中目標元件時便可以操作樣式和資料等相關配置。樣式配置中，開發者可以對元件的區域、CSS類名、元件顯示/隱藏以及其他等內容進行配置更改。

• 區域：單擊選中實時預覽區域中的元件，設定區域中設定元件寬高，輸入相應的寬高。在實時預覽區域拖拽改變元件寬高位置與此處輸入框數值一致。

• CSS類名：單擊選中實時預覽區域中的元件，設定區域中設定元件 css 類名。

• 元件顯示/隱藏：單擊選中實時預覽區域中的元件，設定元件的顯示/隱藏狀態。

• 其他：根據元件不同和實際需求，配置個性化元件。

資料方面主要提供元件資料支撐。支援元件繫結資料，支援 靜態資料、資料查詢、http 請求、繫結全域性資料集。

完整大屏構建

上述講解了大屏及元件的基礎配置，本小節將講解如何構建一張完整大屏。

第一步：拖動元件

在拖動元件的同時可完成元件相關樣式配置。

第二步：資料配置

通過資料查詢配置資料

資料查詢是在下拉列表中選擇資料查詢資訊。在飛魚平臺接入資料來源後，開發者可以通過資料查詢功能篩選目標資料，隨後組成新的資料集合。此外，也可以其他多個數據重新組合成一個新的資料集合，這便是資料查詢中資料列表的來源。

在通過資料查詢配置元件資料時，首先需點選資料查詢列表中的相關資料，隨後點選新增表格並點選執行查詢，此時相關資料表格已顯示在結果預覽介面。若只需選擇部分資料，則只需通過新增自定義欄位完成資料抽取。

目標資料抽取完成後，在資料查詢中點選新建基礎查詢選擇對應資料來源中的資料表，執行檢視資料表詳情無誤後，點選儲存即可。隨後點選大屏中相對應元件，點選資料，在資料查詢中選擇目標資料表點選應用即可看到資料已被應用到相對應元件中。

通過全域性資料集配置資料

在通過全域性資料集配置資料時，首先需新增一個數據集，此時資料型別可選擇資料查詢，資料選擇上述資料查詢中的資料表即可。隨後選擇大屏中相對應元件，點選資料，在全域性資料集資料中選擇目標資料集，完成X軸與Y軸顯示資料設定（如無X軸和Y軸，亦可通過資料結構處理，對返回資料做進一步處理，以適配到對應元件中），點選應用，即可看到資料已被應用到相對應元件中。

大屏應用

在完成大屏元件拖動與資料配置後，若想部署大屏只需點選應用下方的匯出按鈕，隨後將匯出的包解壓後部署到Apache等任意環境即可。

開源福利

上述便是完成大屏製作流程，如果喜歡我們的專案，請不要忘記點選下方程式碼倉庫地址，在 GitHub / Gitee 倉庫上點個 Star，我們需要您的鼓勵與支援。此外，即刻參與 FlyFish 專案貢獻成為 FlyFish Contributor 的同時更有萬元現金等你來拿。

GitHub 地址： http://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址：http://gitee.com/CloudWise/fly-fish

FlyFish貢獻指南：http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版中心： http://www.cloudwise.ai/flyFishComponents.html

微信搜尋xiaoyuerwise或掃描識別下方二維碼，備註【飛魚】加入AIOps社群飛魚開發者交流群，與 FlyFish 專案 PMC 面對面交流。