CN109656665A - 一种数据的可视化展示方法、组件及可读存储介质 - Google Patents

Abstract

本发明公开一种数据的可视化展示方法、组件及可读存储介质，涉及数据处理技术领域。数据的可视化展示方法，包括：获取待展示数据；根据所述待展示数据绘制与预设展示形状对应的二维图形；基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形；显示所述渲染图形。因此，待展示数据绘制成与预设展示形状对应的二维图形并对该二维图形进行三维渲染，获得并显示渲染图形。该渲染图形相对于二维图形，具有更好的展示效果。

Description

一种数据的可视化展示方法、组件及可读存储介质

技术领域

本发明涉及数据处理技术领域，具体而言，涉及一种数据的可视化展示方法、组件及可读存储介质。

背景技术

通过对数据信息的多维可视化展示，能够更直观的展示多维数据信息。现有技术中的二维图表展示在展现、色彩方面均比较单调。而多维的图表在绘制和展示时需要占用较多的系统资源。

发明内容

本申请在于提供一种数据的可视化展示方法、组件及可读存储介质，以对数据进行适应性的可视化展示。

本申请实施例通过如下方式实现：

本申请实施例第一方面提供一种数据的可视化展示方法，所述方法包括：获取待展示数据；根据所述待展示数据绘制与预设展示形状对应的二维图形；基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形；显示所述渲染图形。

即本申请实施例中，在获取需要进行数据可视化的待展示数据后，根据待展示数据绘制与预设展示形状对应的二维图形。例如待展示数据为多组具体数值的数据时，根据该多种具体数值的数据绘制对应的柱状图。又例如待展示数据为百分比数据时，根据该百分比数据绘制对应的饼状图。在根据待展示数据绘制与预设展示形状对应的二维图形后，基于Canvas对该二维图形进行三维渲染，获得预设展示形状对应的渲染图形。能够从预设观察方向和预设观察角度渲染该二维图形进行三维展示的各个面，以及填充各个面对应的颜色(例如将各个面填充相应的高光部分颜色和/或阴影部分颜色)，从而获得渲染后的2.5D图形。最后显示该渲染后的2.5D图形，从而完成将待展示数据绘制成2.5D图形的工作，进而能够将待展示数据绘制成2.5D图表。因此，本申请实施例能够将待展示数据绘制成2.5D图表，相对于现有技术中的二维图表的二维图形，本申请实施例绘制的2.5D图表通过对二维图形进行三维渲染，能够提高展示效果。相对于多维的图表(例如3D图表)，本申请实施例绘制的2.5D图表能够达到与3D图表相同的立体效果。并且，本申请实施例将待展示数据基于预设观察方向和预设观察角度绘制成的2.5D图表，能够通过占用较少的系统资源进行绘制(因为不需要进行3D建模并绘制全部的面)。在实用性方面，2.5D图表能够满足大众场景的需求，即2.5D图表适用于大众场景，2.5D图表不会像3D图表会给在大众场景中的用户带来空泛、虚无的感受。

结合第一方面，本申请实施例提供第一方面的第一种可能的实施方式，所述获取待展示数据，包括：通过ECharts的预设数据接口和预设函数，获取预设数据源中的所述待展示数据。因此，通过ECharts的预设数据接口及相应的预设函数Set Option与预设数据源进行数据对接，能够从预设数据源中获取一种或多种业务数据作为待展示数据。

结合第一方面，本申请实施例提供第一方面的第二种可能的实施方式，在根据所述待展示数据绘制与预设展示形状对应的二维图形之前，所述方法还包括：获取用户在预设界面中的配置面板上输入的展示指令；相应的，根据所述待展示数据绘制与预设展示形状对应的二维图形，包括：根据所述待展示数据和所述展示指令，绘制与预设展示形状对应的二维图形。因此，能够基于用户在预设界面中的配置面板上输入的展示命令，将待展示数据绘制与预设展示形状对应的二维图形。

