FlyFish是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现符合自己业务需求的炫酷可视化大屏。 同时，FlyFish也提供了灵活的拓展能力，支持组件开发、自定义函数与全局事件等配置， 面向复杂需求场景能够保证高效开发与交付。
需注意，本避坑指南仅针对云智慧开源数据可视化平台FlyFish。如果你也对数据可视化感兴趣，欢迎点击 FlyFish，给 FlyFish Star。以及微信添加xiaoyuerwise回复飞鱼，加入 FlyFish开发者交流群一起探讨。
前篇：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
万元现金福利： http://bbs.aiops.cloudwise.com/t/Activity
微信扫描识别下方二维码，备注【飞鱼】加入AIOps社区飞鱼开发者交流群，与 FlyFish 项目 PMC 面对面交流～
![]()
