CN110781652A - 一种在柱状类图表上绘制粒子和光效的方法及装置 - Google Patents

Abstract

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

Description

一种在柱状类图表上绘制粒子和光效的方法及装置

技术领域

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

背景技术

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

现在为了是图表更美观，一般会为图表增加一些粒子和光效，实现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筛选出来；

S202、通过seriesModel获得柱状图形的绘制数据，计算绘制高度或宽度最大值；

S203、根据绘制高度或宽度最大值获取图形绘制区域参数作为图形的绘制数据。

进一步的，所述步骤S3中根据图形的绘制参数对步骤S1中配置的粒子和光效进行进一步配置的方法包括以下步骤：

S301、通过步骤S203获取的绘制区域参数对粒子和光效图片进行等比缩放和图片拼接处理；

S302、对粒子和光效进行颜色处理。

进一步的，所述步骤S4中得到带粒子和光效的柱状图形的方法为：

S401、使用graphic绘制好zrender图形；

S402、将处理好的柱状图形及粒子和光效图形并添加到zrender图形组中；

S403、使用zrender的refresh方法，将柱状类图形和粒子光效图形一并绘制出来进行展示。

一种在柱状类图表上绘制粒子和光效的装置，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令，实现如权利要求1所述的一种在柱状类图表上绘制粒子和光效的方法。

综上所述，由于采用了上述技术方案，本发明的有益效果是：

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

2.本发明一种在柱状类图表上绘制粒子和光效的方法及装置，为柱状类图表添加了可以任意配置的粒子和光效效果，同时，采用组件的方式进行开发，便于移植。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，其中：

图1是本发明的粒子和光效配置界面示意图；

图2是本发明的步骤S201代码示意图；

图3是本发明的步骤S202代码示意图；

图4是本发明的步骤S203代码示意图；

图5是本发明的步骤S301代码示意图；

图6是本发明的步骤S302代码示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合图1至图6对本发明作进一步地详细描述，所描述的实施例不应视为对本发明的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本发明实施例的目的，不是旨在限制本发明。

对本发明实施例进行进一步详细说明之前，对本发明实施例中涉及的名词和术语进行说明，本发明实施例中涉及的名词和术语适用于如下的解释。

实施例1

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

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

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

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

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

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

实施例2

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

实施例3

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

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

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

S202、通过seriesModel获得柱状图形的绘制数据，计算绘制高度或宽度最大值；

S203、根据绘制高度或宽度最大值获取图形绘制区域参数作为图形的绘制数据。

进一步的，所述步骤S3中根据图形的绘制参数对步骤S1中配置的粒子和光效进行进一步配置的方法包括以下步骤：

S301、通过步骤S203获取的绘制区域参数对粒子和光效图片进行等比缩放和图片拼接处理；

S302、对粒子和光效进行颜色处理。

进一步的，所述步骤S4中得到带粒子和光效的柱状图形的方法为：

S401、使用graphic绘制好zrender图形；

S402、将处理好的柱状图形及粒子和光效图形并添加到zrender图形组中；

S403、使用zrender的refresh方法，将柱状类图形和粒子光效图形一并绘制出来进行展示。

实施例4

本实施例一种在柱状类图表上绘制粒子和光效的装置，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令，实现如权利要求1所述的一种在柱状类图表上绘制粒子和光效的方法。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (7)

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

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

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

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

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

2.根据权利要求1所述的一种在柱状类图表上绘制粒子和光效的方法，其特征在于：所述柱状图形采用ECharts进行绘制。

3.根据权利要求1或2所述的一种在柱状类图表上绘制粒子和光效的方法，其特征在于：所述步骤S1中使用canvas图片绘制和像素操作实现粒子和光效图形和颜色自定义配置，按照组件扩展方法，分别通过继承组件的view和model基类来实现粒子和光效view和model类。

4.根据权利要求1或2所述的一种在柱状类图表上绘制粒子和光效的方法，其特征在于：所述步骤S2中获取柱状图形的绘制数据的方法包括以下步骤：

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

S202、通过seriesModel获得柱状图形的绘制数据，计算绘制高度或宽度最大值；

S203、根据绘制高度或宽度最大值获取图形绘制区域参数作为图形的绘制数据。

5.根据权利要求4所述的一种在柱状类图表上绘制粒子和光效的方法，其特征在于：所述步骤S3中根据图形的绘制参数对步骤S1中配置的粒子和光效进行进一步配置的方法包括以下步骤：

S301、通过步骤S203获取的绘制区域参数对粒子和光效图片进行等比缩放和图片拼接处理；

S302、对粒子和光效进行颜色处理。

6.根据权利要求1或2所述的一种在柱状类图表上绘制粒子和光效的方法，其特征在于：所述步骤S4中得到带粒子和光效的柱状图形的方法为：

S401、使用graphic绘制好zrender图形；

S402、将处理好的柱状图形及粒子和光效图形并添加到zrender图形组中；

S403、使用zrender的refresh方法，将柱状类图形和粒子光效图形一并绘制出来进行展示。

7.一种在柱状类图表上绘制粒子和光效的装置，其特征在于：包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令，实现如权利要求1所述的一种在柱状类图表上绘制粒子和光效的方法。

Images