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

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

2022-08-23 18:00 https://my.oschina.net/yunzhihui/blog/5568886 云智慧AIOps社区 次阅读 条评论

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

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

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

  1. Q1:从 FlyFish Demo环境中导出的模板,运行显示黑屏?

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

  2. Q2:生成的大屏页面需要滚动才能查看,且尺寸大于 1920 时会出现左右留白情况?

    A2:可通过缩放的方式解决上述问题,具体如下图所示

  3. Q3:用脚本部署成功后,无报错和error,但8089和8081端口都没有被监听导致无法访问?

    A3:最近在迭代2.2.0版本,main分支代码不稳定,可以先用FlyFish-2.1.2版本。

  4. Q4:导出之后的压缩包有很多文件,哪些是需要引用到项目里的,还是说全部引入进来?

    A4:导出的文件放在Nginx或是Tocat中才可以发布,故里面的文件全都需要的。源码是需要使用web服务器部署,才能被访问的。

  5. Q5:按部署流程把前端步骤完成后 nginx 返回403?

    A5:SELinux设置为开启状态(enabled)的原因。

  6. Q6: MongoDB 连接超时问题?

    A6:端口改成27017。初始化数据库的时候若是authtication失败,将development里面连接mongdb的字符串去掉账号密码。

  7. Q7:平台部署的时候,vim dist/ conf /env-config.js 文件在哪里?

    A7:编译好在lcapWeb下的lcapWeb。

  8. Q8:导出的文件要怎么使用呢?部署好之后,提示组件加载失败?

    A8:修改部署包里边的 config/env.js。componentDir 加上你的代理,比如加了/testPage ,那componentDir改成testPage/components 默认是components。

  9. Q9:拉取代码报错?

    A9:可以尝试 vpn 或者直接网页直接下载,不使用 git clone。

  10. Q10:导出的 json 如何使用?

    A10:导出后解压文件,运行index.html,用nginx等服务发布出去即可。

  11. Q11:code-server是否可连接云端的服务?

    A11:FlyFish开源版本只提供了linux/mac版的codeServer,。出于安全考虑,我们做了一些功能的禁用和优化,比如限制了终端的使用,没有适配windwos的。 需有需要可按照下图文档进行本地装安装,功能更全,但不建议放在公网,codeServer的终端是可以直接操作您的机器。

  12. Q12:弹窗组件如何开发?

    A12:

    1. 创建一个组件;
    2. 将弹窗组件里面滞空,留出传递的内容,并利用飞鱼将组件设置为隐藏;
    3. 其他组件点击需要弹窗的时候,使用飞鱼的事件传递,将弹窗显示出来;
    4. 弹窗内部长什么样子,现实什么内容,可以固定,也可以让第3条里的组件将内容用html方式传递过来。
  13. 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 面对面交流~

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