作者｜CaryZhou（周凯）CaryZhou（周凯）云智能研究院-技术创新实验室前端工程师，致力于云智能开源来源项目FlyFish和LCAP产品研发支持内部研发交付系统可视化业务线，具有丰富的低代码平台和SaaS平台设计开发经验。开源低代码平台——Flyfish近年来，数据可视化和低代码成为热词。企业决策者和业务人员可以通过数据可视化直观了解数据背后的信息。低代码具有速度、简单、高效、安全、维护、高效、沟通等优势，具体如下：数据方向可以规范标准；高效率：低代码开发弥合了IT与业务团队之间的沟通鸿沟，从而提高工作效率；低成本：解决项目交付周期过长、人员成本过高、简单工作重复、工作效率低等问题；难度低：由于低代码开发的特点，可以在没有代码基础的情况下快速构建解决方案，大大降低了开发难度；促进成长：使用低代码后，工程师有更多的时间来提升自己；我们结合低代码和数据可视化打造飞鱼-数据可视化编码平台，通过简单的拖拽方式快速创建数据模型，生成一套数据可视化解决方案，大大降低企业成本，更加灵活响应企业日益增长的数据展示需求。FlyFish在线体验：http://171.12.11.11:23368FlyFish开源地址：https://github.com/CloudWise-OpenSource/FlyFishFlyFish可视化大屏示例FlyFish组件原理组件基础知识如何开发具有高复用性的组件低代码？首先，高复用性意味着它需要有极高的可配置性。为此，FlyFish可视化大屏最终输出不包含设置。在设计初期，将可视化组件和可视化组件的自定义设置分为两个不同的模块。.可视化组件可视化组件根据不同的设置、逻辑操作和与其他组件的事件联动来显示。组件自定义设置预设自定义设置，设置可视化组件呈现不同效果，最大程度实现组件复用。组件目录结构组件的基本目录是build文件夹、package.json、options.json和src。构建中webpack有两种配置；代码实现主要在src下，通过main.js注册可视化组件，让大屏知道组件存在。另外，可视化组件的自定义配置是通过setting.js注册的；package.json主要安装可视化组件Components依赖相关内容；options.json可以理解为整个大屏的渲染模板。├──build│├──webpack.config.dev.js│└──webpack.config.production.js├──package.json├──options.json可视组件依赖└──src├──组件。js可视化组件类├──main.js注册可视化组件├──setting.js注册可视化组件自定义配置└──settings├──data.js自定义配置-数据配置扩展└──options.js自定义配置-property配置扩展组件存储结构FlyFish可视化大屏最终渲染出的组件存储结构如下。type是组件的唯一标识符。id是组件的唯一标识。配置包含大屏的长宽高信息。修改此类信息会导致组件渲染异常，不建议修改。options是保留的自定义配置端口；dataSource是数据源，下面会详细说明。{“类型”：“标题”，“id”：“UBKO-08U1-C9L4-6OJF-3OMB-3OFN”，“配置”：{“左”：534，“顶部”：242，“宽度”：450，"height":280,"index":0,"name":"title","visible":true,"class":""},"options":{},"dataSource":{"type":"json","options":{"json":"{\"data\":{\"title\":\"title\",\"text\":123}}"}}}组件实体类四大组件实体这四大类包括config、options、dataSource和componentlifecycle。组件configwidth:widthheight:heightleft:X坐标top:Y坐标name:显示名称visible:是否显示class:CSS类名index:层叠顺序组件选项完全开放，来自自定义组件dataSourcetype:数据源类型选项：{json:jsonstring}组件生命周期使用react开发组件飞鱼不限制使用任何框架开发组件。内置的React开发组件方法只需要根据FlyFish组件的生命周期在合适的生命周期渲染框架代码即可。就在指定的组件dom上。从“data-vi/ReactComponent”导入ReactComponent；从“react”导入React；导出默认类TestextendsReactComponent{getReactComponent(){returnReactTest;}}classReactTestextendsReact.Component{render(){return“HelloflyFish！";}}组件开发内置包jquerylodashmomentrequirejsdata-vi/api组件自定义请求data-vi/组件开发基类data-vi/ReactComponent基类扩展类基于组件开发data-vi/config变量配置(globalOptions,componentsDir)data-vi/helpers使用的方法(内置lodashexport)reactreact-domFlyFish内置了数据源，但是当用户想以特殊方式发起组件请求时，可以使用importlodash来自“lodash”。组件开发-请求数据目前FlyFish平台组件开发支持三种类型：json、http和screenDataSource，都可以在FlyFish组件平台上进行配置。在开发过程中，如果没有特殊需求，直接使用以上三种数据请求即可。组件开发-自定义请求数据建议尽量使用FlyFish内置的请求。如果有特殊原因，可以使用以下方法实现独立请求数据。从'data-vi/api'导入{getHttpData}；从'data-vi/config'导入{componentApiDomain}；getHttpData（componentApiDomain+url，'POST'，{}）。完成（（请求）=>{}）.fail((request,xhr,msg)=>{});组件开发风格内联样式直接写内联样式是可以的，但不推荐。less新建一个.less文件，打开组件的enableLoadCssFile属性为true，然后在加载组件的时候加载样式文件。cssmodule新建一个..module.less文件，打开组件的enableLoadCssFile属性为true，然后在可视化组件中使用cssmodule。总之，欢迎大家在Github（https://github.com/CloudWise-OpenSource/FlyFish）上向FlyFish提交issue，贡献优质的公共组件。您也可以登录飞鱼平台（在线体验地址：http://171.12.11.11:23368）设计满足您需求的可视化数据大屏。更多关于飞鱼的信息，请点击这里
