FlyFish是云智慧開源的一款數據可視化編排平臺。通過配置數據模型為用戶提供上百種可視化圖形組件，零編碼即可實現符合自己業務需求的炫酷可視化大屏。 同時，FlyFish也提供了靈活的拓展能力，支持組件開發、自定義函數與全局事件等配置， 面向復雜需求場景能夠保證高效開發與交付。

需注意，本避坑指南僅針對云智慧開源數據可視化平臺FlyFish。如果你也對數據可視化感興趣，歡迎點擊 FlyFish，給 FlyFish Star。以及微信添加xiaoyuerwise回復飛魚，加入 FlyFish開發者交流群一起探討。

前篇：FlyFish｜前端數據可視化開發避坑指南（一）

1. Q1：從 FlyFish Demo環境中導出的模板，運行顯示黑屏？

   A1：8848端口后邊還跟了路由分發的東西，因此是拿不到組件的js文件的。需要修改config/env.js里邊的componentDir加上配置的'/screen_62c93bd260e71f0e9d29bd5f'。

   

2. Q2：生成的大屏頁面需要滾動才能查看，且尺寸大于 1920 時會出現左右留白情況？

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

   

   

3. Q3：用腳本部署成功后，無報錯和error，但8089和8081端口都沒有被監聽導致無法訪問？

   A3：最近在迭代2.2.0版本，main分支代碼不穩定，可以先用FlyFish-2.1.2版本。

4. Q4：導出之后的壓縮包有很多文件，哪些是需要引用到項目里的，還是說全部引入進來？

   A4：導出的文件放在Nginx或是Tocat中才可以發布，故里面的文件全都需要的。源碼是需要使用web服務器部署，才能被訪問的。

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

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

6. Q6： MongoDB 連接超時問題？

   A6：端口改成27017。初始化數據庫的時候若是authtication失敗，將development里面連接mongdb的字符串去掉賬號密碼。

   

7. Q7：平臺部署的時候，vim dist/ conf /env-config.js 文件在哪里？

   A7：編譯好在lcapWeb下的lcapWeb。

8. Q8：導出的文件要怎么使用呢？部署好之后，提示組件加載失敗？

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

9. Q9：拉取代碼報錯？

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

10. Q10：導出的 json 如何使用？

    A10：導出后解壓文件，運行index.html，用nginx等服務發布出去即可。

11. Q11：code-server是否可連接云端的服務？

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

12. Q12：彈窗組件如何開發？

    A12：

    1. 創建一個組件；
    2. 將彈窗組件里面滯空，留出傳遞的內容，并利用飛魚將組件設置為隱藏；
    3. 其他組件點擊需要彈窗的時候，使用飛魚的事件傳遞，將彈窗顯示出來；
    4. 彈窗內部長什么樣子，現實什么內容，可以固定，也可以讓第3條里的組件將內容用html方式傳遞過來。

13. Q13：接入數據源到底是什么意思？具備查詢功能還是采集功能？

    A13：FlyFish接入數據源后支持SQL查詢建模，直接可以用在組件里。

開源福利

現如今，云智慧已開源數據可視化編排平臺 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 面對面交流～