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

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

【技术实现步骤摘要】
面向数据可视化的前端组件化开发方法及系统
本专利技术涉及数据可视化技术与前端工程
，特别涉及一种面向数据可视化的前端组件化开发方法及系统。
技术介绍
前端组件化是伴随着前端发展的一种不可或缺的设计思想，利用组件化设计，可以将Web应用中一些相关的功能封装在一起构建通用性、可重用的组件，从而构建大型应用程序，提高开发效率。随着前端组件化思想的发展，基于前端组件化的开发方法层出不穷，然而现有的这些技术方案仅针对如何利用组件化进行前端页面布局，以及业务流程划分等基础通用层面，对于特定领域的应用还缺乏相对深入的组件化开发方法。例如，在数据可视化领域，目前针对这一领域提出的组件化开发方法，大多数是通过对系统进行不同程度的业务功能划分，利用不同功能组件的相互协作构建完整的数据可视化应用。然而，数据可视化应用系统的主要功能是利用各类型图表进行复杂数据的可视化展示，对于各种类型复杂图表及业务功能组件的开发往往费时费力，现有技术不仅缺少对数据可视化应用组件的规范性设计，易造成组件的可复用性较低，并且针对不同类型组件缺少通用性的开发方法，提高了系统的复杂度及开发成本，不利于提高工程化开发效率。
技术实现思路
本专利技术旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本专利技术的一个目的在于提出一种面向数据可视化的前端组件化开发方法，该方法不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。本专利技术的另一个目的在于提出一种面向数据可视化的前端组件化开发系统。为达到上述目的，本专利技术一方面实施例提出了一种面向数据可视化的前端组件化开发方法，包括以下步骤：对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。本专利技术实施例的面向数据可视化的前端组件化开发方法，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。另外，根据本专利技术上述实施例的面向数据可视化的前端组件化开发方法还可以具有以下附加的技术特征：进一步地，在本专利技术的一个实施例中，所述对组件层次进行划分，包括：将多个组件按照组合及所属关系自顶而下进行分类。进一步地，在本专利技术的一个实施例中，所述依据所述组件组成结构创建每一类组件的代码模版，包括：通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。进一步地，在本专利技术的一个实施例中，所述在组件库中进行组件的选择组合以实现系统前端页面布局，包括：从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。进一步地，在本专利技术的一个实施例中，所述将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统，包括：获取不同组件间的标准通信规则，以控制所述不同组件进行协作；构建基于组件化的数据可视化应用。为达到上述目的，本专利技术另一方面实施例提出了一种面向数据可视化的前端组件化开发系统，包括：划分模块，用于对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；创建模块，用于根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；生成模块，用于在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。本专利技术实施例的面向数据可视化的前端组件化开发系统，构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。另外，根据本专利技术上述实施例的面向数据可视化的前端组件化开发系统还可以具有以下附加的技术特征：进一步地，在本专利技术的一个实施例中，所述划分模块进一步用于将多个组件按照组合及所属关系自顶而下进行分类。进一步地，在本专利技术的一个实施例中，所述创建模块进一步用于通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。进一步地，在本专利技术的一个实施例中，所述生成模块进一步用于从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。进一步地，在本专利技术的一个实施例中，所述生成模块进一步用于获取不同组件间的标准通信规则，以控制所述不同组件进行协作，并构建基于组件化的数据可视化应用。本专利技术附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本专利技术的实践了解到。附图说明本专利技术上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：图1为根据本专利技术实施例的面向数据可视化的前端组件化开发方法的流程图；图2为根据本专利技术一个实施例的面向数据可视化的前端组件化开发方法的流程图；图3为根据本专利技术实施例的组件层次划分示意图；图4为根据本专利技术实施例的组件通用组成结构示意图；图5为根据本专利技术实施例的组件类UML标准定义示意图；图6为根据本专利技术实施例的通用组件库构建流程图；图7为根据本专利技术实施例的父子组件数据传递流程图；图8为根据本专利技术实施例的兄弟组件数据传递流程图；图9为根据本专利技术实施例的面向数据可视化的前端组件化开发系统的结构示意图。具体实施方式下面详细描述本专利技术的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本专利技术，而不能理解为对本专利技术的限制。针对
技术介绍
存在的技术问题，本专利技术实施例对数据可视化应用系统的前端组件化开发进行了深入探索，提出针对数据可视化应用领域的前端组件化开发标准流程和规范性设计方法，并利用该方法构建包括Echarts、Antv在内多种可视化工具融合的通用可视化图表组件库和基础功能组件库，通过组件间的组合交互，构建完整的数据可视化应用，不仅提高了可视化图表组件的通用性及可移植性，而且有效地降低了数据可视化系统的开发和维护成本，提高了开发效率。下面参照附图描述根据本专利技术实施例提出的本文档来自技高网...

【技术保护点】
1.一种面向数据可视化的前端组件化开发方法，其特征在于，包括以下步骤：/n对组件层次进行划分，并根据不同层次组件之间的共性生成通用的组件组成结构；/n根据从规范性描述到实际代码的映射规则，依据所述组件组成结构创建每一类组件的代码模版，生成通用可视化图表组件库和基础功能组件库；以及/n在组件库中进行组件的选择组合以实现系统前端页面布局，并将不同的组件按照数据传递及绑定规则生成基于组件构成的数据可视化应用系统。/n

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


2.根据权利要求1所述的方法，其特征在于，所述对组件层次进行划分，包括：
将多个组件按照组合及所属关系自顶而下进行分类。


3.根据权利要求1所述的方法，其特征在于，所述依据所述组件组成结构创建每一类组件的代码模版，包括：
通过类封装每一层次的组件，并根据所述映射规则构建能够直接加入前端工程体系的组件代码模版，以在所述模版的基础上细化不同组件自身提供的相关功能。


4.根据权利要求1所述的方法，其特征在于，所述在组件库中进行组件的选择组合以实现系统前端页面布局，包括：
从所述组件库中选择所需组件，通过不同类别层次组件的组合进行系统页面布局。


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

【专利技术属性】
技术研发人员：鄂海红，张田宇，宋美娜，
申请(专利权)人：北京邮电大学，
类型：发明
国别省市：北京;11