FlyFish是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现符合自己业务需求的炫酷可视化大屏。 同时，FlyFish也提供了灵活的拓展能力，支持组件开发、自定义函数与全局事件等配置， 面向复杂需求场景能够保证高效开发与交付。

需注意，本避坑指南仅针对云智慧开源数据可视化平台FlyFish。如果你也对数据可视化感兴趣，欢迎点击 FlyFish，给 FlyFish Star。以及微信添加xiaoyuerwise回复飞鱼，加入 FlyFish开发者交流群一起探讨。

前篇：FlyFish｜前端数据可视化开发避坑指南（一）

1. Q1：从 FlyFish Demo环境中导出的模板，运行显示黑屏？

   A1：8848端口后边还跟了路由分发的东西，因此是拿不到组件的js文件的。需要修改config/env.js里边的componentDir加上配置的’/screen_62c93bd260e71f0e9d29bd5f’。

1. 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