CN114003218A - 构建数据可视化组件库的方法、装置、设备及介质 - Google Patents

Abstract

本公开提供了一种构建数据可视化组件库的方法。所述方法包括：创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹；根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类；使用VUE开发所述数据展示组件；使用SVG开发所述效果渲染组件；将开发完成的组件存放在所述组件文件夹中；以及在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。本公开还提供了一种构建数据可视化组件库的装置、设备、存储介质和程序产品。

Description

构建数据可视化组件库的方法、装置、设备及介质

技术领域

本公开涉及大数据领域，，更具体地涉及一种构建数据可视化组件库的方法、装置、设备、介质和程序产品。

背景技术

现如今大数据逐渐发挥出了越来越强大的力量，并无形的改变着我们的生活。但大数据对于非技术人员来说往往较难理解，发挥不出大数据背后的潜在价值。因此，迫切的需要通过一些媒介展现数据的威力，而数据可视化作为大数据展示媒介的一种，广泛运用于各种展示厅、会展、发布会及各种狂欢节中。。

目前的UI(User Intrerface，用户界面)组件库主要是针对WEB页面开发的，这些组件库是无法满足在数据可视化上的使用。主要是因为采用针对WEB页面的UI组件，一方面随着屏幕尺寸的增大会有失真的问题，另一方面数据可视化的组件库中组件的内容与对WEB页面的UI组件在功能和展现形式上也有很大区别。因此，有必要开发满足数据可视化场景需求的组件库，以帮助数据可视化场景下的数据快速展示。

发明内容

鉴于上述问题，本公开实施例提供了一种构建数据可视化组件库的方法、装置、设备、介质和程序产品，至少在一定程度上提供更为基础的、可通用的、且能够提升数据展示效果的数据可视化组件。

本公开实施例的第一方面，提供了一种构建数据可视化组件库的方法。所述方法包括：创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹；根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类；使用VUE开发所述数据展示组件；使用SVG开发所述效果渲染组件；将开发完成的组件存放在所述组件文件夹中；以及在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。

根据本公开的实施例，所述数据展示组件包括以下至少之一：展示图表组件、数字翻牌器、或轮播表。

根据本公开的实施例，所述效果渲染组件包括以下至少之一：loading加载动画、icon描边动画、或装饰动画。

根据本公开的实施例，所述效果渲染组件包括飞线边框动画，则使用SVG开发所述飞线边框动画包括：使用SVG编写同步多媒体集成语言动画、蒙层遮罩、渐变动画、和轨迹动画；以及将所述多媒体集成语言动画、蒙层遮罩、渐变动画、和轨迹动画对应叠加，以得到所述飞线边框动画。

根据本公开的实施例，所述目录结构中还设置有配置文件夹。所述方法还包括：基于用户操作为开发完成的每个组件编写配置文件；以及将所述配置文件存放在所述配置文件夹下。

根据本公开的实施例，所述基于用户操作为开发完成的每个组件编写配置文件包括：利用第三方库来编写所述配置文件。

本公开实施例的第二方面，提供了一种构建数据可视化组件库的装置。所述装置包括项目创建模块、组件开发模块以及打包发布模块。项目创建模块用于创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹。组件开发模块用于根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类，其中，使用VUE开发所述数据展示组件，使用SVG开发所述效果渲染组件，并将开发完成的组件存放在所述组件文件夹中。打包发布模块用于在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。

根据本公开的实施例，所述装置还包括组件文档配置模块。组件文档配置模块用于基于用户操作为开发完成的每个组件编写配置文件，并将所述配置文件存放在配置文件夹下，其中，所述配置文件夹设置在所述目录结构中。

本公开实施例的第三方面，提供了一种电子设备。所述电子设备包括一个或多个处理器、以及一个或多个存储器。所述一个或多个存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得一个或多个处理器执行上述方法。

本公开实施例的第四方面，还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述方法。

本公开实施例的第五方面，还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述方法。

上述一个或多个实施例具有如下优点或益效果：针对数据可视化场景下的各种组件的展示需求，分别选择使用VUE或SVG进行组件开发，充分发挥VUE的快速前端开发性能以及SVG的动态性和不失真的特点，优势互补，形成满足数据可视化场景的可视化组件库。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的构建数据可视化组件库的方法、装置、设备、介质和程序产品的应用场景图；

