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

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 面对面交换。