结合第一方面或第一方面的第二种可能的实施方式，本申请实施例提供第一方面的第三种可能的实施方式，在根据所述待展示数据和所述展示指令，绘制与预设展示形状对应的二维图形之后，所述方法还包括：在所述预设界面中的预览区域内展示所述二维图形。因此，用户通过浏览在预设界面中的预览区域内展示的二维图形，能够对该二维图形的配置进行调整，从而完成待展示数据的可视化配置。

结合第一方面，本申请实施例提供第一方面的第四种可能的实施方式，所述基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形，包括：使用所述Canvas的二维图形API模拟所述二维图形的第一种三维展示效果；基于所述第一种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形。因此，模拟二维图形的第一种三维展示效果，可以是通过三维图形的绘制算法，例如柱状立方体，扇形饼图的绘制算法在画布上绘制三维图形效果。由于这些绘制算法基于使用二维图形API实现，相对于Echarts-GL等三维图形API来说简单并且运行代价低廉(由于渲染获得的2.5D图形的展示总是基于某一固定观察方向和某一固定观察角度的，而三维图形展示是可以实时调节观察角度的，所以三维图形展示的运行代价要比2.5D图形的展示的运行代价高的多)。

结合第一方面或第一方面的第四种可能的实施方式，本申请实施例提供第一方面的第五种可能的实施方式，基于所述第一种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形，包括：使用ZRender绘图引擎处理所述第一种三维展示效果，获得第二种三维展示效果；基于所述第二种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形。因此，使用ZRender绘图引擎对第一种三维展示效果进行填充计算，即对原生Canvas的API进行优化。可理解的，通过ZRender绘图引擎对第一种三维展示效果中确定的进行三维展示的各个面的对应颜色，具体为各个面需要填充相应的高光部分颜色和/或阴影部分颜色，进行填充计算，从而进一步优化使用Canvas的二维图形API模拟获得的二维图形的第一种三维展示效果，进而能够提高图形各面的渲染速率。

结合第一方面，本申请实施例提供第一方面的第六种可能的实施方式，在基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形之后，所述方法还包括：通过调用ECharts的API在所述渲染图形上生成预设展示动画效果；显示所述预设展示动画效果。因此，通过调用ECharts的API能够为渲染图形加载预设展示动画效果，从而实现2.5D图形的数据切换动画效果，例如柱状图的高低程度变化，又例如扇形饼图的突出显示与隐藏。

结合第一方面或第一方面的第六种可能的实施方式，本申请实施例提供第一方面的第七种可能的实施方式，在通过调用ECharts的API在所述渲染图形上生成预设展示动画效果之前，所述方法还包括：获取用户在预设界面中的配置面板上输入的所述预设展示动画效果。因此，用户能够通过在预设界面中的配置面板上输入或指定预设展示动画效果，该预设展示动画效果能够被加载进渲染图形中，从而能够在显示渲染图形时取得更好地展示效果。

本申请实施例第二方面提供一种数据的可视化展示组件，所述组件包括：

ECharts，所述ECharts用于获取预设数据源中的待展示数据；

ZRender绘图引擎，用于根据所述待展示数据绘制与预设展示形状对应的二维图形；

Canvas，用于对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形；

显示界面，用于显示所述渲染图形。

本申请实施例第三方面提供一种计算机可读储存介质，所述计算机可读储存介质用于存储程序代码，所述程序代码在被计算机读取并运行时，执行如本申请实施例第一方面或第一方面的任意一种可能的实施方式所述的一种数据的可视化展示方法。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举本发明较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍。应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的一种数据的可视化展示组件的交互示意图。

图2为本申请实施例提供的一种数据的可视化展示方法的第一种步骤图。

图3为本申请实施例提供的一种数据的可视化展示方法的第二种步骤图。

图4为本申请实施例提供的一种数据的可视化展示方法的第一种预设界面的示意图。

图5为本申请实施例提供的一种数据的可视化展示方法的第二种预设界面的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。此外，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

