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

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

FlyFish介绍

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

推荐使用FlyFish

使用方式一： 线上Demo环境体验

使用方式三： Gitee本地下载部署使用

使用方式二： GitHub本地下载部署使用

组件构成

目录构成

开源数据可视化编排平台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

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

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

开源福利

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

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

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

FlyFish 贡献指南：http://bbs.aiops.cloudwise.co...

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

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