FlyFish|前端資料視覺化開發避坑指南(一)

語言: CN / TW / HK

FlyFish是雲智慧開源的一款資料視覺化編排平臺。通過配置資料模型為使用者提供上百種視覺化圖形元件,零編碼即可實現符合自己業務需求的炫酷視覺化大屏。 同時,FlyFish也提供了靈活的拓展能力,支援元件開發、自定義函式與全域性事件等配置, 面向複雜需求場景能夠保證高效開發與交付。

需注意,本避坑指南僅針對雲智慧開源資料視覺化平臺FlyFish。如果你也對資料視覺化感興趣,歡迎點選FlyFish,給 FlyFish 點 Star。以及微信新增xiaoyuerwise回覆飛魚,加入 FlyFish開發者交流群一起探討。

  1. Q1FlyFish搭建成功後,元件開發模組報錯。

A1:元件包未匯入,元件包下載地址如下:

https://flyfish-demo.opscloudwise.com:23332/commonComponentDownload

  1. Q2:FlyFish2.0 版本前端NPM安裝依賴包報錯

A2:需使用 Node v12版本 NPM安裝依賴包。

  1. Q3:FlyFish部署啟動後報錯

A3:需編譯web專案,並將其正確放置在www/static目錄下,請先檢查此目錄下是否有相應的編譯之後的程式碼

  1. Q4:NPM源載入失敗

A4:可以去掉當前元件 .npmrc與 .yarnrc中內容,此包已釋出至NPM公源。

  1. Q5:公共元件匯出之後重新匯入報錯

安裝配置 FlyFish2.0版本後,元件先線上操作匯出,隨後再匯入無法正常顯示,當前使用的mysql,redis,code-server,solution_platform,visual_component_platform均是單獨用dokcer做映象在k8s上執行。

A5:FlyFish 非公眾元件無法進行匯出操作,因此會導致上述操作失敗。公共元件可以在倉庫中進行下載:https://github.com/CloudWise-OpenSource/FlyFishComponents

  1. Q6:元件開發平臺npm run build報錯

A6:出現上述情況需使用node v12版本,npm安裝依賴包,進行編譯。

  1. Q7:呼叫公網的 API存在跨域問題

系統資訊如下:

  • 瀏覽器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 作業系統: CentOS7.6

  • Node 版本: NodeJS14.9

A7:開源版本跨域問題需自行使用代理等方式解決,飛魚企業版內建資料來源管理也可解決跨域問題

  1. Q8:json檔案匯出之後重新匯入報錯

Demo環境下將已編輯好的模板2 json檔案匯出後,匯入至個人模板1時出現報錯。系統資訊如下:

  • 瀏覽器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 作業系統: CentOS7.6

  • Node 版本: NodeJS12.22

A8:需檢查匯出的模板是否完整,如有更改,需檢查json是否符合JSON的格式驗證。

  1. Q9:下載Demo環境下模板後,直接放至tomcat的webapps目錄下時訪問報錯且元件載入失敗

系統資訊如下:

  • 瀏覽器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 作業系統: CentOS7.6

A9:需使用nginx或者其他方式起服務訪問,再確認config下env的componentDir路徑是否配置正確。

  1. Q10:FlyFish元件顯示問題

A10:元件需編譯成功才能顯示,請檢查js程式碼是否正確。

開源福利

現如今,雲智慧已開源資料視覺化編排平臺 FlyFish 。通過配置資料模型為使用者提供上百種視覺化圖形元件,零編碼即可實現符合自己業務需求的炫酷視覺化大屏。 同時, FlyFish也提供了靈活的拓展能力,支援元件開發、自定義函式與全域性事件等配置, 面向複雜需求場景能夠保證高效開發與交付。

點選下方地址連結,歡迎大家給 FlyFish 點贊送 Star。參與元件開發,更有萬元現金等你來拿。

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

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

萬元現金福利: http://bbs.aiops.cloudwise.com/t/Activity

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