图2示意性示出了根据本公开实施例的构建数据可视化组件库的方法的流程图；

图3示意性示出了一个数字翻牌器的示例；

图4示意性示出了一个Loading加载动画在某一瞬间的截图示意；

图5示意性示出了根据本公开另一实施例的构建数据可视化组件库的方法的流程图；

图6示意性示出了根据本公开实施例的构建数据可视化组件库的装置的框图；以及

图7示意性示出了适于实现根据本公开实施例的构建数据可视化组件库的方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在本文中，需要理解的是，说明书及附图中的任何元素数量均用于示例而非限制，以及任何命名(例如，第一、第二)都仅用于区分，而不具有任何限制含义。

数据可视化也叫数据大屏，是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，将看不懂的数据通过图形化的手段进行有效地表达，准确高效、简洁全面地传递某种信息，帮助发现某种规律和特征，挖掘数据背后的价值。

在实现本方案的构思的过程中，发明人针对传统的基于WEB页面开发的UI组件(以下简称WEB组件)无法满足在数据可视化上的使用的问题进行了深入研究。

经过研究发现，数据可视化组件与WEB组件的展示需求不同。数据可视化组件更多地侧重于数据展示，要力求通过视觉冲击来突出数据逻辑关系等深层次关联。在数据可视化场景中，由于数据本身比较枯燥，所以在数据展示时往往要通过一些色彩渲染或动态效果等来突出重点，力争在极短的时间内吸引观众眼球，并传达出核心信息。与此不同，WEB组件更多的是侧重于用户交互。

相应地，数据可视化组件与WEB组件的内容和应用场合也明显不同。WEB组件通常用于个人电脑等屏幕展示中，包括有各种表单、输入框、按钮等。数据可视化组件应当适用于任何屏幕尺寸，其中，通常会用于大屏展示、投影展示等场景中，可以包括有各种类型的数据展示表、数据翻牌器、时间轴、以及一些动态渲染组件等。

经过以上分析，可以明显看出数据可视化组件与WEB组件的应用场景、使用需求和内容等明显不同，从而如果将WEB组件应用于数据可视化领域中，既难以满足数据可视化的展示内容需求，而且WEB组件随着屏幕尺寸的增大，还会导致展示效果失真，这样会严重影响数据可视化的展现效果。

有鉴于此，本公开实施例提供了一种构建数据可视化组件库的方法、装置、设备、介质及程序产品，针对数据可视化场景下的各种组件的展示需求，分别选择使用VUE或SVG进行组件开发，充分发挥VUE的快速前端开发性能以及SVG的动态性和不失真的特点，优势互补，形成满足数据可视化场景的可视化组件库。

具体地，本公开实施例的构建数据可视化组件库的方法可以包括：首先，创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹；然后，根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类；接下来，使用VUE开发所述数据展示组件，并使用SVG开发所述效果渲染组件，以及将开发完成的组件存放在所述组件文件夹中；然后，在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。

需要说明的是，本公开实施例的构建数据可视化组件库的方法、装置、设备、介质及程序产品可用于金融领域，也可用于除金融领域之外的任意领域，本公开对应用领域不做限定。

图1示意性示出了根据本公开实施例的构建数据可视化组件库的方法、装置、设备、介质和程序产品的应用场景图。需要注意的是，图1所示仅为可以应用本公开实施例的应用场景的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的应用场景100可以包括开发人员1、终端设备101、网络102和服务器103。网络102用以在终端设备101和服务器102之间提供通信链路的介质。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

开发人员1可以使用终端设备101通过网络102与服务器103交互，以接收或发送消息等。终端设备101上可以安装有代码编辑器等应用程序。

服务器103对开发人员1在终端设备101中的组件开发工作提供后台支持。例如，对开发人员1可以将开发完成的项目文件打包后上传到服务器103，供前端用户下载使用。

本公开实施例提供的构建数据可视化组件库的方法可以由终端设备101来执行。具体而言，可以通过开发人员1在终端设备101的操作来创建项目、开发各种数据可视化组件，并当组件开发完成后，将项目文件打包后上传到服务器103。相应地，本公开实施例所提供的构建数据可视化组件库的装置、设备、介质和程序产品一般也可以设置于终端设备101中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的场景，通过图2～图5对公开实施例的构建数据可视化组件库的方法进行详细描述。

