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

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

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

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

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

在这里插入图片描述

在这里插入图片描述

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：
1. 创建一个组件；
2. 将弹窗组件里面滞空，留出传递的内容，并利用飞鱼将组件设置为隐藏；
3. 其他组件点击需要弹窗的时候，使用飞鱼的事件传递，将弹窗显示出来；
4. 弹窗内部长什么样子，现实什么内容，可以固定，也可以让第3条里的组件将内容用html方式传递过来。
Q13：接入数据源到底是什么意思？具备查询功能还是采集功能？

A13：FlyFish接入数据源后支持SQL查询建模，直接可以用在组件里。

开源福利

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

点击下方地址链接，欢迎大家给 FlyFish 点赞送 Star。参与组件开发，更有万元现金等你来拿。

FlyFish｜前端数据可视化开发避坑指南二