CN111562912A - 面向数据可视化的前端组件化开发方法及系统 - Google Patents

Abstract

本发明公开了一种面向数据可视化的前端组件化开发方法及系统，其中，方法包括以下步骤：对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；根据从规范性描述到实际代码的映射规则，依据组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。该方法不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

Description

面向数据可视化的前端组件化开发方法及系统

技术领域

本发明涉及数据可视化技术与前端工程技术领域，特别涉及一种面向数据可视化的前端组件化开发方法及系统。

背景技术

前端组件化是伴随着前端发展的一种不可或缺的设计思想，利用组件化设计，可以将Web应用中一些相关的功能封装在一起构建通用性、可重用的组件，从而构建大型应用程序，提高开发效率。

随着前端组件化思想的发展，基于前端组件化的开发方法层出不穷，然而现有的这些技术方案仅针对如何利用组件化进行前端页面布局，以及业务流程划分等基础通用层面，对于特定领域的应用还缺乏相对深入的组件化开发方法。例如，在数据可视化领域，目前针对这一领域提出的组件化开发方法，大多数是通过对系统进行不同程度的业务功能划分，利用不同功能组件的相互协作构建完整的数据可视化应用。

然而，数据可视化应用系统的主要功能是利用各类型图表进行复杂数据的可视化展示，对于各种类型复杂图表及业务功能组件的开发往往费时费力，现有技术不仅缺少对数据可视化应用组件的规范性设计，易造成组件的可复用性较低，并且针对不同类型组件缺少通用性的开发方法，提高了系统的复杂度及开发成本，不利于提高工程化开发效率。

发明内容

本发明旨在至少在一定程度上解决相关技术中的技术问题之一。

为此，本发明的一个目的在于提出一种面向数据可视化的前端组件化开发方法，该方法不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

本发明的另一个目的在于提出一种面向数据可视化的前端组件化开发系统。

为达到上述目的，本发明一方面实施例提出了一种面向数据可视化的前端组件化开发方法，包括以下步骤：对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

本发明实施例的面向数据可视化的前端组件化开发方法，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

另外，根据本发明上述实施例的面向数据可视化的前端组件化开发方法还可以具有以下附加的技术特征：

进一步地，在本发明的一个实施例中，所述对组件层次进行划分，包括：将多个组件按照组合及所属关系自顶而下进行分类。

进一步地，在本发明的一个实施例中，所述依据所述组件组成结构创建每一类组件的代码模版，包括：通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。

进一步地，在本发明的一个实施例中，所述在组件库中进行组件的选择组合以实现系统前端页面布局，包括：从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

进一步地，在本发明的一个实施例中，所述将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统，包括：获取不同组件间的标准通信规则，以控制所述不同组件进行协作；构建基于组件化的数据可视化应用。

为达到上述目的，本发明另一方面实施例提出了一种面向数据可视化的前端组件化开发系统，包括：划分模块，用于对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；创建模块，用于根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；生成模块，用于在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

本发明实施例的面向数据可视化的前端组件化开发系统，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

另外，根据本发明上述实施例的面向数据可视化的前端组件化开发系统还可以具有以下附加的技术特征：

进一步地，在本发明的一个实施例中，所述划分模块进一步用于将多个组件按照组合及所属关系自顶而下进行分类。

进一步地，在本发明的一个实施例中，所述创建模块进一步用于通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。

进一步地，在本发明的一个实施例中，所述生成模块进一步用于从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

进一步地，在本发明的一个实施例中，所述生成模块进一步用于获取不同组件间的标准通信规则，以控制所述不同组件进行协作，并构建基于组件化的数据可视化应用。

本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为根据本发明实施例的面向数据可视化的前端组件化开发方法的流程图；

图2为根据本发明一个实施例的面向数据可视化的前端组件化开发方法的流程图；

图3为根据本发明实施例的组件层次划分示意图；

图4为根据本发明实施例的组件通用组成结构示意图；

图5为根据本发明实施例的组件类UML标准定义示意图；

图6为根据本发明实施例的通用组件库构建流程图；

图7为根据本发明实施例的父子组件数据传递流程图；

图8为根据本发明实施例的兄弟组件数据传递流程图；

图9为根据本发明实施例的面向数据可视化的前端组件化开发系统的结构示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

