乾貨|僅需3步完成酷炫數據可視化大屏製作!

語言: CN / TW / HK

本文轉錄自雲智慧前端開發工程師 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://或 https://。此外,開發者可以設置一些全局變量。通過設置頁面和標題以此變更頁面名稱和瀏覽器頁籤 icon。

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

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

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

數據集目的是為大屏提供數據支撐。主要解決多組件公用數據情況,支持靜態數據、數據查詢、數據模型、HTTP數據。

組件配置

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

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

  • CSS類名:單擊選中實時預覽區域中的組件,設置區域中設置組件 css 類名。

  • 組件顯示/隱藏:單擊選中實時預覽區域中的組件,設置組件的顯示/隱藏狀態。

  • 其他:根據組件不同和實際需求,配置個性化組件。

數據方面主要提供組件數據支撐。支持組件綁定數據,支持 靜態數據、數據查詢、http 請求、綁定全局數據集。

完整大屏構建

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

第一步:拖動組件

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

第二步:數據配置

通過數據查詢配置數據

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

在通過數據查詢配置組件數據時,首先需點擊數據查詢列表中的相關數據,隨後點擊新增表格並點擊執行查詢,此時相關數據表格已顯示在結果預覽界面。若只需選擇部分數據,則只需通過添加自定義字段完成數據抽取。

目標數據抽取完成後,在數據查詢中點擊新建基礎查詢選擇對應數據源中的數據表,執行查看數據表詳情無誤後,點擊保存即可。隨後點擊大屏中相對應組件,點擊數據,在數據查詢中選擇目標數據表點擊應用即可看到數據已被應用到相對應組件中。

通過全局數據集配置數據

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

大屏應用

在完成大屏組件拖動與數據配置後,若想部署大屏只需點擊應用下方的導出按鈕,隨後將導出的包解壓後部署到Apache等任意環境即可。

開源福利

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

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

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

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

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

微信搜索xiaoyuerwise或掃描識別下方二維碼,備註【飛魚】加入AIOps社區飛魚開發者交流羣,與 FlyFish 項目 PMC 面對面交流。