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

2022 年 8 月 23 日
北京
本文字数：1518 字
阅读完需：约 5 分钟

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 的终端是可以直接操作您的机器。