共计 2621 个字符，预计需要花费 7 分钟才能阅读完成。
FlyFish 是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现合乎本人业务需要的炫酷可视化大屏。需注意，本教程仅实用于云智慧开源数据可视化平台 FlyFish。如果喜爱咱们的我的项目，请点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star。
FlyFish 介绍
FlyFish 是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码利用开发平台，为数据可视化开发场景提供了高效的一站式解决方案。飞鱼提供丰盛的组件和利用模板库，可通过利落拽的模式实现数据可视化开发，零开发背景的用户也可实现数据可视化开发工作。同时，飞鱼也提供了灵便的拓展能力，反对组件开发、自定义函数与全局事件等配置，面向简单需要场景可能保障高效开发与交付。
举荐应用 FlyFish
应用形式一： 线上 Demo 环境体验
应用形式三： Gitee 本地下载部署应用
应用形式二： GitHub 本地下载部署应用
六大组件基础知识
留神：上面的办法若不特地指出均挂载在以后组件的 props.parent上, 应用前务必做判空解决
组件 DOM 构造
在组件内部存在两层包裹元素。
div.dv-component
管制组件的尺寸, 宽高, zIndex, 透明度等全局配置。
- 属性名: $wrap(同样在 props.parent)
- 获取: getWrap()(组件开发过程中，请勿应用以后办法)
div.dv-component-container
组件的内容容器。
- 属性名: $container(同样在 props.parent)
- 获取: getContainer()(渲染组件请务必应用此办法)
组件配置
options.json 中能够配置组件的一些几何配置。config 是组件必填的配置项, 包含以下配置项:
- width: 宽度
- height: 高度
- left: X 坐标
- top: Y 坐标
- name: 显示名
- visible: 是否显示
- class: CSS 类名
- index: 层叠程序
更新配置
咱们能够通过组件身上的一些办法来动静更改以后组件的配置。
- 间接设置: setConfig(config)
- 设置宽高: setSize(width = null, height = null)
- 设置坐标: setPosition(left, top)
- 设置显示名: setName(name)
- 设置是否显示: setVisible(visible)
- 设置 CSS 类名: setClass(className)
- 设置组件层叠程序: setIndex(index)
默认配置
defaultConfig 是组件的默认配置, 个别状况下, 只须要提供组件默认的宽和高就能够了, 其余配置不必思考. 当然也能够通过重写 getDefaultConfig 来达到配置默认配置的成果。
属性配置
能够通过文件来显式的绘制属性设置面板, 便于大屏编辑者来利用开发者暴露出的属性来进行客制化编辑。当然开发者也能够在某些逻辑状况下自主的调用办法来更新 options。
- setOptions(options): 此办法并不会把选项立刻利用到组件上, 还须要再调用 refresh()办法, 能力把新的选项利用到组件上。
- update(options): 利用选项立刻失效。
- defaultOptions: 定义组件默认的选项, 个别状况下, 须要把组件反对的所有选项都写在 defaultOptions 中。
- 能让使用者一眼能看懂组件都反对哪些选项。
- 省去了组件渲染时的各种选项是否存在的判断(动态属性)。
- getDefaultOptions: 可通过重写此办法达到和下面属性一样的成果。
数据和数据源
数据是数据可视化的外围, 大部分组件都是为了展现数据而发明。选项 options 是管制组件的显示款式，然而数据才是组件最终要展现的内容。组件会监听数据源的数据变动，每当数据源的数据更新时，组件就会从新绘制数据。
数据要求
- 组件的数据来源于数据源, 且每个组件只能绑定一个数据源, 每个数据源只能被一个组件绑定。
- 数据源的数据必须是二维数组(汇合), 并且组件能辨认的数据也必须是二维数组。
- 默认状况下, 组件会绑定一个默认的静态数据源(JSON), 并且内置了静态数据, 以供用户能看到组件的默认样子。
设置数据
- 设置数据源
加载数据
load 办法为组件加载数据(每调用一次就会刷新一个数据, 所以 load 办法也能做为刷新数据应用)
组件外部绘制非数据源数据时，有以下两种办法:
- setData: 此办法并不会让组件立刻把数据绘制到界面上, 还须要调用 redraw 办法。
- draw: 利用数据立刻失效
对于默认数据源
如果以后组件须要展现数据, 那么务必要重写 getDefaultData 来返回组件的默认静态数据。格局为 object[]
组件更新
全量更新
下面提到的 refresh 和 render 都为全量更新。理论 refresh 外部也是调用了 render 办法。
增量更新
update 为增量更新，只会更新对应传入的局部。
组件钩子
下方表格为组件钩子名称，调用机会等详情信息：
| 钩子名称 | 调用机会(父) | 调用机会 |
|---|---|---|
| _construct | constructor | 结构时调用 |
| _mount | mount | 挂载时调用 |
| _unMount | unMount | 卸载时调用 |
| _render | render | 渲染时调用 |
| _update | update | 更新选项时调用 |
| _refresh | refresh | 刷新选项时调用 |
| _draw | draw | 绘制数据时调用 |
| _redraw | redraw | 重绘数据时调用 |
| _normalize | normalize | 获取标准化数据时调用。 |
| _destroy | destroy | 组件销毁时调用 |
| _connectTo | – | 联动事件产生时, 获取变量值的钩子办法 |
开源福利
如果喜爱咱们的我的项目，请不要遗记点击下方代码仓库地址，在 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 面对面交换。
