您的位置:  首页 > 技术杂谈 > 正文

数据可视化系列教程|六大组件基础知识

2022-09-02 14:00 https://my.oschina.net/yunzhihui/blog/5572378 云智慧AIOps社区 次阅读 条评论

FlyFish是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件,零编码即可实现符合自己业务需求的炫酷可视化大屏。需注意,本教程仅适用于云智慧开源数据可视化平台FlyFish。如果喜欢我们的项目,请点击下方代码仓库地址,在 GitHub / Gitee 仓库上点个 Star。

FlyFish介绍

FlyFish 是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台, 为数据可视化开发场景提供了高效的一站式解决方案。飞鱼提供丰富的组件和应用模板库, 可通过拖拉拽的形式完成数据可视化开发,零开发背景的用户也可完成数据可视化开发工作。 同时,飞鱼也提供了灵活的拓展能力,支持组件开发、自定义函数与全局事件等配置, 面向复杂需求场景能够保证高效开发与交付。

推荐使用FlyFish

使用方式一: 线上Demo环境体验

使用方式三: Gitee本地下载部署使用

使用方式二: GitHub本地下载部署使用

六大组件基础知识

注意:下面的方法若不特别指出均挂载在当前组件的 props.parent上, 使用前务必做判空处理

  1. 组件DOM结构

在组件外部存在两层包裹元素。

div.dv-component

控制组件的尺寸,宽高, zIndex,透明度等全局配置。

  • 属性名: $wrap(同样在props.parent)

  • 获取: getWrap()(组件开发过程中,请勿使用当前方法)

div.dv-component-container

组件的内容容器。

  • 属性名: $container(同样在props.parent)

  • 获取: getContainer()(渲染组件请务必使用此方法)

  1. 组件配置

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来达到配置默认配置的效果。

  1. 属性配置

可以通过文件来显式的绘制属性设置面板, 便于大屏编辑者来利用开发者暴露出的属性来进行客制化编辑。当然开发者也可以在某些逻辑情况下自主的调用方法来更新options。

  • setOptions(options): 此方法并不会把选项立即应用到组件上, 还需要再调用refresh()方法, 才能把新的选项应用到组件上。

  • update(options): 应用选项立即生效。

  • defaultOptions: 定义组件默认的选项, 一般情况下, 需要把组件支持的所有选项都写在defaultOptions中。

  • 能让使用者一眼能看懂组件都支持哪些选项。

  • 省去了组件渲染时的各种选项是否存在的判断(静态属性)。

  • getDefaultOptions: 可通过重写此方法达到和上面属性一样的效果。

  1. 数据和数据源

数据是数据可视化的核心, 大部分组件都是为了展示数据而创造。选项options是控制组件的显示样式,但是数据才是组件最终要展示的内容。组件会监听数据源的数据变化,每当数据源的数据更新时,组件就会重新绘制数据。

数据要求

  • 组件的数据来源于数据源, 且每个组件只能绑定一个数据源, 每个数据源只能被一个组件绑定。

  • 数据源的数据必须是二维数组(集合), 并且组件能识别的数据也必须是二维数组。

  • 默认情况下, 组件会绑定一个默认的静态数据源(JSON),并且内置了静态数据, 以供用户能看到组件的默认样子。

设置数据

  • 设置数据源

  • 加载数据

    load方法为组件加载数据(每调用一次就会刷新一个数据, 所以load方法也能做为刷新数据使用)

  • 组件内部绘制非数据源数据时,有以下两种方法:

    • setData: 此方法并不会让组件立即把数据绘制到界面上, 还需要调用redraw方法。
    • draw: 应用数据立即生效

关于默认数据源

如果当前组件需要展示数据, 那么务必要重写getDefaultData来返回组件的默认静态数据。格式为object[]

  1. 组件更新

全量更新

上面提到的refresh和render都为全量更新。实际refresh内部也是调用了render方法。

增量更新

update为增量更新,只会更新对应传入的部分。

  1. 组件钩子

下方表格为组件钩子名称,调用时机等详情信息:

钩子名称调用时机(父)调用时机
_constructconstructor构造时调用
_mountmount挂载时调用
_unMountunMount卸载时调用
_renderrender渲染时调用
_updateupdate更新选项时调用
_refreshrefresh刷新选项时调用
_drawdraw绘制数据时调用
_redrawredraw重绘数据时调用
_normalizenormalize获取标准化数据时调用。
_destroydestroy组件销毁时调用
_connectTo-联动事件发生时, 获取变量值的钩子方法

开源福利

如果喜欢我们的项目,请不要忘记点击下方代码仓库地址,在 GitHub / Gitee 仓库上点个 Star,我们需要您的鼓励与支持。此外,即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。

GitHub 地址: https://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址:https://gitee.com/CloudWise/fly-fish

FlyFish贡献指南:http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版中心: https://www.cloudwise.ai/flyFishComponents.html

微信搜索xiaoyuerwise或扫描识别下方二维码,备注【飞鱼】加入AIOps社区飞鱼开发者交流群,与 FlyFish 项目 PMC 面对面交流。

展开阅读全文
  • 0
    感动
  • 0
    路过
  • 0
    高兴
  • 0
    难过
  • 0
    搞笑
  • 0
    无聊
  • 0
    愤怒
  • 0
    同情
热度排行
友情链接