利用vue绘制svg图表的方法、装置、计算机设备和存储介质与流程

本发明属于图表制作技术领域，特别涉及一种利用vue绘制svg图表的方法、装置、计算机设备和存储介质。

背景技术：

vue中展示图标，一般都是会用三方库如echarts、g2等来实现，这些三方库并不能与很好的与vue结合，主要表现在四点：1、需要拿到一个dom元素，在用三方库对dom元素做处理，这违背了vue不直接操作dom的理念。2、不能通过直接修改数据这种vue的方式来更新图表，需要手动调用它们提供的api来更新图表。3、这些三方库都是配置化渲染一张图表，配置信息太多，难以理解，并且不能如vue的模板一样直观反映内容的结构。4、这些库没有提供一种直观的方式来让用户添加自己内容，扩展报表展示内容，只能使用在他们提供的结构基础上做修改。

技术实现要素：

本发明的目的在于提供一种具有较高自由度、定制化能力和扩展性的绘制svg图表的方法、装置、计算机设备和存储介质，用户可以根据自己的需求自定义快速绘制图表。

实现本发明目的的技术解决方案为：一种利用vue绘制svg图表的方法，包括以下步骤：

搭建渐进式vue框架；

分别封装若干图表基础组件和若干图表容器，由此构建图标库；

定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；

接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；

封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

接收用户的图表交互请求，根据所述交互请求处理所述图表。

进一步地，所述接收用户图表样式需求，根据所述需求配置图表基础组件和图表容器，包括：

所述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；

所述用户图表样式需求为自定义图表样式，配置所述控制参数构建新的图表基础组件和新的图表容器，并在所述新的图表基础组件之间插入自定义元素。

进一步地，在所述将该图表展示给用户之前，还包括：根据用户图表动画需求，配置图表动画效果，对图表所在视区进行渲染。

进一步地，所述根据用户图表动画需求，配置图表动画效果，包括：

封装常规图表动画效果以及通过flip方案新增的图表动画效果；

定义上述图表动画效果的控制参数；

所述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；所述用户图表动画需求为自定义图表动画效果，配置所述图表动画效果的控制参数构建新的图表动画效果。

进一步地，根据所述交互请求处理所述图表的过程包括：

分析交互请求的对象及请求信息，所述对象包括图表基础组件、图表容器以及图表数据；所述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；

根据上述分析获得的交互请求的对象及请求信息，对所述图表进行处理。

一种利用vue绘制svg图表的装置，该装置包括：

框架搭建单元，用于搭建渐进式vue框架；

图标库建立单元，用于分别封装若干图表基础组件和若干图表容器，由此构建图标库；

参数定义单元，用于定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；

图表组件配置单元，用于根据用户图表样式需求，根据图标库建立单元和参数定义单元配置图表基础组件和图表容器，并封装配置后的图表基础组件和图表容器形成图表组件；

图表构建单元，用于根据所述图表组件以及图表数据构建图表，并将该图表展示给用户；

交互单元，用于根据用户图表交互请求处理所述图表。

进一步地，该装置还包括图表渲染单元，用于对所述图表构建单元构建的图表进行动态效果渲染后展示给用户。

进一步地，所述参数定义单元还用于定义所述图表渲染单元的控制参数。

一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行所述计算机程序时实现以下步骤：

搭建渐进式vue框架；

分别封装若干图表基础组件和若干图表容器，由此构建图标库；

定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；

接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；

封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

接收用户的图表交互请求，根据所述交互请求处理所述图表。

一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

搭建渐进式vue框架；

分别封装若干图表基础组件和若干图表容器，由此构建图标库；

定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；

接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；

封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

接收用户的图表交互请求，根据所述交互请求处理所述图表。

