DataV区块编辑器介绍

本文通过区块基础知识介绍和实操案例讲解两部分介绍DataV区块编辑器的功能。

介绍

DataV区块编辑器是基于基础组件封装的一个黑盒,对内封装了业务相关的组件样式、组件布局、默认数据(不包含除静态数据和API外的数据源)以及蓝图逻辑。对外定义了业务相关的区块接口。内部和外部的数据传输依靠蓝图的数据接口、事件接口和动作接口节点进行。区块编辑器介绍

使用场景

区块编辑器主要针对常用场景组件,对其进行封装。支持保存蓝图配置并且可以自定义事件、动作以及数据接口,方便在不同的可视化应用中重复添加使用,相比组件收藏拥有更高的灵活度。下面将两种复用组件的方式进行对比。

  • 组件收藏:一般只收藏组件的样式及数据源配置,不收藏蓝图的配置。组件收藏

  • 区块编辑器:可以保存组件到区块中,包括组件的样式、数据源配置以及蓝图配置。区块编辑器

创建

Datav控制台中区块编辑器有3种创建方式,包括:

  • Datav控制台首页,单击我的资产 > 我的区块 > +新建区块创建新区块。创建区块

  • Datav控制台首页,单击我的资产 > 组件收藏夹 ,选择需要升级的组件,以垂直胶囊柱状图为例,单击升级区块图标,升级创建成区块。升级区块

  • 在画布编辑器页面,选择需要导出成区块的组件,以柱状图为例,右键单击导出成区块来创建区块。导出区块

使用

在区块编辑器中可以编辑蓝图代码、自定义区块事件、动作和数据接口,以低代码的方式对组件进一步封装,更贴切我们常用场景的使用。区块编辑器使用

使用大纲

编辑器使用大纲

案例讲解

直播视频内以折线图组件为例展示公司年月日不同时间的数据图表。根据Tab列表组件切换图表展示,通过模拟该场景介绍区块编辑器的使用。案例讲解

创建区块

  1. Datav控制台首页,单击我的资产 > 我的区块 > +新建区块,即可创建一个新区块。新建区块

  2. 选择区块模板对话框中,单击右下角的直接创建直接创建

  3. 您可以自定义输入英文名显示名的具体内容,并选择一个预设尺寸大小,最后单击右下角的确定新建区块

  4. 创建完成后,您可以在我的区块面板中查看到区块的信息。区块信息

    • 删除:您可以单击此处删除创建的区块。

    • 编辑:您可以单击此处重命名编辑区块的名称。

    • 发布信息:您可以单击查看历史,查看区块的版本信息。

  5. 单击区块,进入区块编辑页面。按照从左往右的顺序依次为图层栏、组件列表、画布编辑器和配置面板。年度销售额

    • 配置面板:设置组件的常用样式;

    • 图层栏:展示在画布编辑器中用到的组件;

    • 组件列表:展示常用的组件;

    • 画布编辑器:编辑添加到画布中的组件;

    • 数据源图标:数据源配置按钮,可以对组件的数据进行配置;

    • 蓝图编辑器图标:蓝图编辑器按钮,可以切换到蓝图编辑器中;蓝图编辑器

      说明

      区块的蓝图编辑器与普通蓝图编辑器的差别,主要在于新增区块接口:数据接口事件接口以及动作接口

    • 预览图标:预览按钮,可查看预览效果。预览

    说明

    在本直播案例中,您可以单击查看年度销售额;单击,查看季度销售额;单击,查看月度销售额。

设置数据接口

数据接口一般主要用于Tab列表组件或者基本折线图组件的数据源配置。

  1. 在蓝图编辑器中添加数据接口节点,单击编辑器右上方数据接口设置图标,对数据接口进行设置。数据接口节点

  2. 您可以在视图模式下修改数据接口显示名字段默认数据

    • 数据接口显示名包括名称显示名描述以及数据类型。其中数据类型共有对象数组任意值四种。修改名称

    • 字段包括字段名中文名说明类型。其中类型共有字符串数值对象数组布尔值二进制六种。同时,您可以单击增加图标增加一个字段;单击删除图标,删除一个字段。字段

    • 默认数据种设置静态数据。静态数据

  3. 设置完成后,单击预览图标,查看预览效果。您也可以修改Tab列表的值,单击测试,查看改变后的效果。同时,您也可以在发布后,前往画布编辑器内查看效果。大屏编辑页效果

    说明
    • 您可以通过代码模式完成数据接口的设置。

    • 您可以通过单击新增数据接口按键,新增一个数据接口。

设置事件接口

将组件的事件定义到区块组件中,抛出该事件供可视化应用调用。

  1. 在蓝图编辑器中添加事件接口节点,单击编辑器右上方事件设置图标,对事件接口进行设置。事件接口节点

  2. 您可以在视图模式下修改示例事件名字段默认数据事件接口名

    • 示例事件名包括名称显示名描述数据类型。其中,数据类型共有对象数组任意值四种。示例事件名

    • 字段包括字段名中文名说明类型。其中类型共有字符串数值对象数组布尔值二进制六种。同时,您可以单击增加图标,增加一个字段;单击删除图标,删除一个字段。字段

  3. 设置完成后,单击发布图标,进行区块发布。

  4. 区块发布成功后,在画布编辑器页面,选择该区块,右键单击导出到蓝图编辑器,在蓝图编辑器页面中可以看到在区块中设置的事件接口信息。导出到蓝图编辑器

  5. 您可以过调试预览验证事件触发的正确性。验证事件接口

设置动作接口

  1. 在区块的蓝图编辑器中,添加动作接口节点,并单击右上角动作设置动作设置图标。动作接口

  2. 您可以在视图模式下修改示例动作名字段默认数据

    • 示例动作名包括名称显示名描述数据类型。其中数据类型共有对象数组任意值四种。示例动作

    • 字段包括字段名中文名说明类型默认值可选值。其中类型共有字符串数值对象数组布尔值二进制六种。同时,您可以单击增加图标增加一个字段;单击删除图标,删除一个字段。字段

  3. 设置完成后,在预览页查看动作的设置效果。预览动作

  4. 您可以对区块进行发布,发布成功后在画布编辑器页面,选择该区块,右键单击导出到蓝图编辑器,可以看到在区块中定义的动作。 导出到蓝图编辑器

  5. 在蓝图编辑器中添加一个串行数据处理节点,在画布编辑器页面添加一个Tab列表组件,实现通过使用可视化应用内的Tab列表控制区块的Tab列表效果。蓝图设置

  6. 在预览页查看预览效果。预览tab

  7. 区块发布成功后,您可以回到DataV控制台,在我的资产 > 我的区块中单击查看历史,并可以进行上线和下线发布的版本的操作。

    说明

    下线版本后无法在资产中添加,但对于已添加的版本没有影响,可以正常使用。

视频链接

DataV小课堂直播视频:DataV区块编辑器直播视频使用教程