作者｜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!";}}

组件开发内置包

jquerylodashmomentrequirejsdata-vi/api 组件自定义申请data-vi/Component 组件开发的基类data-vi/ReactComponent 基于组件开发的基类的扩大类data-vi/config 变量配置（globalOptions、componentsDir）data-vi/helpers 应用的办法（内置lodash导出）reactreact-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) => {});

组件开发-款式

  1. 行内款式

间接写行内款式可实现，但不举荐。

  1. less

新建.less文件，关上组件的enableLoadCssFile属性为true，即可在加载组件时加载款式文件。

  1. css module

新建..module.less文件，关上组件的enableLoadCssFile属性为true，即可在可视化组件中应用css module。

总结

最初，欢送大家在Github（https://github.com/CloudWise-OpenSource/FlyFish）上给FlyFish提Issue以及奉献高质量的公共组件。也能够登陆FlyFish平台（在线体验地址：http://171.12.11.11:23368）设计满足本人需要可视化数据大屏。

更多飞鱼相干请戳此理解