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

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

The method, device, computer equipment and storage medium of drawing SVG chart with Vue

【技术实现步骤摘要】
利用vue绘制svg图表的方法、装置、计算机设备和存储介质
本专利技术属于图表制作
，特别涉及一种利用vue绘制svg图表的方法、装置、计算机设备和存储介质。
技术介绍
Vue中展示图标，一般都是会用三方库如echarts、g2等来实现，这些三方库并不能与很好的与Vue结合，主要表现在四点：1、需要拿到一个dom元素，在用三方库对dom元素做处理，这违背了Vue不直接操作dom的理念。2、不能通过直接修改数据这种Vue的方式来更新图表，需要手动调用它们提供的api来更新图表。3、这些三方库都是配置化渲染一张图表，配置信息太多，难以理解，并且不能如Vue的模板一样直观反映内容的结构。4、这些库没有提供一种直观的方式来让用户添加自己内容，扩展报表展示内容，只能使用在他们提供的结构基础上做修改。
技术实现思路
本专利技术的目的在于提供一种具有较高自由度、定制化能力和扩展性的绘制svg图表的方法、装置、计算机设备和存储介质，用户可以根据自己的需求自定义快速绘制图表。实现本专利技术目的的技术解决方案为：一种利用vue绘制本文档来自技高网...

【技术保护点】
1.一种利用vue绘制svg图表的方法，其特征在于，包括以下步骤：/n搭建渐进式vue框架；/n分别封装若干图表基础组件和若干图表容器，由此构建图标库；/n定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；/n接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；/n封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；/n接收用户的图表交互请求，根据所述交互请求处理所述图表。/n

【技术特征摘要】
1.一种利用vue绘制svg图表的方法，其特征在于，包括以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据所述交互请求处理所述图表。


2.根据权利要求1所述的利用vue绘制svg图表的方法，其特征在于，所述接收用户图表样式需求，根据所述需求配置图表基础组件和图表容器，包括：
所述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
所述用户图表样式需求为自定义图表样式，配置所述控制参数构建新的图表基础组件和新的图表容器，并在所述新的图表基础组件之间插入自定义元素。


3.根据权利要求1所述的利用vue绘制svg图表的方法，其特征在于，在所述将该图表展示给用户之前，还包括：根据用户图表动画需求，配置图表动画效果，对图表所在视区进行渲染。


4.根据权利要求3所述的利用vue绘制svg图表的方法，其特征在于，所述根据用户图表动画需求，配置图表动画效果，包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
所述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；所述用户图表动画需求为自定义图表动画效果，配置所述图表动画效果的控制参数构建新的图表动画效果。


5.根据权利要求1所述的利用vue绘制svg图表的方法，其特征在于，根...

【专利技术属性】
技术研发人员：黄文辉，杨成颖，孙迁，
申请(专利权)人：苏宁云计算有限公司，
类型：发明
国别省市：江苏;32