您的位置:  首页 > 技术 > 前端 > 正文

FlyFish|前端数据可视化开发避坑指南(一)

2022-05-20 14:00 https://my.oschina.net/yunzhihui/blog/5528516 云智慧AIOps社区 次阅读 条评论

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

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

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

A1:组件包未导入,组件包下载地址如下:

https://flyfish-demo.opscloudwise.com:23332/commonComponentDownload

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

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

  1. Q3:FlyFish部署启动后报错

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

  1. Q4:NPM源加载失败

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

  1. Q5:公共组件导出之后重新导入报错

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

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

  1. Q6:组件开发平台npm run build报错

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

  1. Q7:调用公网的 API存在跨域问题

系统信息如下:

  • 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 操作系统: CentOS7.6

  • Node 版本: NodeJS14.9

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

  1. Q8:json文件导出之后重新导入报错

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

  • 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 操作系统: CentOS7.6

  • Node 版本: NodeJS12.22

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

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

系统信息如下:

  • 浏览器版本: Version 101.0.4951.64 (Official Build) (x86_64)

  • 操作系统: CentOS7.6

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

  1. Q10:FlyFish组件显示问题

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

开源福利

现如今,云智慧已开源数据可视化编排平台 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 面对面交流~

展开阅读全文
  • 0
    感动
  • 0
    路过
  • 0
    高兴
  • 0
    难过
  • 0
    搞笑
  • 0
    无聊
  • 0
    愤怒
  • 0
    同情
热度排行
友情链接