数据可视化系列教程之组件构成

2022-09-01 377

FlyFish是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现符合自己业务需求的炫酷可视化大屏。需注意，本教程仅适用于云智慧开源数据可视化平台FlyFish。如果喜欢我们的项目，请点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star。

FlyFish介绍

FlyFish 是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台，为数据可视化开发场景提供了高效的一站式解决方案。飞鱼提供丰富的组件和应用模板库，可通过拖拉拽的形式完成数据可视化开发，零开发背景的用户也可完成数据可视化开发工作。同时，飞鱼也提供了灵活的拓展能力，支持组件开发、自定义函数与全局事件等配置，面向复杂需求场景能够保证高效开发与交付。

组件构成

目录构成

开源数据可视化编排平台FlyFish目录构成具体如下图所示：

目录解析

build/webpack.config.dev.js

解析：该文件主要为开发阶段 webpack 配置使用。

build/webpack.config.production.js

解析：该文件主要为打包阶段使用(用作定制化包行为)。

package.json

解析：每个组件可以安装自己的依赖进行管理。

注意：若使用在线开发, 为避免后面保存代码导致服务打包出错，在使用独立依赖的情况下需点击右上角的安装依赖进行预环境内的依赖安装,

assets

解析：用于存放各种静态资源。

src/Component.js

解析：组件 code。

src/index.less

解析：组件样式。

若组件内部静态变量enableLoadCssFile为false则会出现样式丢失的问题，解决办法为切换为true或更改其他样式添加方式, 比如style-component or jquery style head。

src/main.js(entry)

解析：组件入口文件。在该文件内主要进行组件的注册。核心代码如下：

src/setting.js(entry)

组件配置、数据、事件注册入口。在该文件内将settings文件夹内的配置、事件和数据注册到大屏组件中, 核心代码如下:

src/settings/data.js

解析：用于为组件在开发过程中大屏预览点击之后数据面板设置, 核心代码如下:

src/settings/options.js

解析：用于为组件在开发过程中大屏预览点击之后样式属性面板设置, 核心代码如下:

src/settings/event.js

解析：用于为组件设置可用事件, 核心代码如下:

options.json

解析：用于配置组件的一些几何以及类名等。具体体现会在样式面板中展示, 核心代码如下:

FAQ

目录中的文件都是必须的吗？

除assets、Component.js、src/settings.js都为必要文件，尤其是src/main.js和src/setting.js为我们为组件编译的主入口文件。建议您使用标准的目录结构。

开源福利

如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，我们需要您的鼓励与支持。此外，即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。

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

Gitee 地址：https://gitee.com/CloudWise/fly-fish

FlyFish 贡献指南：http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版中心： https://www.cloudwise.ai/flyFishComponents.html

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

微信关注我们

原文链接：https://my.oschina.net/yunzhihui/blog/5572163

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

中国开源社区 Landscape 社区畅聊之 Dromara ：聊聊 LiteFlow 与 Hertzbeat

了解一个开源项目的时候，我们在看它的功能、架构、性能、开源许可证—— 大部分时间我们在看这个项目本身，对项目背后的开源社区，或者对项目作者知之甚少。这次，中国开源社区 Landscape 社区（COSCLC）推出《COSCLC 社区畅聊》系列直播，把目光聚焦于开源项目背后的开源社区和开源作者，让他们来畅聊一下：自己的开源项目因何而起、经历了怎样的发展，开源作者/社区在开源过程中的酸甜苦辣、开源项目的运营经验... 每个开源项目的背后都有不同的故事，让我们倾听这些来自社区，来自作者的声音。 COSCLC 社区畅聊系列第一期【Dromara ：聊聊 LiteFlow 与 Hertzbeat】，邀请了来自 Dromara 社区的 LiteFlow 与 Hertzbeat 作者，畅聊关于他们的开源故事。关于 Dromara 开源社区 Dromara 是由国内顶尖的开源项目作者共同组成的开源社区。提供包括分布式事务，流行工具，企业级认证，微服务RPC，运维监控，Agent监控，分布式日志，调度编排等一系列开源产品，以及解决方案与咨询、技术支持与培训认证服务。 Dromara开源社区目前拥...

2022-09-01

633

用过 GitLab 的同学肯定也对 GitLab CI/CD 不陌生，GitLab CI/CD 是一个内置在 GitLab 中的工具，它可以帮助我们在每次代码推送时运行一系列脚本来构建、测试和验证代码的更改以及部署。 Rainbond 本身默认集成了 CI/CD 的整套流程，用户只需提供源代码，后续构建、运行完全交给 Rainbond 处理，整个过程是由 Rainbond 定义的，无需用户干预。这样有利也有弊，利就是简化用户的操作和无需学习 CI/CD 相关知识；弊是用户无法在 CI/CD 过程中自定义，比如想集成代码检测或运行个脚本，这在 Rainbond 的源码构建流程中是不可自定义的。本文给大家讲述如何使用 GitLab CI/CD 构建、测试、部署 Spring Boot 应用，将产物运行在 Rainbond 上。 GitLab CI 介绍使用 GitLab CI 需要在仓库根目录下创建 .gitlab-ci.yml 文件。在这个文件中，你可以定义需要运行的编译、测试、部署脚本。在添加了 .gitlab-ci.yml 文件后，当推送代码时，GitLab Runner 自动...

2022-09-01

406

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。