[发明专利]一种在柱状类图表上绘制粒子和光效的方法及装置

说明书

本发明公开了一种在柱状类图表上绘制粒子和光效的方法及装置，一种在柱状类图表上绘制粒子和光效的方法，包括已绘制的柱状图形，采用上述方案，区别于现有方案简单的将柱状图和粒子与光效进行叠加，而是采用将粒子和光效作为组件或插件加入柱状图中一起绘制，在缩放和拖动的过程中，粒子和光效会随柱状图一起变化，解决了现有方案由于采用上述绘制方法，粒子和光效不支持图形自适应，宽度和高度设置固定，无法通过数据自动计算，与图形分离，不支持图形缩放等等交互的问题。

技术领域

本发明涉及图表绘制领域，特别涉及一种在柱状类图表上绘制粒子和光效的方法及装置。

背景技术

图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化的手段。数据图表可以仿版地查看数据的差异和预测趋势，使数据比较或数据变化趋势变得一目了然，有助于快速、有效地表达数据关系。图表是生成它的工作数据相链接的。

现在为了是图表更美观，一般会为图表增加一些粒子和光效，实现ECharts柱状类图表的粒子和光效，需要实现的步骤有：第一步，获取ECharts柱状类图表宽度。第二步，根据图形宽度和高度，使用webGL绘制粒子和光效。第三步，使用元素层级，将webGL绘制的效果放置柱状类图表上。

而现有方案由于采用上述绘制方法，粒子和光效不支持图形自适应，宽度和高度设置固定，无法通过数据自动计算，与图形分离，不支持图形缩放等等交互。

发明内容

本发明的目的在于：提供了一种在柱状类图表上绘制粒子和光效的方法及装置，解决了现有方案由于采用上述绘制方法，粒子和光效不支持图形自适应，宽度和高度设置固定，无法通过数据自动计算，与图形分离，不支持图形缩放等等交互的问题。

本发明采用的技术方案如下：

一种在柱状类图表上绘制粒子和光效的方法，包括已绘制的柱状图形：包括以下步骤：

S1、使用图片绘制和像素操作实现粒子和光效图形和颜色自定义配置；

S2、获取柱状图形的绘制数据；

S3、根据图形的绘制参数对步骤S1中配置的粒子和光效进行进一步配置；

S4、将步骤S3配置好的粒子和光效作为组件加入已绘制的柱状图形中进行进一步绘制得到带粒子和光效的柱状图形。

采用上述方案，区别于现有方案简单的将柱状图和粒子与光效进行叠加，而是采用将粒子和光效作为组件或插件加入柱状图中一起绘制，在缩放和拖动的过程中，粒子和光效会随柱状图一起变化，解决了现有方案由于采用上述绘制方法，粒子和光效不支持图形自适应，宽度和高度设置固定，无法通过数据自动计算，与图形分离，不支持图形缩放等等交互的问题。

进一步的，所述柱状图形采用ECharts进行绘制。ECharts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯Javascript的图表库，能够在PC端和移动设备上流畅运行，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas库ZRender，ECharts提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

进一步的，所述步骤S1中使用canvas图片绘制和像素操作实现粒子和光效图形和颜色自定义配置，按照组件扩展方法，分别通过继承组件或柱状图形的view和model基类来实现粒子和光效view和model类。

进一步的，所述步骤S2中获取柱状图形的绘制数据的方法包括以下步骤：

S201、在view类的render方法中，使用ecModel中将柱状类的seriesModel筛选出来；