本发明与现有技术相比，其显著优点为：1)提供了图表封装，降低了用户制作图表的门槛且能实现快速绘制图表，减少了工作量，提高了开发效率；2)提供了定制化机制，以应对不同业务场景，使得用户根据自己的需求采用基础组件或开发自定义的组件封装图表，并且可以在组件之间插入自定义的元素，具有较高的自由度、定制化能力和扩展性，同时提高了图表的复用性、降低维护成本；3)利用vue绘制图表，实时性更高；4)图表的组装形式更符合目前工程技术体系，易于理解和开发，且提高了开发代码的可维护性。

下面结合附图对本发明作进一步详细描述。

附图说明

图1为本发明一个实施例中利用vue绘制svg图表的方法流程图。

图2为本发明一个实施例中用户需要展示的折线图。

图3为本发明一个实施例中利用vue绘制svg图表的装置结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在一个实施例中，结合图1，提供了一种利用vue绘制svg图表的方法，该方法包括以下步骤：

步骤s01、搭建渐进式vue框架；

步骤s02、分别封装若干图表基础组件和若干图表容器，由此构建图标库；

步骤s03、定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；

步骤s04、接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；

步骤s05、封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

步骤s06、接收用户的图表交互请求，根据上述交互请求处理上述图表。

上述利用vue绘制svg图表的方法中，提供了基础组件封装并定义了控制参数，用户可以根据需求直接使用基础组件或开发自己的组件，封装出图表。这降低了用户制作图表的门槛，提升了开发效率，也提高了图表的复用性、降低维护成本。利用该方法图表的组装形式更符合目前工程技术体系，易于理解和开发，且提高了开发代码的可维护性。

进一步地，在其中一个实施例中，上述封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。

采用本实施例的方案，可以通过简单分析现有图表资料方便快捷的封装出图表基础组件，复杂度比较低，任何不熟悉具体图表绘制的人员也可以完成该方案。

进一步地，在其中一个实施例中，上述控制参数用于改变图表基础组件或图表容器的结构、样式和或行为。

采用本实施例的方案，可以同时改变结构、样式、行为中的一种或多种，由此用户可以完全自定义开发封装图表的组件，没有任何约束，丰富了图表的各异性。

进一步地，在其中一个实施例中，上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：

上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；

上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。

采用本实施例的方案，可以适用于各种业务场景，也可以适用于不同等级的用户，降低用户制作图表的门槛，也可以满足用户的各种需求，提高图表的自由度、扩展性。

进一步地，在其中一个实施例中，在上述将图表展示给用户之前，还包括：对图表所在视区进行渲染。

采用本实施例的方案，可以适用于各种业务场景，且提高了可视化效果。

进一步地，在其中一个实施例中，在上述对图表所在视区进行渲染之前，还包括：根据用户图表动画需求，配置图表动画效果。

进一步优选地，在其中一个实施例中，上述根据用户图表动画需求，配置图表动画效果，过程包括：

封装常规图表动画效果以及通过flip方案新增的图表动画效果；

定义上述图表动画效果的控制参数；

上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。

采用本实施例的方案，可以适用于各种业务场景，也可以满足用户的各种个性化动画效果要求，增强图表展示的效果。

进一步地，在其中一个实施例中，上述根据交互请求处理图表的过程包括：

分析交互请求的对象及请求信息，上述对象包括图表基础组件、图表容器以及图表数据；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；

根据上述分析获得的交互请求的对象及请求信息，对上述图表进行处理。

采用本实施例的方案，用户只需通过修改控制参数实现对图表结构、样式和行为的更改，提高了图表的可复用性，简单易操作。

进一步地，在一个实施例中，用户需要展示某些数据对应的折线图，具体展示过程为：

使用者引入封装的常用折线图容器、常用图例、常用坐标轴和常用折线；

按照折线图容器>(图例,横坐标轴，纵坐标轴，折线，折线，折线)的结构编写vue模板，基础常用组件的位置可以随意；