针对背景技术存在的技术问题，本发明实施例对数据可视化应用系统的前端组件化开发进行了深入探索，提出针对数据可视化应用领域的前端组件化开发标准流程和规范性设计方法，并利用该方法构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

下面参照附图描述根据本发明实施例提出的面向数据可视化的前端组件化开发方法及系统，首先将参照附图描述根据本发明实施例提出的面向数据可视化的前端组件化开发方法。

图1是本发明一个实施例的面向数据可视化的前端组件化开发方法的流程图。

如图1所示，该面向数据可视化的前端组件化开发方法包括以下步骤：

在步骤S101中，对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构。

可以理解的是，如图2所示，本发明实施例从最开始的组件层次划分开始，依据组件的不同层次间的共性设计通用的组件组成结构。

在本发明的一个实施例中，对组件层次进行划分，包括：将多个组件按照组合及所属关系自顶而下进行分类。

可以理解的是，如图2所示，组件层次划分：针对数据可视化应用场景，分析构成系统所需的功能组件，将组件按照组合及所属关系自顶而下进行分类，提供面向全局的整体性层次划分，为整个系统的组件化开发奠定基础。

进一步地，如图2所示，组件通用结构设计：组件是相对独立的可复用逻辑单元，多个组件相互作用形成了完整丰富的web页面，组件处于面对用户的第一线，具有交互特性，不仅能够接收并向用户展示相关数据，而且能够通过组件间的数据流通以对外接口为通道实现组件与组件的相互协作。依据组件间这些共有的特性规范组件组成部分，形成标准的组件通用结构。

具体而言，组件层次划分及通用结构设计具体如下：

本发明实施例通过分析数据可视化场景的业务及功能特性，将组件划分为四个层次，如图3所示，包括：

1、用户界面扩展组件：是具有最小粒度的原子组件，不可拆分，可通过组合构成不同层级组件，例如：按钮、图标、下拉框、输入框等

2、可视化组件：属于数据可视化场景所特有的展示型组件，提供多维数据展示图表以及大屏设计所需特效元素，其内部可包含若干个界面扩展组件，并通过重新定义图表的组合和配置方式，提供丰富的可动态交互的可视化组件，主要包括基础图表组件、地图组件、关系图组件、多功能文本表格组件、自定义特效组件等。

3、基础业务组件：可由若干个界面扩展组件和可视化组件组合而成，依据业务功能划分，由最小的业务状态抽象而出，可在多个容器组件内复用，如导航菜单、配置板等。

4、容器组件：业务子组件的入口，容器内的子组件通常具有业务和数据依赖关系，由容器组件分发数据至各个业务子组件，并接受子组件的业务响应，负责业务模块的统筹。

进一步地，每个层次的组件通用组成结构如图3所示，包括：

1、接口：接口对外提供具体功能与扩展，对内传递外部属性，对用户不可见，是组件间传递消息的桥梁。

2、交互：负责与用户的交互工作，提供可操作功能，收集用户输入，然后对数据进行加工，重新给用户呈现新的数据。

3、视图：用户可视化的界面模版，根据平台需求统一规范组件的视觉外观。

4、逻辑：处理组件传入数据，设计组件的相关动作函数以及事件处理方法。

5、样式：封装了组件内部样式，不影响组件外部的全局以及其他组件样式。

在步骤S102中，根据从规范性描述到实际代码的映射规则，依据组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库。

可以理解的是，如图2所示，本发明实施例提供从规范性描述到实际代码的映射规则，依据通用的组成结构创建每一类组件的代码模版，构成包括基础功能和可视化图表在内的两个标准组件库。

进一步地，在本发明的一个实施例中，依据组件组成结构创建每一类组件的代码模版，包括：通过类封装每一层次的组件，并根据映射规则构建能够直接加入前端工程体系的组件代码模版，以在模版的基础上细化不同组件自身提供的相关功能。

可以理解的是，如图2所示，组件类模版生成：组件化思想的本质是面向对象的设计，通过类来封装每一层次的组件，并提供由类的标准定义到组件代码的映射规则，构建能够直接加入前端工程体系的组件代码模版，在模版的基础上来细化不同组件自身提供的相关功能。