请参照图1、图2和图3所示，图1为本申请实施例提供的一种数据的可视化展示组件的交互示意图。图2为本申请实施例提供的一种数据的可视化展示方法的第一种步骤图。图3为本申请实施例提供的一种数据的可视化展示方法的第二种步骤图。

其中，图1、图2和图3中的E为ECharts(Enterprise Charts，商业级数据图表)，是一个开源的数据可视化工具。ECharts作为图表与数据的连接桥梁，可将数据图表的展示需求得以完成。同时，ECharts的底层依赖轻量级的Canvas(画布)类库ZRender(ZlevelRender，二维绘图引擎)，ECharts能够提供更加直观、生动、可交互的个性化数据可视化报表。同时，ECharts使用Canvas库ZRender绘图引擎，便于专业的业务人员高效地进行开发组件工作，为专业的业务人员提供便捷的操作方式。

可理解的，图1、图2和图3中的Z为ZRender绘图引擎，是二维绘图引擎，ZRender绘图引擎提供Canvas、SVG(Scalable Vector Graphics，可缩放矢量图形)、VML(VectorMarkup Language，向量图形绘制语言)等多种渲染方式。Zrender是一个全新的轻量级Canvas类库，包括：MVC(Model View Controller，模型-视图-控制器)封装，数据驱动，可提供类DOM(Document Object Model，文件对象模型)的分层机制和事件模型，Promise(承诺)式的动画接口。同时，ZRender也是ECharts的渲染器或着色器。

可理解的，图1、图2和图3中的C为Canvas，Canvas的API(ApplicationProgramming Interface，应用程序编程接口)是在HTML5(Hyper Text Markup LanguageFive，超级文本标记语言5.0)中新增的标签用于在网页实时生成图像，并且可以操作图像内容，Canvas是一个可以用JavaScript(直译式脚本语言)操作的位图(Bit Map)。Canvas通过JavaScript来绘制2D(Two Dimensional，二维的)图形。

为了便于本领域技术人员更好的理解本申请实施例，此处先介绍本申请实施例提供的一种数据的可视化展示组件，该数据的可视化展示组件包括：ECharts，ECharts用于获取预设数据源中的待展示数据；ZRender绘图引擎，用于根据待展示数据绘制与预设展示形状对应的二维图形；Canvas，用于对二维图形进行三维渲染，获得预设展示形状对应的渲染图形；显示界面，用于显示渲染图形。

基于本申请实施例提供的一种数据的可视化展示组件，本申请实施例还提供一种数据的可视化展示方法，该数据的可视化展示方法包括以下步骤：

步骤S100，获取待展示数据。

可理解的，待展示数据为需要进行数据可视化的业务数据。获取待展示数据可以是调用预先存储的待展示数据，也可以是根据通过ECharts获取预设数据源中的待展示数据。

可选的，步骤S100可以包括步骤S1000，通过ECharts的预设数据接口和预设函数，获取预设数据源中的待展示数据。

具体而言，通过ECharts的预设数据接口及相应的预设函数Set Option(设置-图表配置选项)与预设数据源进行数据对接，从而在预设数据源中获取待展示数据，进而基于该待展示数据在步骤S300中能够绘制二维图形。

其中，预设数据源为预先设置的数据库，用户能够预先将多种业务数据输入到该数据库中。在用户通过ECharts进行与预设数据源进行数据对接时，用户能够从该预设数据源中确选出一种或多种业务数据作为待展示数据。因此，通过ECharts的预设数据接口和预设函数，能够从预设数据源中获取一种或多种业务数据作为待展示数据。

步骤S300，根据待展示数据绘制与预设展示形状对应的二维图形。

具体而言，预设展示形状对应的二维图形可以是从柱状图、柱状堆积图、饼图和面积图中确选出的一种或多种图形。即用户能够选择预设展示形状，从而将待展示数据绘制成与预设展示形状对应的二维图形。因此，将待展示数据绘制与预设展示形状对应的二维图形，完成将待展示数据进行数据可视化转换成图表的工作。

