[发明专利]利用vue绘制svg图表的方法、装置、计算机设备和存储介质有效
申请号: | 201910972611.5 | 申请日: | 2019-10-14 |
公开(公告)号: | CN110781653B | 公开(公告)日: | 2023-06-30 |
发明(设计)人: | 黄文辉;杨成颖;孙迁 | 申请(专利权)人: | 苏宁云计算有限公司 |
主分类号: | G06F40/174 | 分类号: | G06F40/174;G06T13/80 |
代理公司: | 南京理工大学专利中心 32203 | 代理人: | 马鲁晋 |
地址: | 210000 江苏省南*** | 国省代码: | 江苏;32 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 利用 vue 绘制 svg 图表 方法 装置 计算机 设备 存储 介质 | ||
1.一种利用vue绘制svg图表的方法,其特征在于,包括以下步骤:
搭建渐进式vue框架;
分别封装若干图表基础组件和若干图表容器,由此构建图标库;
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数;
接收用户图表样式需求,根据所述需求分别配置图表基础组件和图表容器;
封装所配置的图表基础组件和图表容器,并将图表数据传入图表容器,构建图表并将该图表展示给用户;
接收用户的图表交互请求,根据所述交互请求处理所述图表;
在所述将该图表展示给用户之前,还包括:根据用户图表动画需求,配置图表动画效果,对图表所在视区进行渲染;
所述根据用户图表动画需求,配置图表动画效果,包括:
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果;
定义上述图表动画效果的控制参数;
所述用户图表动画需求为常规的图表动画效果,选取上述封装的图表动画效果;所述用户图表动画需求为自定义图表动画效果,配置所述图表动画效果的控制参数构建新的图表动画效果。
2.根据权利要求1所述的利用vue绘制svg图表的方法,其特征在于,所述接收用户图表样式需求,根据所述需求配置图表基础组件和图表容器,包括:
所述用户图表样式需求为常规图表样式,选取图标库中的图表基础组件和图表容器;
所述用户图表样式需求为自定义图表样式,配置所述控制参数构建新的图表基础组件和新的图表容器,并在所述新的图表基础组件之间插入自定义元素。
3.根据权利要求1所述的利用vue绘制svg图表的方法,其特征在于,根据所述交互请求处理所述图表的过程包括:
分析交互请求的对象及请求信息,所述对象包括图表基础组件、图表容器以及图表数据;所述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据;
根据上述分析获得的交互请求的对象及请求信息,对所述图表进行处理。
4.一种利用vue绘制svg图表的装置,其特征在于,包括:
框架搭建单元,用于搭建渐进式vue框架;
图标库建立单元,用于分别封装若干图表基础组件和若干图表容器,由此构建图标库;
参数定义单元,用于定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数;
图表组件配置单元,用于根据用户图表样式需求,根据图标库建立单元和参数定义单元配置图表基础组件和图表容器,并封装配置后的图表基础组件和图表容器形成图表组件;
图表构建单元,用于根据所述图表组件以及图表数据构建图表,并将该图表展示给用户;
交互单元,用于根据用户图表交互请求处理所述图表;
该装置还包括图表渲染单元,用于对所述图表构建单元构建的图表进行动态效果渲染后展示给用户;所述根据用户图表动画需求,配置图表动画效果,包括:
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果;
定义上述图表动画效果的控制参数;
所述用户图表动画需求为常规的图表动画效果,选取上述封装的图表动画效果;所述用户图表动画需求为自定义图表动画效果,配置所述图表动画效果的控制参数构建新的图表动画效果。
5.根据权利要求4所述的利用vue绘制svg图表的装置,其特征在于,所述参数定义单元还用于定义所述图表渲染单元的控制参数。
6.一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至3中任一项所述方法的步骤。
7.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至3中任一项所述方法的步骤。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于苏宁云计算有限公司,未经苏宁云计算有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201910972611.5/1.html,转载请声明来源钻瓜专利网。