进一步地，如图2所示，组件库生成：对于数据可视化应用除了构成页面的基本功能组件，最重要的组成部分即用于数据可视化展示的图表，目前有很多可视化工具提供丰富酷炫的图表，但都具有各自的特异性难以组合，该流程需要分析不同可视化工具的实现方法，提供二次规范性封装，使得系统能够通过统一的接口使用不同类型的图表组件。

具体而言，1、组件类模版生成具体如下：

一个组件类由公有属性、公有方法、私有属性和私有方法构成，公有属性对应组件结构中的接口部分，绑定了外部传入数据，用来传递组件所需的配置参数；公有方法对应组件的交互部分，定义了组件对外开放的包括点击在内的多种交互事件；私有属性对应组件内部逻辑实现所需数据以及组件内部样式布局；私有方法对应内部逻辑处理函数。

一个组件类的基本功能标准描述如图4所示，利用Vue前端框架提供的组件化系统，将组件类按照下面的规则进行代码映射：type主要描述的是组件的类型，对应的是<template/>标签内部所包含的html代码模版，例如type＝“button”，则对应生成：

<template>

<button></button>

</template>

+attributes包含组件一系列对外开放属性，对外属性详细数据主要由组件的父组件传入，Vue框架对于父组件传入数据主要存放在props对象中，对应生成：

-attributes包含组件的内部属性，负责组件内部数据传递，主要存放在data对象中，对应生成：

-style包含组件内部样式设计对应组件内部<style scoped></style>标签。

-subComps描述了组件内部所包含的所有子组件，主要存放在components对象中，例如：-subComps:Object＝{chartComp}，则对应生成：

components:{chartComp}

+operation表示组件对外提供的操作函数，需在props中声明并定义，由具体实现由父组件完成，对应生成：

-operation表示组件内部的数据处理逻辑，统一在methods对象内部描述具体实现方法，对应生成：

