本文通过区块基础知识介绍和实操案例讲解两部分介绍DataV区块编辑器的功能。
介绍
DataV区块编辑器是基于基础组件封装的一个黑盒,对内封装了业务相关的组件样式、组件布局、默认数据(不包含除静态数据和API外的数据源)以及蓝图逻辑。对外定义了业务相关的区块接口。内部和外部的数据传输依靠蓝图的数据接口、事件接口和动作接口节点进行。
使用场景
区块编辑器主要针对常用场景组件,对其进行封装。支持保存蓝图配置并且可以自定义事件、动作以及数据接口,方便在不同的可视化应用中重复添加使用,相比组件收藏拥有更高的灵活度。下面将两种复用组件的方式进行对比。
组件收藏:一般只收藏组件的样式及数据源配置,不收藏蓝图的配置。
区块编辑器:可以保存组件到区块中,包括组件的样式、数据源配置以及蓝图配置。
创建
在Datav控制台中区块编辑器有3种创建方式,包括:
在Datav控制台首页,单击我的资产 > 我的区块 > +新建区块创建新区块。
在Datav控制台首页,单击我的资产 > 组件收藏夹 ,选择需要升级的组件,以垂直胶囊柱状图为例,单击图标,升级创建成区块。
在画布编辑器页面,选择需要导出成区块的组件,以柱状图为例,右键单击导出成区块来创建区块。
使用
在区块编辑器中可以编辑蓝图代码、自定义区块事件、动作和数据接口,以低代码的方式对组件进一步封装,更贴切我们常用场景的使用。
使用大纲
案例讲解
直播视频内以折线图组件为例展示公司年月日不同时间的数据图表。根据Tab列表组件切换图表展示,通过模拟该场景介绍区块编辑器的使用。
创建区块
在Datav控制台首页,单击我的资产 > 我的区块 > +新建区块,即可创建一个新区块。
在选择区块模板对话框中,单击右下角的直接创建。
您可以自定义输入英文名和显示名的具体内容,并选择一个预设尺寸大小,最后单击右下角的确定。
创建完成后,您可以在我的区块面板中查看到区块的信息。
删除:您可以单击此处删除创建的区块。
编辑:您可以单击此处重命名编辑区块的名称。
发布信息:您可以单击查看历史,查看区块的版本信息。
单击区块,进入区块编辑页面。按照从左往右的顺序依次为图层栏、组件列表、画布编辑器和配置面板。
配置面板:设置组件的常用样式;
图层栏:展示在画布编辑器中用到的组件;
组件列表:展示常用的组件;
画布编辑器:编辑添加到画布中的组件;
图标:数据源配置按钮,可以对组件的数据进行配置;
图标:蓝图编辑器按钮,可以切换到蓝图编辑器中;
说明区块的蓝图编辑器与普通蓝图编辑器的差别,主要在于新增区块接口:数据接口、事件接口以及动作接口。
图标:预览按钮,可查看预览效果。
在本直播案例中,您可以单击年查看年度销售额;单击季,查看季度销售额;单击月,查看月度销售额。
设置数据接口
数据接口一般主要用于Tab列表组件或者基本折线图组件的数据源配置。
在蓝图编辑器中添加数据接口节点,单击编辑器右上方图标,对数据接口进行设置。
您可以在视图模式下修改数据接口显示名、字段及默认数据。
数据接口显示名包括名称、显示名、描述以及数据类型。其中数据类型共有对象、数组、任意值和无四种。
字段包括字段名、中文名、说明及类型。其中类型共有字符串、数值、对象、数组、布尔值和二进制六种。同时,您可以单击图标增加一个字段;单击图标,删除一个字段。
在默认数据种设置静态数据。
设置完成后,单击图标,查看预览效果。您也可以修改Tab列表的值,单击测试,查看改变后的效果。同时,您也可以在发布后,前往画布编辑器内查看效果。
说明您可以通过代码模式完成数据接口的设置。
您可以通过单击新增数据接口按键,新增一个数据接口。
设置事件接口
将组件的事件定义到区块组件中,抛出该事件供可视化应用调用。
在蓝图编辑器中添加事件接口节点,单击编辑器右上方图标,对事件接口进行设置。
您可以在视图模式下修改示例事件名、字段及默认数据。
示例事件名包括名称、显示名、描述及数据类型。其中,数据类型共有对象、数组、任意值和无四种。
字段包括字段名、中文名、说明及类型。其中类型共有字符串、数值、对象、数组、布尔值和二进制六种。同时,您可以单击图标,增加一个字段;单击图标,删除一个字段。
设置完成后,单击图标,进行区块发布。
区块发布成功后,在画布编辑器页面,选择该区块,右键单击导出到蓝图编辑器,在蓝图编辑器页面中可以看到在区块中设置的事件接口信息。
您可以过调试预览验证事件触发的正确性。
设置动作接口
在区块的蓝图编辑器中,添加动作接口节点,并单击右上角动作设置图标。
您可以在视图模式下修改示例动作名、字段及默认数据。
示例动作名包括名称、显示名、描述及数据类型。其中数据类型共有对象、数组、任意值和无四种。
字段包括字段名、中文名、说明、类型、默认值及可选值。其中类型共有字符串、数值、对象、数组、布尔值和二进制六种。同时,您可以单击图标增加一个字段;单击图标,删除一个字段。
设置完成后,在预览页查看动作的设置效果。
您可以对区块进行发布,发布成功后在画布编辑器页面,选择该区块,右键单击导出到蓝图编辑器,可以看到在区块中定义的动作。
在蓝图编辑器中添加一个串行数据处理节点,在画布编辑器页面添加一个Tab列表组件,实现通过使用可视化应用内的Tab列表控制区块的Tab列表效果。
在预览页查看预览效果。
区块发布成功后,您可以回到DataV控制台,在我的资产 > 我的区块中单击查看历史,并可以进行上线和下线发布的版本的操作。
说明下线版本后无法在资产中添加,但对于已添加的版本没有影响,可以正常使用。
视频链接
DataV小课堂直播视频:DataV区块编辑器直播视频使用教程。