向容器组件传入宽高和折线区域位置，控制图标大小；向折线组件传入需要展示的字段值，以及字段值是否叠加展示，以此控制组件内容、结构和样式；向图例传入大小和方向等参数，传入位置信息参数，避免错位、重叠等布局问题。

根据需要，监听窗口改变事件，修改图表大小；

将数据输入容器组件，报表展示如图2所示。

在一个实施例中，如图3所示，提供了一种利用vue绘制svg图表的装置，包括：

框架搭建单元101，用于搭建渐进式vue框架；

图标库建立单元102，用于分别封装若干图表基础组件和若干图表容器，由此构建图标库；

参数定义单元103，用于定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；

图表组件配置单元104，用于根据用户图表样式需求，根据图标库建立单元和参数定义单元配置图表基础组件和图表容器，并封装配置后的图表基础组件和图表容器形成图表组件；

图表构建单元105，用于根据上述图表组件以及图表数据构建图表，并将该图表展示给用户；

交互单元107，用于根据用户图表交互请求处理上述图表。

进一步地，在其中一个实施例中，该装置还包括图表渲染单元106，用于对图表构建单元构建的图表进行动态效果渲染后展示给用户。

进一步地，在其中一个实施例中，该装置还包括图表动画配置单元108，用于在上述图表渲染单元渲染图表的过程中提供动画效果。

进一步地，在其中一个实施例中，上述参数定义单元103还用于定义图表动画配置单元的控制参数。

关于利用vue绘制svg图表的装置的具体限定可以参见上文中对于利用vue绘制svg图表的方法的限定，在此不再赘述。上述利用vue绘制svg图表的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

搭建渐进式vue框架；

分别封装若干图表基础组件和若干图表容器，由此构建图标库；

定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；

接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；

封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

接收用户的图表交互请求，根据上述交互请求处理上述图表。

进一步地，在其中一个实施例中，处理器执行计算机程序实现封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。

进一步地，在其中一个实施例中，处理器执行计算机程序实现上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：

上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；

上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。

进一步地，在其中一个实施例中，处理器执行计算机程序实现将图表展示给用户之前，还需实现对图表所在视区进行渲染。

进一步地，在其中一个实施例中，处理器执行计算机程序实现对图表所在视区进行渲染之前，还需实现包括：根据用户图表动画需求，配置图表动画效果，过程包括：

封装常规图表动画效果以及通过flip方案新增的图表动画效果；

定义上述图表动画效果的控制参数；

上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。

进一步地，在其中一个实施例中，处理器执行计算机程序实现上述根据交互请求处理图表的过程包括：

分析交互请求的对象及请求信息，上述对象包括图表基础组件、图表容器以及图表数据；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；

根据上述分析获得的交互请求的对象及请求信息，对上述图表进行处理。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

搭建渐进式vue框架；

分别封装若干图表基础组件和若干图表容器，由此构建图标库；

定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；

接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；

封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；

接收用户的图表交互请求，根据上述交互请求处理上述图表。

进一步地，在其中一个实施例中，计算机程序被处理器执行实现封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。

进一步地，在其中一个实施例中，计算机程序被处理器执行实现上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：

上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；

上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。

进一步地，在其中一个实施例中，计算机程序被处理器执行实现将图表展示给用户之前，还需实现对图表所在视区进行渲染。

进一步地，在其中一个实施例中，计算机程序被处理器执行实现对图表所在视区进行渲染之前，还需实现包括：根据用户图表动画需求，配置图表动画效果，过程包括：

封装常规图表动画效果以及通过flip方案新增的图表动画效果；

定义上述图表动画效果的控制参数；

上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。

进一步地，在其中一个实施例中，计算机程序被处理器执行实现根据交互请求对图表进行相应的处理具体为：

分析交互请求的对象，上述对象包括图表基础组件、图表容器以及数据；

针对交互请求的对象以及具体的请求信息，设置该对象对应的控制参数以实现依请求对图表进行处理；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。