[发明专利]利用vue绘制svg图表的方法、装置、计算机设备和存储介质

说明书

本发明公开了一种利用vue绘制svg图表的方法、装置、计算机设备和存储介质，方法包括：搭建vue框架；分别封装图表基础组件、图表容器；定义图表基础组件、图表容器各自的控制参数；根据用户图表样式需求配置图表基础组件和图表容器；封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并展示；根据交互请求处理图表。装置包括框架搭建单元、图标库建立单元、参数定义单元、图表组件配置单元、图表构建单元以及交互单元。计算机设备和存储介质通过执行计算机程序能够实现上述方法过程。本发明提供封装、提供定制化机制，以应对不同业务场景，提高了图表的自由度、可扩展性和复用性，且更符合目前工程技术体系，易于理解和开发。

技术领域

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

背景技术

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

发明内容

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

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

搭建渐进式vue框架；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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