methods:{

operation2(params){

}

2、多工具融合的通用可视化图表组件库具体如下：

本发明实施例将包括Echarts、Antv在内的多种可视化工具提供的丰富多样的图表利用组件化技术进行封装，封装的可视化图表组件对外提供数据配置和样式配置两个接口，使用者可以无需关注图表内部利用何种技术实现，只需向内部传递自定义样式和数据连接绑定，即可实现不同类型多维图表的可视化呈现。不仅解决了目前可视化配置图表的多样性和复杂性，同时提高了可视化图表的通用性和可复用性，使用户通过拖拽组件即能生成酷炫的可视化图表。

以本发明实施例前端组件化开发规范性流程中的第三步组件类模版生成技术为基础，构建多工具融合的可视化图表组件库实现方法如表1和表2所示。

表1

表2

基于全局组件层次划分和组件类模版生成方法，构建本发明实施例提出的通用组件库流程如图6所示。本发明实施例使用Vue.js框架实现，但并不仅限于Vue.js，支持所有具有组件化生态系统的前端框架，如Reat等。

在步骤S103中，在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

可以理解的是，如图2所示，在组件库中进行组件的选择组合实现系统前端页面布局，最后将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

进一步地，在本发明的一个实施例中，在组件库中进行组件的选择组合以实现系统前端页面布局，包括：从组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

可以理解的是，如图2所示，组件组合及页面布局：基于构建的组件库，从中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

进一步地，在本发明的一个实施例中，将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统，包括：获取不同组件间的标准通信规则，以控制不同组件进行协作；构建基于组件化的数据可视化应用。

可以理解的是，如图2所示，组件间数据传递：提供不同组件间的标准通信规则，实现不同组件之间的协作，构建基于组件化的数据可视化应用，提高组件的通用性及可复用性，降低系统耦合性。

具体而言，组件间组合及数据传递具体如下：

组件间的组合关系一共分为两种，一种是父子关系，一种是兄弟关系，父子组件是指组件之间是包含与被包含关系，兄弟组件是指被同一个父组件包含的两个同级子组件。在组件化构建过程中需要组件间的相互通信和传递信息，才能实现系统不同功能模块之间的协作。

父子组件的数据传递方式如图7所示：父组件将内部数据通过子组件的外部接口props传入，子组件用自己内部的数据进行接收，子组件内部需要告知父组件的数据变动通过提交事件通知父组件，父组件利用事件监听数据变化从而修改内部数据，实现父子组件的双向数据传递。

兄弟组件的数据传递方式如图8所示：为了保证数据之间传递不造成混乱，兄弟组件间的数据流动均通过父组件分发来完成，子组件内部数据变化传递给父组件，由父组件通知其兄弟组件修改内部数据。

综上，(1)本发明实施例提出一种面向数据可视化应用的前端组件化规范性开发方法及流程，解决了目前前端组件化技术在数据可视化应用领域的局限性，规范了数据可视化类应用组件化开发的基本流程，从而提高了应用的可扩展性和开发效率。(2)本发明实施例提出一种组件类模版生成方法，依据组件的全局层次划分和组件的通用结构设计，规范了前端工程中组件类的封装，提供了从类的标准描述到组件化代码的实现方法，为构建基于模版的标准化组件库提供有效支撑，解决了目前数据可视化应用系统由于缺少对组件的规范性设计造成系统组件开发成本高，可复用性低等问题。(3)本发明实施例基于组件类模版构建了多工具融合的通用可视化图表组件库，提供了适用于不同类型可视化图表组件的构建方法，提高了可视化图表组件的通用性和可移植性，降低了数据可视化应用中图表组件的开发难度和复杂度，有效提升了前端工程化开发效率。

根据本发明实施例提出的面向数据可视化的前端组件化开发方法，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

其次参照附图描述根据本发明实施例提出的面向数据可视化的前端组件化开发系统。

图9是本发明一个实施例的面向数据可视化的前端组件化开发系统的结构示意图。

如图9所示，该面向数据可视化的前端组件化开发系统10包括：划分模块100、创建模块200和生成模块300。

其中，划分模块100用于对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；创建模块200用于根据从规范性描述到实际代码的映射规则，依据组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；生成模块300用于在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。本发明实施例的系统10不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

进一步地，在本发明的一个实施例中，划分模块100进一步用于将多个组件按照组合及所属关系自顶而下进行分类。

进一步地，在本发明的一个实施例中，创建模块200进一步用于通过类封装每一层次的组件，并根据映射规则构建能够直接加入前端工程体系的组件代码模版，以在模版的基础上细化不同组件自身提供的相关功能。

进一步地，在本发明的一个实施例中，生成模块300进一步用于从组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

进一步地，在本发明的一个实施例中，生成模块300进一步用于获取不同组件间的标准通信规则，以控制不同组件进行协作，并构建基于组件化的数据可视化应用。

需要说明的是，前述对面向数据可视化的前端组件化开发方法实施例的解释说明也适用于该实施例的面向数据可视化的前端组件化开发系统，此处不再赘述。

根据本发明实施例提出的面向数据可视化的前端组件化开发系统，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”或“下”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。而且，第一特征在第二特征“之上”、“上方”和“上面”可是第一特征在第二特征正上方或斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”可以是第一特征在第二特征正下方或斜下方，或仅仅表示第一特征水平高度小于第二特征。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种面向数据可视化的前端组件化开发方法，其特征在于，包括以下步骤：

对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；

根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；以及

在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

2.根据权利要求1所述的方法，其特征在于，所述对组件层次进行划分，包括：

将多个组件按照组合及所属关系自顶而下进行分类。

3.根据权利要求1所述的方法，其特征在于，所述依据所述组件组成结构创建每一类组件的代码模版，包括：

通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。

4.根据权利要求1所述的方法，其特征在于，所述在组件库中进行组件的选择组合以实现系统前端页面布局，包括：

从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

5.根据权利要求1所述的方法，其特征在于，所述将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统，包括：

获取不同组件间的标准通信规则，以控制所述不同组件进行协作；

构建基于组件化的数据可视化应用。

6.一种面向数据可视化的前端组件化开发系统，其特征在于，包括：

划分模块，用于对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；

创建模块，用于根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；以及

生成模块，用于在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。

7.根据权利要求6所述的方系统，其特征在于，所述划分模块进一步用于将多个组件按照组合及所属关系自顶而下进行分类。

8.根据权利要求6所述的系统，其特征在于，所述创建模块进一步用于通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。

9.根据权利要求6所述的系统，其特征在于，所述生成模块进一步用于从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。

10.根据权利要求6所述的系统，其特征在于，所述生成模块进一步用于获取不同组件间的标准通信规则，以控制所述不同组件进行协作，并构建基于组件化的数据可视化应用。

Images