图2示意性示出了根据本公开实施例的构建数据可视化组件库的方法的流程图。

如图2所示，该实施例的建数据可视化组件库的方法可以包括操作S210～操作S250。

首先在操作S210，创建数据可视化项目的目录结构，该目录结构中设置有组件文件夹。

然后在操作S220，根据数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类。例如，可以收集并罗列出数据可视化项目的组件清单，并根据每个组件的展示需求，将每个组件分类为数据展示组件或效果渲染组件。

在数据可视化领域中，数据展示组件通常可以包括各类展示图表组件、数字翻牌器、或轮播表等。其中，各类展示图表组件例如可以包括柱状图、饼图、面积图、折线图、散点图、雷达图、气泡图、字符云图、热力图、边捆绑图、地图或弦图等。

效果渲染组件通常可以包括loading加载动画、icon描边动画、或装饰动画等。

图3示意性示出了一个数字翻牌器的示例。图4示意性示出了一个Loading加载动画在某一瞬间的截图示意。

其中，图4中的Loading加载动画的当前视图仅为某一瞬间的截图，在实际展示中，该Loading加载动画中的弧线会在其所在的圆周上连续迁移，从而形成动态闪现的酷炫效果。

对比图3和图4可以看出，数据展示组件侧重于展示数据，而效果渲染组件侧重于通过视觉效果，迎合观众感受，通过视觉冲击来突出数据背后更深层的意义。

通常在使用时，可以将数据展示组件和效果渲染组件相叠加，例如，通过某一个效果渲染组件的渲染来突出某个展示图表中局部需要特别关注的数据等。

接下来在操作S231，使用VUE开发数据展示组件。

VUE是一套用于构建用户界面的渐进式JavaScript框架，只关注视图层，采用自底向上增量开发的设计，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。VUE保留了html、css、js分离的写法，使得现有的前端开发者在开发的时候能保持原有的习惯，更接近传统的WEB组件开发方式，从而在使用VUE开发数据展示组件，在满足数据展示组件的展示需求的同时，能够有效提升开发效率。

以及在操作S232，使用SVG开发效果渲染组件。

SVG全称为Scalable Vector Graphics(可伸缩矢量图形)。它是W3C(world wideWEB consortium，网际网络联盟)制定的、用矢量描述图形的XML应用标准。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，本质上是文本文件，有着许多的优点。例如，支持无限放大，对SVG图片进行任意比例的放大都不会损害图片的显示，其他诸如JPEG格式的图片都不支持无限放大，这种特性特别适用于不同屏幕尺寸的显示，如果使用图片替代SVG，则需要准备不同分辨率的图片，同时也会降低首屏渲染的速度。又例如，SVG有动画元素(例如，SMIL(同步多媒体集成语言，Synchronized Multimedia IntegrationLanguage)动画)，只要在SVG文件中嵌入SVG动画元素就可以实现动画效果了，其中，SMIL动画实现非常简单，通过标签的形式来写动画，同时能实现CSS3无法实现的动画效果。再例如，SVG可以非常简单的进行交互操作，SVG通过创建标签来表示图形元素，然后将图形元素添加到DOM树中，交给DOM完成渲染。使用DOM树渲染可以让图形元素的用户交互实现起来非常简单，因为可以直接对图形元素注册事件，包括鼠标事件和键盘事件。

根据本公开实施例使用SVG开发效果渲染组件(诸如icon描边动画、loading加载动画、边框动画、装饰动画、进度条等)，既能满足这些组件随着屏幕的变大保证不失真的要求，又能够使得这些组件让整个可视化项目具有更强的视觉冲击，同时SVG的使用跟HTML一样简单，便于上手。

在操作S240，将开发完成的组件存放在组件文件夹中。

此后在操作S250，在数据可视化项目开发完成后，至少将数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。例如，可以使用采用rollup打包编译，并发布到npm包管理器上。从而如果前端用户需要使用时，可以从npm包管理器上下载该数据可视化组件库。

在一些实施例中，在开发完成组件后，还可以对每个组件编写配置文件。相应的，目录结构中还设置有配置文件夹。其中，可以基于用户操作为开发完成的每个组件编写配置文件，并将配置文件存放在配置文件夹下。从而在操作S250中打包时可以将整个项目文件(包括开发完成的组件、以及每个组件的配置文件等)全部打包并发布。在每个组件编写的配置文件中，可以编写每个组件的功能示例、使用说明等配置文档，方便前端用户在下载了组件库后，根据配置文件中的内容来学习使用组件库中的组件。在一个实施例中，可以利用第三方库(例如，Storybook)来编写配置文件。

