共计 3143 个字符，预计需要花费 8 分钟才能阅读完成。
作者|Cary Zhou（周凯）
Cary Zhou（周凯）为云智慧智能研究院 - 技术创新实验室前端工程师，致力于云智慧开源我的项目 FlyFish 和 LCAP 产品的研发，撑持外部研发交付体系可视化业务线，领有丰盛的低代码平台和 SaaS 平台设计开发教训。
开源的低代码平台 -Flyfish
近年来，数据可视化与低代码均已成为高热度词汇。企业决策者和业务人员通过数据可视化直观理解数据背地的信息。低代码具备疾速、繁难、高效、平安、保护、效率、沟通等长处，具体如下：
- 高复用：从本来一锤子的交易，变成能够积淀的资产，不同组件之间也能够积淀复用，数据方向能够标准规范；
- 高效率：低代码开发弥合了 IT 和业务团队之间的沟通鸿沟，进而晋升了工作效率；
- 低成本：解决我的项目交付周期太长、人员老本太大、简略工作重复操作、工作效率太低等问题；
- 低难度：因为低代码开发的特色，让无代码根底也能疾速上手疾速搭建解决方案，大大降低了开发的难度；
- 促成长：应用低代码之后，使工程师们有更多工夫去晋升自我；
咱们将低代码与数据可视化联合打造了 FlyFish- 数据可视化编码平台，可通过利落拽的繁难形式疾速创立数据模型，生成一套数据可视化解决方案，大幅度降低企业老本，更加灵便应答企业一劳永逸的数据展现需要。
FlyFish 在线体验：http://171.12.11.11:23368
FlyFish 开源地址：https://github.com/CloudWise-OpenSource/FlyFish
FlyFish 可视化大屏示例
FlyFish 组件原理
组件基础知识
低代码如何去开发高复用的组件？
首先高复用意味着它须要具备极高的可配置性，为此 FlyFish 可视化大屏的最终产出不蕴含设置，在设计初期它已将可视化组件与可视化组件自定义设置分为两个不同模块。
可视化组件
可视化组件依据设置的不同进行展现，逻辑操作，与其余组件的事件联动等。
组件自定义设置
预设自定义的设置来设置可视化组件，使之出现不同的成果，最大水平的实现组件复用。
组件目录构造
组件的根本目录为 build 文件夹、package.json、options.json 以及 src。build 外面为 webpack 的两个配置；代码实现次要在 src 下方，通过 main.js 注册可视化组件让大屏晓得组件存在，此外，通过 setting.js 注册可视化组件的自定义配置；package.json 次要装可视化组件依赖相干内容；options.json 可了解为整个大屏的渲染模版。
├── build
│ ├── webpack.config.dev.js
│ └── webpack.config.production.js
├── package.json
├── options.json 可视化组件依赖
└── src
├── Component.js 可视化组件类
├── main.js 注册可视化组件
├── setting.js 注册可视化组件的自定义配置
└── settings
├── data.js 自定义配置 - 数据配置扩大
└── options.js 自定义配置 - 属性配置扩大
组件存储构造
FlyFish 可视化大屏最终以下列存储构造渲染出组件。type 为组件的惟一标识。id 为组件的惟一 id。config 里则蕴含大屏的长、宽、低等信息，此类信息批改会导致组件渲染出现异常，故不倡议批改。options 为预留自定义配置端口；dataSource 为数据源，下文会做具体解释。
{
"type": "title",
"id": "UBKO-08U1-C9L4-6OJF-3OMB-3OFN",
"config": {
"left": 534,
"top": 242,
"width": 450,
"height": 280,
"index": 0,
"name": "title",
"visible": true,
"class": ""},"options": {},"dataSource": {"type":"json","options": {"json":"{\"data\":{\"title\":\"题目 \",\"text\":123}}"
}
}
}
组件实体类四大件
组件实体四大类蕴含 config、options、dataSource 以及组件生命周期。
组件 config
width: 宽度
height: 高度
left: X 坐标
top: Y 坐标
name: 显示名
visible: 是否显示
class: CSS 类名
index: 层叠程序
组件 options
齐全凋谢，由自定义而来
组件 dataSource
type: 数据源类型
options：{json: json 字符串}
组件生命周期
应用 react 开发组件
FlyFish 不限度应用任何框架进行开发组件，内置了 React 开发组件的形式，只需依照 FlyFish 组件的生命周期，在适当的生命周期把框架代码渲染在指定组件 dom 上即可。
import ReactComponent from "data-vi/ReactComponent";
import React from "react";
export default class Test extends ReactComponent {getReactComponent() {return ReactTest;}
}
class ReactTest extends React.Component {render() {return "Hello flyFish!";}
}
组件开发内置包
jquery
lodash
moment
requirejs
data-vi/api 组件自定义申请
data-vi/Component 组件开发的基类
data-vi/ReactComponent 基于组件开发的基类的扩大类
data-vi/config 变量配置（globalOptions、componentsDir）data-vi/helpers 应用的办法（内置 lodash 导出）react
react-dom
FlyFish 已内置数据源，但当用户想通过非凡形式发动组件申请时，则可通过应用 import lodash from“lodash”的形式进行。
组件开发 - 申请数据
目前 FlyFish 平台组件开发反对 json、http 以及 screenDataSource 3 种类型，以上类型均可在 FlyFish 组件平台进行配置。在开发过程中，如未含有非凡需要，应用以上三种类型数据申请即可。
组件开发 - 自定义申请数据
倡议尽可能应用 FlyFish 内置申请，如有非凡起因，可应用以下形式来实现自主申请数据。
import {getHttpData} from 'data-vi/api';
import {componentApiDomain} from 'data-vi/config';
getHttpData(componentApiDomain + url, 'POST', {})
.done((request) => {})
.fail((request, xhr, msg) => {});
组件开发 - 款式
- 行内款式
间接写行内款式可实现，但不举荐。
- less
新建.less 文件，关上组件的 enableLoadCssFile 属性为 true，即可在加载组件时加载款式文件。
- css module
新建..module.less 文件，关上组件的 enableLoadCssFile 属性为 true，即可在可视化组件中应用 css module。
总结
最初，欢送大家在 Github（https://github.com/CloudWise-OpenSource/FlyFish）上给 FlyFish 提 Issue 以及奉献高质量的公共组件。也能够登陆 FlyFish 平台（在线体验地址：http://171.12.11.11:23368）设计满足本人需要可视化数据大屏。
更多飞鱼相干请戳此理解
