FlyFish｜前端資料視覺化開發避坑指南（二）

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

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

Q1：從 FlyFish Demo環境中匯出的模板，執行顯示黑屏？

A1：8848埠後邊還跟了路由分發的東西，因此是拿不到元件的js檔案的。需要修改config/env。js裡邊的componentDir加上配置的‘/screen_62c93bd260e71f0e9d29bd5f’。

Q2：生成的大屏頁面需要滾動才能檢視，且尺寸大於 1920 時會出現左右留白情況？

A2：可透過縮放的方式解決上述問題，具體如下圖所示

Q3：用指令碼部署成功後，無報錯和error，但8089和8081埠都沒有被監聽導致無法訪問？

A3：最近在迭代2。2。0版本，main分支程式碼不穩定，可以先用FlyFish-2。1。2版本。

Q4：匯出之後的壓縮包有很多檔案，哪些是需要引用到專案裡的，還是說全部引入進來？

A4：匯出的檔案放在Nginx或是Tocat中才可以釋出，故里面的檔案全都需要的。原始碼是需要使用web伺服器部署，才能被訪問的。

Q5：按部署流程把前端步驟完成後nginx返回403？

A5：SELinux設定為開啟狀態（enabled）的原因。

Q6：MongoDB 連線超時問題？

A6：埠改成27017。初始化資料庫的時候若是authtication失敗，將development裡面連線mongdb的字串去掉賬號密碼。

Q7：平臺部署的時候，vim dist/conf/env-config.js 檔案在哪裡？

A7：編譯好在lcapWeb下的lcapWeb。

Q8：匯出的檔案要怎麼使用呢？部署好之後，提示元件載入失敗？

A8：修改部署包裡邊的 config/env。js。componentDir 加上你的代理，比如加了/testPage ，那componentDir改成testPage/components 預設是components。

Q9：拉取程式碼報錯？

A9：可以嘗試 vpn 或者直接網頁直接下載，不使用 git clone。

Q10：匯出的json如何使用？

A10：匯出後解壓檔案，執行index。html，用nginx等服務釋出出去即可。

Q11：code-server是否可連線雲端的服務？

A11：FlyFish開源版本只提供了linux/mac版的codeServer，。出於安全考慮，我們做了一些功能的禁用和最佳化，比如限制了終端的使用，沒有適配windwos的。 需有需要可按照下圖文件進行本地裝安裝，功能更全，但不建議放在公網，codeServer的終端是可以直接操作您的機器。

Q12：彈窗元件如何開發？

A12：建立一個元件；將彈窗元件裡面滯空，留出傳遞的內容，並利用飛魚將元件設定為隱藏；其他元件點選需要彈窗的時候，使用飛魚的事件傳遞，將彈窗顯示出來；彈窗內部長什麼樣子，現實什麼內容，可以固定，也可以讓第3條裡的元件將內容用html方式傳遞過來。

Q13：接入資料來源到底是什麼意思？具備查詢功能還是採集功能？

A13：FlyFish接入資料來源後支援SQL查詢建模，直接可以用在元件裡。

開源福利

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

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

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

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