根据本公开的实施例，可以为数据可视化组件库的开发、维护、使用提供了一种实现方式，从而提高数据可视化组件库的可控性、易维护性，并减少开发人员的学习成本。

而且通过构建数据可视化组件库，可以帮助快速启动一个新的数据可视化项目，无需反复的造轮子，提高工作效率。并且，可以帮助开发人员独立自主研发组件库，提高代码的可控性，进而可以实现更多复杂、疑难需求。

图5示意性示出了根据本公开另一实施例的构建数据可视化组件库的方法的流程图。

如图5所示，根据该实施例的构建数据可视化组件库的方法可以包括操作S510～操作S540。

在操作S510，创建组件项目，规划目录结构。采用rollup打包工具打包组件库，rollup也是前端开源库最常用的打包工具。

在操作S520，按照需求拆分功能组件，逐一开发功能组件。一般数据可视化组件可以分为两类：一种是数据展示组件，如各种展示图表组件、数字翻牌器、轮播表等组件，这些组件主要是用VUE开发。另一种是效果渲染组件，这种组件可以让整个可视化项目具有更强的视觉冲击，例如loading加载动画、icon描边动画、以及装饰动画等，这些组件使用SVG开发。

例如，在SVG开发飞线边框动画时，可以使用SVG分别编写同步多媒体集成语言动画(即，SMIL动画)、蒙层遮罩、渐变动画、和轨迹动画，然后将多媒体集成语言动画、蒙层遮罩、渐变动画、和轨迹动画对应叠加，从而以得到飞线边框动画。

具体地，SVG开发飞线边框动画的过程可以示例为如下：

首先，创建flyBox文件夹。在组件文件夹下创建index.js及FlyBox.VUE；

然后，组件编写及注册：SVG开发FlyBox主要使用如下技术：1、SMIL动画，2、蒙层mask，3、radialGradient渐变，4、轨迹动画。

接下来，全局注册组件；

之后，在项目中使用时，首先通过npm install安装组件库，然后通过createApp.use(datav)展示在项目中。其中，当该飞线边框动画应用于数据可视化场景时，例如通过设置该飞线边框动画的位置将该飞线边框动画添加到某一个图表框的整体边框或局部边框，并通过配置飞线边框颜色、边框闪烁速率等，就能够在图表展示数据时看到仿佛有光束从图表的边框不断闪现。从而达到数据展示的同时对重点部分进行提示的效果。而且渲染效果不会引屏幕的大小改变而失真。

在操作S530，按组件编写功能示例和配置文档。为每个组件编写功能示例及配置文档，可以采用Storybook第三方库来快速构建组件的配置文档。

在操作S540，打包编译并发布。可以利用rollup进行打包编译，并发布到npm上开源。

可见，本公开实施例针对数据可视化这一特定场景的项目，提供了一套专门的组件库，可以有效提升数据可视化项目的工作效率，降低了开发难度。而且，充分利用SVG的特点，实现了数据可视化项目中特有的需求，大大增强了数据表现能力，给用户带来更加直观的视觉冲击。并且，利用VUE的快速开发性能，提高开发人员的开发效率。本公开实施例充分发挥VUE的快速前端开发性能以及SVG的动态性和不失真的特点，优势互补，形成满足数据可视化场景的可视化组件库。

基于上述实施例的构建数据可视化组件库的方法，本公开实施例还提供了一种构建数据可视化组件库的装置。以下将结合图6对该装置进行详细描述。

图6示意性示出了根据本公开实施例的构建数据可视化组件库的装置600的框图。

如图6所示，根据本公开实施例的构建数据可视化组件库的装置600可以包括项目创建模块610、组件开发模块620、组件文档配置模块630以及打包发布模块640。该装置600可以用于实现参考图2～图5所描述的方法。

项目创建模块610用于创建数据可视化项目的目录结构，目录结构中设置有组件文件夹。在一个实施例中，项目创建模块610可以执行操作S210。在一个实施例中，项目创建模块610可以执行操作S510。