可理解的，在获取需要进行数据可视化的待展示数据后，即进行本申请实施例的步骤S100后，步骤S300根据待展示数据绘制与预设展示形状对应的二维图形。例如待展示数据为多组具体数值的数据时，能够根据该多种具体数值的数据绘制对应的柱状图。又例如待展示数据为百分比数据时，能够根据该百分比数据绘制对应的饼状图。

可选的，在步骤S300之前，本申请实施例还包括以下步骤：

步骤S2000，获取用户在预设界面中的配置面板上输入的展示指令。

可理解的，基于步骤S1000和步骤S2000，步骤S300的内容相应的可以包括步骤S3000，根据待展示数据和展示指令，绘制与预设展示形状对应的二维图形。

首先，请参照图4所示，图4为本申请实施例提供的一种数据的可视化展示方法的第一种预设界面的示意图。在第一种预设界面中，左边的区域可以是预览区域，预览区域的四周设置有标尺；右边的区域可以是配置面板。

在第一种预设界面中，本申请实施例能够获取用户在配置面板上输入的以下展示指令：配置组件的ID(Identification，身份标识号)、配置组件的名称、二维图形的背景颜色、二维图形的边框颜色、二维图形的边框粗细程度、二维图形是否需要延迟加载(需要延迟加载时，用户能够浏览二维图形的绘制全过程；不需要延迟加载时，用户能够直接浏览绘制完成的二维图形)、二维图形是否可用(可用时，用户能够对当前二维图形进行后续编辑和配置的操作；不可用时，用户仅能预览当前二维图形，不能够对该当前二维图形进行后续编辑和配置的操作)、是否显示二维图形的预览情况(在为是时，显示二维图形的当前预览图形；在为否时，不显示二维图形)、Tips(提示，用于备注二维图形)和刷新频率(用于实时按照刷新频率更新二维图形。所以，根据待展示数据和用户在配置面板上输入的展示指令，能够绘制与预设展示形状对应的二维图形。并且，用户能够通过在预览区域内浏览二维图形，从而通过浏览该二维图形的可视化方式在配置面板中配置该二维图形的各种属性，其中，配置各种属性即为用户在配置面板上输入展示指令。因此，通过可视化配置二维图形的各种属性，能够方便用户配置出符合条件的二维图形。符合条件可以是用户对该二维图形的满意程度，也可以是关于待展示数据的可视化程度。

接下来，请参照图5所示，图5为本申请实施例提供的一种数据的可视化展示方法的第二种预设界面的示意图。在第二种预设界面中，左边的区域可以是预览区域，预览区域中有是否显示预览图形的预览按键，当该预览处于使用状态时，在预览区域内显示预览图形，其中，预览图形可以是二维图形，也可以是最终渲染的2.5D(2.5Dimensional，介于2D和3D(ThreeDimensional，三维的)之间的)图形；右边的区域可以是配置面板。

在第二种预设界面中，用户能够在配置面板上输入的以下展示指令：选择并确定数据来源和业务数据，即确选预设数据源和待展示数据。将维度标签拖拽到维度配置区域内；将度量标签拖拽到度量配置区域内；输入数据展示条数，数据展示条数用于限定二维图形中的数据展示的数量。

具体而言，可以是用户先在数据来源区域导入、选择和确定预设数据源。然后，用户选择并确定作为待展示数据的业务数据。接着，维度标签显示区域内显示维度标签，用户确选出维度标签并将该维度标签拖拽到维度配置区域内。同理，度量标签显示区域内显示度量标签，用户确选出度量标签并将该度量标签拖拽到度量配置区域内。最后，用户在数据展示条数的输入框中输入数据展示条数。从而用户完成在配置面板上输入展示指令的操作，进而根据待展示数据和用户在配置面板上输入的展示指令，能够绘制与预设展示形状对应的二维图形，并且预览区域能够显示该二维图形的预览图形。

可理解的，基于第二种预设界面，本申请实施例提供组件化布局，节省占用计算机内存资源、CPU(Central Processing Unit，中央处理器)资源以及降低开发成本。通过容器组件来进行布局，在容器组件中添加数据展示所需相关组件，通过组件编辑器统一管理所有组件的层级关系。容器组件可以在页面中自由拖拽并且嵌套展示。非专业的业务人员无需编写组件布局相关代码就能通过拖拽的方式形成各种组件的布局方式。

可理解的，在进行步骤S2000之前，本申请实施例还包括：封装展示指令对应的参数，获得封装后的参数；将该封装后的参数设置在预设界面中的配置面板上。因此，非专业的业务人员能够在配置面板上输入展示指令，完成配置工作，从而提升易用性。

接下来，在步骤S3000之后，还可以执行步骤S4000，在预设界面中的预览区域内展示二维图形。

具体而言，在预设界面中的预览区域内展示根据待展示数据和展示指令绘制的二维图形。用户能够通过在预览区域内浏览二维图形，从而通过浏览该二维图形的可视化方式在配置面板中配置该二维图形的各种属性，其中，配置各种属性即为用户在配置面板上输入展示指令。因此，通过可视化配置二维图形的各种属性，能够方便用户配置出符合条件的二维图形。符合条件可以是用户对该二维图形的满意程度，也可以是关于待展示数据的可视化程度。

可理解的，用户还能够选择预设展示形状，从而根据待展示数据和展示指令绘制成与预设展示形状对应的二维图形。因此，将待展示数据绘制与预设展示形状对应的二维图形，完成将待展示数据进行数据可视化转换成图表的工作。所以，用户通过浏览在预设界面中的预览区域内展示的二维图形，能够对该二维图形的配置进行调整，从而完成待展示数据的可视化配置。

接下来请继续参照图1和图2所示。

步骤S500，基于Canvas对二维图形进行三维渲染，获得预设展示形状对应的渲染图形。

具体而言，基于Canvas对该二维图形进行三维渲染，获得预设展示形状对应的渲染图形。能够从预设观察方向和预设观察角度渲染该二维图形进行三维展示的各个面，以及填充各个面对应的颜色(即为将各个面填充相应的高光部分颜色和/或阴影部分颜色)，从而获得渲染后的2.5D图形。最后显示该渲染后的2.5D图形，从而完成将待展示数据绘制成2.5D图形的工作，进而能够将待展示数据绘制成2.5D图表。因此，2.5D图表中的渲染图形，相对于二维图形，具有更好的展示效果。

可理解的，从预设观察方向和预设观察角度渲染该二维图形进行三维展示的各个面。可以是通过斜二测画法绘制该二维图形的斜二测直观图，从而确定该二维图形需要进行三维展示的各个面。换言之，通过斜二测画法的方向和角度，将该二维图形绘制成三维立体图形的形式，即通过斜二测画法能够将二维图形三维化，然后确定出该二维图形需要进行三维展示的所有的可视面。

其中，预设观察方向为该二维图形的斜二测画法的方向，预设观察角度为斜二测画法的角度。可视面为用户能够直接观看的面，二维图形三维化后被遮挡的面不属于可视面。例如，该二维图形为矩形时，可视面包括矩形的前面，一个侧面和顶面。即对矩形进行三维渲染后，能够看到矩形体的三个可视面。

需要注意的第一点是，本申请实施例除了能够通过斜二测画法对二维图形进行三维渲染之外，还能够通过其他预设观察方向和其他预设观察角度，对该二维图形进行三维渲染。

需要注意的第二点是，本申请实施例与本领域技术人员使用的现有技术不同的是，该现有技术需要先对二维图形进行3D建模，然后3D建模获得该二维图形的三维立体图形，即能够获得该二维图形的所有的面。接着，展示该三维立体图形，再从所有的面中由用户确定出需要进行三维展示的各个面，最后输出确定该二维图形需要进行三维展示的各个面。因此，由于三维图形展示可以实时调节观察方向和观察角度，所以运行时需要占用较多的计算机内存资源和CPU资源。

可选的，步骤S500包括步骤S5000、步骤S6000和步骤S5000，下面分别对这三个步骤进行说明。

步骤S5000，使用Canvas的二维图形API模拟二维图形的第一种三维展示效果。

可理解的，Canvas的二维图形API的运行效率比Canvas的纯三维的API运行效率高，并且该二维图形API运行时占用的计算机内存资源和CPU资源比该纯三维的API运行时占用的计算机内存资源和CPU资源少。

可理解的，模拟二维图形的第一种三维展示效果，可以是通过三维图形的绘制算法，例如柱状立方体，扇形饼图的绘制算法在画布上绘制三维图形效果。由于这些绘制算法基于使用二维图形API实现，相对于Echarts-GL等三维图形API来说简单(因此，开发成本较低)并且运行代价低廉(由于渲染获得的2.5D图形的展示总是基于某一固定观察方向和某一固定观察角度的，而三维图形展示是可以实时调节观察角度的，所以三维图形展示的运行代价要比2.5D图形的展示的运行代价高的多)。具体过程在步骤S500中已经介绍，此处不再赘述。

可选的，在进行步骤S5000之后，可以基于第一种三维展示效果渲染二维图形，获得预设展示形状对应的渲染图形。

步骤S6000，使用ZRender绘图引擎处理第一种三维展示效果，获得第二种三维展示效果。

步骤S7000，基于第二种三维展示效果渲染二维图形，获得预设展示形状对应的渲染图形。

具体而言，使用ZRender绘图引擎对第一种三维展示效果进行填充计算，即对原生Canvas的API进行优化。可理解的，通过ZRender绘图引擎对第一种三维展示效果中确定的进行三维展示的各个面的对应颜色，具体为各个面需要填充相应的高光部分颜色和/或阴影部分颜色，进行填充计算，从而进一步优化使用Canvas的二维图形API模拟获得的二维图形的第一种三维展示效果，进而能够提高图形各面的渲染速率。

可选的，在进行步骤S500之后，也可以是在进行步骤S7000之后，并且在进行步骤S700之前。本申请实施例还包括：步骤S8000和步骤S9000。

步骤S8000，获取用户在预设界面中的配置面板上输入的预设展示动画效果。因此，用户能够通过在预设界面中的配置面板上输入或指定预设展示动画效果，该预设展示动画效果能够被加载进渲染图形中，从而能够在显示渲染图形时取得更好地展示效果。

可理解的，预设展示动画效果可以是柱状图的高低程度变化，具体为在柱状图中的单个柱状图形对应的待展示数据变化，并且该变化是待展示数据的数值递增时，对应的单个柱状图形的高度会升高。或者该变化是待展示数据的数值递减时，对应的单个柱状图形的高度会降低。

可理解的，预设展示动画效果还可以是扇形饼图的突出显示与隐藏。具体为在需要展示扇形饼图中的某一部分扇面饼图的具体情况，例如百分比时，将该扇面饼图突出显示，而其他部分的扇面饼图可以隐藏。或者在展示扇形饼图时，介绍完某一部分的扇面饼图的具体情况，预设展示动画效果为将该扇面饼图隐藏，并且预设展示动画效果能够将由用户指定的下一个扇面饼图突出显示，从而完成衔接的预设展示动画效果。

步骤S9000，通过调用ECharts的API在渲染图形上生成预设展示动画效果；显示预设展示动画效果。因此，通过调用ECharts的API能够为渲染图形加载预设展示动画效果，从而实现2.5D图形的数据切换动画效果，例如柱状图的高低程度变化，又例如扇形饼图的突出显示与隐藏。

步骤S700，显示渲染图形。

可理解的，显示待展示数据通过上述步骤获得的渲染图形。本申请实施例根据预设展示形状，用户指定的配置的展示指令和用户输入的预设展示动画效果对待展示数据进行数据可视化处理，获得该渲染图形。

进一步的，获得的渲染图形可以为2.5D图表。即对待展示数据进行数据可视化处理，获得渲染图形的过程中，能够将待展示数据绘制成2.5D图表。具体而言，可以是在步骤S300中，将待展示数据绘制成二维图表，从而在后续步骤中，对该二维图表中的二维图形进行三维渲染，最终得到2.5D图表。也可以是在步骤S3000中，将待展示数据绘制成二维图表，从而在后续步骤中，对该二维图表中的二维图形进行三维渲染，最终得到2.5D图表。可理解的，在另一种可能实施的方式中，预设展示形状可以是具体的二维图表形式，例如二维柱状图表或扇形图表。

进一步的，本申请实施例能够支持多样化的效果呈现，包括2.5D柱状图、2.5D混合图、2.5D柱状堆积图、2.5D面积图以及2.5D饼图。可以根据各种应用场景来选择适合的图形表现方式。比如根据时间和地区来展示销售额可以用柱状图，展示所有地区销售额的百分占比可以用饼图等。

本申请实施例还提供一种计算机可读储存介质，所述计算机可读储存介质用于存储程序代码，所述程序代码在被计算机读取并运行时，执行前述的一种数据的可视化展示方法中的任一实施例中的方法。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现，基于这样的理解，本发明的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施场景所述的方法。

在本发明所提供的实施例中，应该理解到，所揭露的装置、系统和方法，也可以通过其它的方式实现。以上所描述的装置、系统和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。

也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。可以替换的，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。

当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。

所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种数据的可视化展示方法，其特征在于，所述方法包括：

获取待展示数据；

根据所述待展示数据绘制与预设展示形状对应的二维图形；

基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形；

显示所述渲染图形。

2.根据权利要求1所述的数据的可视化展示方法，其特征在于，所述获取待展示数据，包括：

通过ECharts的预设数据接口和预设函数，获取预设数据源中的所述待展示数据。

3.根据权利要求1所述的数据的可视化展示方法，其特征在于，在根据所述待展示数据绘制与预设展示形状对应的二维图形之前，所述方法还包括：

获取用户在预设界面中的配置面板上输入的展示指令；

相应的，根据所述待展示数据绘制与预设展示形状对应的二维图形，包括：

根据所述待展示数据和所述展示指令，绘制与预设展示形状对应的二维图形。

4.根据权利要求3所述的数据的可视化展示方法，其特征在于，在根据所述待展示数据和所述展示指令，绘制与预设展示形状对应的二维图形之后，所述方法还包括：

在所述预设界面中的预览区域内展示所述二维图形。

5.根据权利要求1所述的数据的可视化展示方法，其特征在于，所述基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形，包括：

使用所述Canvas的二维图形API模拟所述二维图形的第一种三维展示效果；

基于所述第一种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形。

6.根据权利要求5所述的数据的可视化展示方法，其特征在于，基于所述第一种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形，包括：

使用ZRender绘图引擎处理所述第一种三维展示效果，获得第二种三维展示效果；

基于所述第二种三维展示效果渲染所述二维图形，获得所述预设展示形状对应的渲染图形。

7.根据权利要求1所述的数据的可视化展示方法，其特征在于，在基于Canvas对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形之后，所述方法还包括：

通过调用ECharts的API在所述渲染图形上生成预设展示动画效果；

显示所述预设展示动画效果。

8.根据权利要求7所述的数据的可视化展示方法，其特征在于，在通过调用ECharts的API在所述渲染图形上生成预设展示动画效果之前，所述方法还包括：

获取用户在预设界面中的配置面板上输入的所述预设展示动画效果。

9.一种数据的可视化展示组件，其特征在于，所述组件包括：

ECharts，所述ECharts用于获取预设数据源中的待展示数据；

ZRender绘图引擎，用于根据所述待展示数据绘制与预设展示形状对应的二维图形；

Canvas，用于对所述二维图形进行三维渲染，获得所述预设展示形状对应的渲染图形；

显示界面，用于显示所述渲染图形。

10.一种计算机可读储存介质，其特征在于，所述计算机可读储存介质用于存储程序代码，所述程序代码在被计算机读取并运行时，执行如权利要求1-8任一权项所述的一种数据的可视化展示方法。