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

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

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

1. Q1FlyFish搭建成功后，组件开发模块报错。

A1：组件包未导入，组件包下载地址如下：

https://flyfish-demo.opscloud...

2. Q2：FlyFish2.0 版本前端NPM安装依赖包报错

A2：需使用 Node v12版本 NPM安装依赖包。

3. Q3：FlyFish部署启动后报错

A3：需编译web项目，并将其正确放置在www/static目录下,请先检查此目录下是否有相应的编译之后的代码

4. Q4：NPM源加载失败

A4：可以去掉当前组件 .npmrc与 .yarnrc中内容，此包已发布至NPM公源。

5. Q5：公共组件导出之后重新导入报错

安装配置 FlyFish2.0版本后，组件先在线操作导出，随后再导入无法正常显示，当前使用的mysql，redis，code-server，solution_platform，visual_component_platform均是单独用dokcer做镜像在k8s上运行。

A5：FlyFish 非公众组件无法进行导出操作，因此会导致上述操作失败。公共组件可以在仓库中进行下载：https://github.com/CloudWise-...

6. Q6：组件开发平台npm run build报错

A6：出现上述情况需使用node v12版本，npm安装依赖包，进行编译。

7. Q7：调用公网的 API存在跨域问题

系统信息如下：

• 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)
• 操作系统: CentOS7.6
• Node 版本: NodeJS14.9

A7：开源版本跨域问题需自行使用代理等方式解决，飞鱼企业版内置数据源管理也可解决跨域问题

8. Q8：json文件导出之后重新导入报错

Demo环境下将已编辑好的模板2 json文件导出后，导入至个人模板1时出现报错。系统信息如下：

• 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)
• 操作系统: CentOS7.6
• Node 版本: NodeJS12.22

A8：需检查导出的模板是否完整，如有更改，需检查json是否符合JSON的格式验证。

9. Q9：下载Demo环境下模板后，直接放至tomcat的webapps目录下时访问报错且组件加载失败

系统信息如下：

• 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)
• 操作系统: CentOS7.6

A9：需使用nginx或者其他方式起服务访问，再确认config下env的componentDir路径是否配置正确。

10. Q10：FlyFish组件显示问题

A10：组件需编译成功才能显示，请检查js代码是否正确。

开源福利

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

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

GitHub 地址： https://github.com/CloudWise-...

Gitee 地址：https://gitee.com/CloudWise/f...

万元现金福利： http://bbs.aiops.cloudwise.co...

微信扫描识别下方二维码，备注【飞鱼】加入AIOps社区飞鱼开发者交流群，与 FlyFish 项目 PMC 面对面交流～