组件开发模块620用于根据数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类，其中，使用VUE开发数据展示组件，使用SVG开发效果渲染组件，并将开发完成的组件存放在组件文件夹中。在一个实施例中，组件开发模块620可以执行操作S220、操作S231、操作S232以及操作S240。或者，在一个实施例中，组件开发模块620可以执行操作S520。

组件文档配置模块630用于基于用户操作为开发完成的每个组件编写配置文件，并将配置文件存放在配置文件夹下，其中，配置文件夹设置在目录结构中。在一个实施例中，组件文档配置模块630可以执行操作S530。

打包发布模块640用于在数据可视化项目开发完成后，至少将数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。在一个实施例中，打包发布模块640可以执行操作S250。在另一个实施例中，打包发布模块640可以执行操作S540。

根据本公开的实施例，项目创建模块610、组件开发模块620、组件文档配置模块630或打包发布模块640中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，项目创建模块610、组件开发模块620、组件文档配置模块630或打包发布模块640中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，项目创建模块610、组件开发模块620、组件文档配置模块630或打包发布模块640中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图7示意性示出了适于实现根据本公开实施例的构建数据可视化组件库的方法的电子设备的方框图。图7示出的电子设备700仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图7所示，根据本公开实施例的电子设备700包括处理器701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。处理器701例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器701还可以包括用于缓存用途的板载存储器。处理器701可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 703中，存储有电子设备700操作所需的各种程序和数据。处理器701、ROM702以及RAM 703通过总线704彼此相连。处理器701通过执行ROM 702和/或RAM 703中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 702和RAM 703以外的一个或多个存储器中。处理器701也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备700还可以包括输入/输出(I/O)接口705，输入/输出(I/O)接口705也连接至总线704。电子设备700还可以包括连接至I/O接口705的以下部件中的一项或多项：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 702和/或RAM 703和/或ROM 702和RAM 703以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供的构建数据可视化组件库的方法。

在该计算机程序被处理器701执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分709被下载和安装，和/或从可拆卸介质711被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被处理器701执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种构建数据可视化组件库的方法，包括：

创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹；

根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类；

使用VUE开发所述数据展示组件；

使用SVG开发所述效果渲染组件；

将开发完成的组件存放在所述组件文件夹中；以及

在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。

2.根据权利要求1所述的方法，其中，所述数据展示组件包括以下至少之一：

展示图表组件、数字翻牌器、或轮播表。

3.根据权利要求1所述的方法，其中，所述效果渲染组件包括以下至少之一：

loading加载动画、icon描边动画、或装饰动画。

4.根据权利要求1所述的方法，其中，所述效果渲染组件包括飞线边框动画，则使用SVG开发所述飞线边框动画包括：

使用SVG编写同步多媒体集成语言动画、蒙层遮罩、渐变动画、和轨迹动画；以及

将所述多媒体集成语言动画、蒙层遮罩、渐变动画、和轨迹动画对应叠加，以得到所述飞线边框动画。

5.根据权利要求1所述的方法，其中，所述目录结构中还设置有配置文件夹，其中，所述方法还包括：

基于用户操作为开发完成的每个组件编写配置文件；以及

将所述配置文件存放在所述配置文件夹下。

6.根据权利要求5所述的方法，其中，所述基于用户操作为开发完成的每个组件编写配置文件包括：

利用第三方库来编写所述配置文件。

7.一种构建数据可视化组件库的装置，包括：

项目创建模块，用于创建数据可视化项目的目录结构，所述目录结构中设置有组件文件夹；

组件开发模块，用于根据所述数据可视化项目的展示需求，将需要开发的组件至少拆分为数据展示组件和效果渲染组件两大类，使用VUE开发所述数据展示组件，并使用SVG开发所述效果渲染组件，以及将开发完成的组件存放在所述组件文件夹中；以及

打包发布模块，用于在所述数据可视化项目开发完成后，至少将所述数据可视化项目中的组件打包并发布，以得到能够供前端用户下载使用的数据可视化组件库。

8.根据权利要求7所述的装置，其中，所述装置还包括：

组件文档配置模块，用于基于用户操作为开发完成的每个组件编写配置文件，并将所述配置文件存放在配置文件夹下，其中，所述配置文件夹设置在所述目录结构中。

9.一种电子设备，包括：

一个或多个处理器；

一个或多个存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～6中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～6中任一项所述的方法。

Images