FlyFish是云智开源的数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码实现满足业务需求的炫酷可视化大屏。需要注意的是，本教程仅适用于云智开源数据可视化平台FlyFish。如果您喜欢我们的项目，请点击下方代码仓库地址，在GitHub/Gitee仓库上点一个Star。FlyFish简介FlyFish是云智自主设计研发的低门槛、高扩展性的低代码应用开发平台，为数据可视化开发场景提供高效的一站式解决方案。飞鱼提供了丰富的组件库和应用模板，可以通过拖拽的方式完成数据可视化开发，零开发背景的用户也可以完成数据可视化开发。同时，飞鱼还提供了灵活的扩展能力，支持组件化开发、自定义功能、全局事件配置，能够保障复杂需求场景的高效开发和交付。推荐使用FlyFish方法一：在线Demo环境体验方法三：Gitee本地下载部署方法二：GitHub本地下载部署六大组件基础知识注：以下方法如无特殊说明，均挂载在当前组件上props.parent，使用前务必做空判断。组件的DOM结构在组件外部有两层包裹元素。div.dv-component控制组件大小、宽高、zIndex、透明度等的全局配置属性名：$wrap（props.parent中也有）当前方法）div.dv-component-container组件的内容容器。属性名：$container（也在props.parent中）获取：getContainer()（渲染组件一定要用这个方法）组件配置options.json可以配置组件的一些几何配置。config是组件必须的配置项，包括以下配置项：width:widthheight:heightleft:X坐标top:Y坐标name:显示名称visible:是否显示class:CSS类名index:层叠顺序我们可以updatetheconfiguration通过组件上的一些方法来动态改变当前组件的配置。直接设置：setConfig(config)设置宽高：setSize(width=null,height=null)设置坐标：setPosition(left,top)设置显示名称：setName(name)设置是否显示：setVisible(visible)设置CSSclassname:setClass(className)设置组件的级联顺序：setIndex(index)默认配置defaultConfig是组件的默认配置。一般情况下，你只需要提供组件默认的宽高即可，其他配置不需要考虑。当然你也可以重新设置WritegetDefaultConfig来达到配置默认配置的效果。属性配置可以通过文件显式绘制属性设置面板，方便大屏编辑使用开发者暴露的属性进行自定义编辑。当然，开发者也可以在某些逻辑情况下自主调用方法来更新选项。setOptions(options)：该方法不会立即将选项应用到组件，需要再次调用refresh()方法将新的选项应用到组件。更新（选项）：立即应用选项。defaultOptions：定义组件的默认选项。一般情况下，需要将组件支持的所有选项都写在defaultOptions中。它可以让用户一目了然地了解组件支持哪些选项。省去了组件渲染时各种选项是否存在的判断（静态属性）。getDefaultOptions：可以重写该方法，达到与上述属性相同的效果。数据和数据源数据是数据可视化的核心，大部分组件都是为了展示数据而创建的。选项是控制组件的显示样式，但数据是组件的最终内容。组件会监听数据源的数据变化，每当数据源的数据更新时，组件就会重新绘制数据。数据需求组件的数据来自数据源，每个组件只能绑定一个数据源，每个数据源也只能绑定一个组件。数据源的数据必须是二维数组（集合），组件识别的数据也必须是二维数组。默认情况下，一个组件会绑定一个默认的静态数据源（JSON），内置静态数据，让用户可以看到组件默认是什么样子的。SetDataSetDataSourceLoadDataload方法为组件加载数据（每次调用都会刷新一条数据，所以load方法也可以作为刷新数据使用）。在组件内部绘制非数据源数据时，有以下两个方法：setData：该方法不允许组件立即绘制数据到界面，还需要调用redraw方法。draw:应用数据立即生效关于默认数据源如果当前组件需要显示数据，那么一定要重写getDefaultData返回组件默认的静态数据。格式为object[]ComponentupdateFullupdate上面说的refresh和render都是fullupdate。实际刷新内部也是调用了render方法。增量更新update是增量更新，只会更新相应传入的部分。组件钩子下表是组件钩子名称、调用时机等详细信息：钩子名称调用时机(parent)调用时机_constructconstructor挂载时调用_mount挂载时调用_unMountunMount渲染时调用_render渲染调用_updateupdateupdateoption调用_refreshrefresh刷新options，调用_drawdraw绘制数据，调用_redraw重绘数据，调用_normalizenormalize获取归一化数据。_destroydestroy在联动事件发生时调用_connectTo，hook方法获取变量值开源福利如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，点击GitHub/Gitee仓库。Star，我们需要您的鼓励和支持。另外，马上参与FlyFish项目，成为FlyFishContributor，同时还有更多现金等着你。github地址：https://github.com/CloudWise-...Gitee地址：https://gitee.com/CloudWise/f...FlyFish投稿指南：http://bbs.aiops.cloudwise.co...飞鱼模板中心：https://www.cloudwise.ai/flyF...微信搜索xiaoyuerwise或扫描下方二维码，关注【飞鱼】加入AIOps社区飞鱼开发者交流群，交流面对面-与FlyFish项目PMC面对面交流。
