CN116028046A - 一种数据处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供了一种数据处理方法、装置、电子设备及存储介质。使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。实现“一次开发，多端使用”的效果，降低开发人员的开发工作量，降低人工成本。其次，可以提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

Description

一种数据处理方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种数据处理方法、装置、电子设备及存储介质。

背景技术

目前，很多服务厂商通过页面来对外(例如为广大用户等)提供服务，且为了更友好地对外提供服务，服务厂商往往会在页面中渲染包括2D/3D图形的图表，以通过页面中的包括2D/3D图形的图表对外提供服务。

发明内容

本申请示出了一种数据处理方法、装置、电子设备及存储介质。

第一方面，本申请示出了一种数据处理方法，应用于电子设备中，电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库，原生应用程序支持使用第二图形库渲染图形的图形数据，原生应用程序不支持使用第一图形库渲染图形的图形数据，所述方法包括：

使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染；

将目标格式的图形数据传递至原生应用程序中的第二图形库；

使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

在一个可选的实现方式中，第一图形库包括Echarts图形库，目标格式包括SVG格式，第二图形库包括Skia图形库等。

在一个可选的实现方式中，所述使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据，包括：

监听操作体对在原生应用程序的页面上当前显示的图表的操控信息；

将所述操控信息转换为第一图形库支持的格式的操控信息；

使用第一图形库对当前显示的图表以及第一图形库支持的格式的操控信息进行计算，得到用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；

所述使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据，包括：

基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，第一图形库中具有API，所述API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；

所述将目标格式的图形数据传递至原生应用程序中的第二图形库，包括：

基于第一图形库中的所述API调用第二自定义渲染组件中的所述传递函数，并基于所述传递函数通过所述关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

第二方面，本申请示出了一种数据处理方法，应用于电子设备，电子设备中部署有开发环境，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括用于使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令；

所述方法包括：

获取对工程项目中的原生应用程序的页面的第一计算机程序代码的打包请求，所述打包请求携带原生应用程序的标识，所述打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面；

根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据；

使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码；

对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

在一个可选的实现方式中，所述方法还包括：

存储原生应用程序的页面的第二计算机程序代码。

第三方面，本申请示出了一种数据处理装置，应用于电子设备中，电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库，原生应用程序支持使用第二图形库渲染图形的图形数据，原生应用程序不支持使用第一图形库渲染图形的图形数据，所述装置包括：

第一获取模块，用于使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染；

传递模块，用于将目标格式的图形数据传递至原生应用程序中的第二图形库；

渲染模块，用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

在一个可选的实现方式中，第一图形库包括Echarts图形库，目标格式包括SVG格式，第二图形库包括Skia图形库等。

在一个可选的实现方式中，所述第一获取模块包括：

监听单元，用于监听操作体对在原生应用程序的页面上当前显示的图表的操控信息；

转换单元，用于将所述操控信息转换为第一图形库支持的格式的操控信息；

计算单元，用于使用第一图形库对当前显示的图表以及第一图形库支持的格式的操控信息进行计算，得到用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；

所述第一获取模块包括：

获取单元，用于基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，第一图形库中具有API，所述API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；

所述传递模块包括：

调用单元，用于基于第一图形库中的所述API调用第二自定义渲染组件中的所述传递函数，传递单元，用于基于所述传递函数通过所述关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

第四方面，本申请示出了一种数据处理装置，应用于电子设备，电子设备中部署有开发环境，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括用于使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令；

所述装置包括：

第二获取模块，用于获取对工程项目中的原生应用程序的页面的第一计算机程序代码的打包请求，所述打包请求携带原生应用程序的标识，所述打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面；

第三获取模块，用于根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据；

替换模块，用于使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码；

打包模块，用于对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

在一个可选的实现方式中，所述装置还包括：

存储模块，用于存储原生应用程序的页面的第二计算机程序代码。

第五方面，本申请示出了一种电子设备，所述电子设备包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行如上述任一方面所述的方法。

第六方面，本申请示出了一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如上述任一方面所述的方法。

第七方面，本申请示出了一种计算机程序产品，当所述计算机程序产品中的指令由电子设备的处理器执行时，使得电子设备能够执行如上述任一方面所述的方法。

本申请提供的技术方案可以包括以下有益效果：

在本申请中，获取对工程项目中原生应用程序的页面的第一计算机程序代码的打包请求，打包请求携带原生应用程序的标识，打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面。根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据。使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码。对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

如此，支持在需要在原生应用程序的页面中渲染包括2D/3D的图形的图表的情况下，可以使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。其中，目标格式的图形数据可以包括2D/3D的图形的图表。

一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即第一计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码即第二计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到第一图形库例如Echarts图形库的相关功能，例如，可以使用第一图形库获取用于在页面上渲染的目标格式例如SVG格式的图形数据，将目标格式的图形数据传递至第二图形库例如Skia图形库，以及，使用第二图形库在页面上渲染目标格式的图形数据，如此，不仅能够实现渲染目标格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的目标格式的图形数据是使用第一图形库获取的，使得在载体原生应用程序的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

附图说明

图1是本申请的一种数据处理方法的步骤流程图。

图2是本申请的一种数据处理方法的步骤流程图。

图3是本申请的一种数据处理装置的结构框图。

图4是本申请的一种数据处理装置的结构框图。

图5是本申请的一种电子设备的框图。

图6是本申请的一种电子设备的框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通开发人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

目前市面上能够承载页面的载体包括多种，例如，原生应用程序、小程序以及Web(网页)等。

另外，服务厂商为了增加对外提供服务的服务通道，往往会通过多种载体承载页面，以通过多种载体分别承载的页面分别对外提供服务。

为了能够通过多种载体分别承载的页面分别对外提供服务，服务厂商的开发人员可以事先分别开发各种载体分别承载的页面，例如，开发原生应用程序承载的页面，开发小程序承载的页面以及开发Web承载的页面等，各种载体分别承载的页面中均具有包括2D/3D图形的图表。

然而，发明人发现：服务厂商的开发人员分别开发各种载体分别承载的页面的开发工作量大，人工成本高。

如此，提出了降低开发人员的开发工作量的需求。

为了实现降低开发人员的开发工作量的目的，发明人分析了“服务厂商的开发人员分别开发各种载体分别承载的页面的开发工作量大”的原因，并发现：

承载页面的不同的载体的技术栈往往不同，技术栈至少涉及绘制包括2D/3D图形的图表所支持使用的绘制工具，如此，在不同的载体分别承载的页面中绘制包括2D/3D图形的图表所支持使用的绘制工具也往往不同。

其中，绘制工具可以包括图形库等，其中，一种形象的理解为：图形库可以看作笔，调用图形库可以绘制2D/3D图形，进而形成包括2D/3D图形的图表。

在开发页面的阶段中，开发人员往往通过编写页面的计算机程序代码来开发页面，其中，在开发人员编写页面的计算机程序代码的过程中，需要针对承载页面的载体支持的技术栈来针对性地编写页面的计算机程序代码。

例如，在开发不同的载体分别承载的页面的计算机程序代码的过程中，需要分别编写的用于获取用于在页面上渲染的图形数据的获取指令不同以及用于在页面上渲染图形数据的渲染指令不同等。

例如，图形库对外开放有API(Application Program Interface，应用程序编程接口)，渲染图形数据需要使用到图形库，如此，用于在页面上渲染图形数据的渲染指令中包括调用图形库的代码，例如，通过图形库的API调用图形库的调用语句(代码)等，但是，由于不同的载体支持的图形库不同，不同的图形库对外开放的图形库的API不同。

在一个例子中，载体Web支持Echarts图形库的功能，如此，在开发载体Web承载的页面的计算机程序代码的过程中，可以编写用于使用Echarts图形库获取用于在页面上渲染的SVG格式的图形数据的获取指令以及用于使用Echarts图形库在页面上渲染SVG格式的图形数据的渲染指令等。

在另一个例子中，载体原生应用程序不支持Echarts的功能，而支持Skia图形库，如此，在开发载体原生应用程序承载的页面的计算机程序代码的过程中，可以编写用于使用Skia图形库获取用于在页面上渲染的SVG格式的图形数据的获取指令以及用于使用Skia图形库在页面上渲染SVG格式的图形数据的渲染指令等。

为此，针对不同的载体分别承载的页面的计算机程序代码需要分别开发，例如，服务厂商需要通过哪些载体来承载页面以对外提供服务，则需要分别编写这些载体中的各个载体分别承载的页面的计算机程序代码，也即，需要针对各个载体分别编写一套页面的不同的计算机程序代码，导致编写页面的计算机程序代码的开发工作量大，人工成本高。

鉴于此原因，发明人想到了，对于各个载体分别承载的页面而言，如果可以仅编写一套页面的计算机程序代码，且编写的这一套页面的计算机程序代码能够在各个载体上分别复用，则可以实现“一次开发，多端使用”的效果，进而可以降低开发人员的开发工作量，降低人工成本。

为了能够实现编写的一套页面的计算机程序代码能够在各个载体上分别复用，发明人想到了一种方式：

例如，针对载体Web而言，载体Web的技术栈支持图形库Echarts，在载体Web承载的页面上支持使用图形库Echarts获取用于在页面上渲染的SVG格式的图形数据以及支持使用图形库Echarts在页面上渲染SVG格式的图形数据，如此，在开发载体Web承载的页面时，开发人员在载体Web承载的页面的计算机程序代码中，可以编写用于使用图形库Echarts获取用于在页面上渲染的SVG格式的图形数据的获取指令以及用于使用图形库Echarts在页面上渲染SVG格式的图形数据的渲染指令，在载体Web承载的页面的计算机程序代码开发完毕之后，可以将载体Web承载的页面的计算机程序代码打包，得到Web页面，如此，Web页面可以在载体Web上承载，例如，用户可以在载体Web上查看Web页面中的包括2D/3D图形的图表。

另外，在开发载体原生应用程序承载的页面时，可以在载体原生应用程序承载的页面的计算机程序代码中载入Web控件，并在Web控件中记录为载体Web开发的Web页面的URL(Uniform Resource Locator，统一资源定位符)，以完成对载体原生应用程序承载的页面的开发。

如此，在载体原生应用程序需要显示页面时，直接基于Web控件中的Web页面的URL获取Web页面，并基于Web控件显示Web页面，Web页面具有包括2D/3D图形的图表，如此，可以实现在载体原生应用程序上基于Web页面中的包括2D/3D图形的图表对外提供服务。

可见，在上述复用的方式中，通过在载体原生应用程序中复用为载体Web开发的Web页面，使得开发人员针对载体原生应用程序承载的页面可以不手动编写页面的全部的计算机程序代码，从而可以降低开发人员的开发工作量，降低人工成本。

然而，在采用上述复用的方式之后，发明人又发现了：在载体原生应用程序上基于Web控件显示的Web页面中的包括2D/3D图形的图表针对载体原生应用程序的很多预期功能无法正常使用以及针对载体原生应用程序的很多预期效果无法实现，这样会影响广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

发明人又对“在载体原生应用程序上基于Web控件显示的Web页面中的包括2D/3D图形的图表针对载体原生应用程序的很多预期功能无法正常使用以及针对载体原生应用程序的很多预期效果无法实现”的原因进行了分析，并发现：

在对不同的载体针对性地单独开发页面的计算机程序代码以实现单独开发不同的载体分别承载的包括2D/3D图形的图表的页面的情况下，不同的载体分别承载的包括2D/3D图形的图表的页面中的包括2D/3D图形的图表针对各个载体各自的预期功能基本均能够正常使用以及针对各个载体各自的预期效果往往能够实现。

例如，为载体Web单独开发的载体Web承载的包括2D/3D图形的图表的页面中的包括2D/3D图形的图表针对载体Web的预期功能基本能够正常使用且预期效果基本能够实现，以及，为载体原生应用程序单独开发的载体原生应用程序承载的包括2D/3D图形的图表的页面中的包括2D/3D图形的图表针对载体原生应用程序的预期功能基本也均能够正常使用且预期效果基本能够实现。

因此，发明人初步认为：“在载体原生应用程序上基于Web控件显示的Web页面中的包括2D/3D图形的图表针对载体原生应用程序的很多预期功能无法正常使用以及针对载体原生应用程序的很多预期效果无法实现”可能并不是由载体原生应用程序本身引起的，而往往是为载体Web开发的Web页面不适于在载体原生应用程序上承载而引起的，例如，虽然在载体原生应用程序上基于Web控件能够显示Web页面中的包括2D/3D图形的图表，但是由于显示的是针对Web载体开发的Web页面，且是在原生应用程序上基于Web控件显示的Web页面，如此，在载体原生应用程序上基于Web控件显示Web页面往往受制于载体Web的技术栈支持的功能和预期效果。

但是，各个载体的技术栈不同，针对不同载体分别对应的包括2D/3D图形的图表的预期功能是不同的。例如，载体Web的技术栈支持的功能没有载体原生应用程序的技术栈支持的功能强大，如此，往往是对载体Web承载的页面中的包括2D/3D图形的图表的预期功能少于或低于对载体原生应用程序承载的页面中的包括2D/3D图形的图表的预期功能，以及，对载体Web承载的页面中的包括2D/3D图形的图表的预期效果低于对载体原生应用程序承载的页面中的包括2D/3D图形的图表的预期效果。

如此可见，载体Web的技术栈支持的功能和效果没有载体原生应用程序的技术栈支持的功能和效果强大，然而，发明人经过统计发现，使用载体原生应用程序查看页面的用户量往往很多，且多于使用载体Web查看页面的用户量，如此，为了增加更多用户对服务厂商的粘性，以尽可能地避免用户流失，开发人员往往对载体原生应用程序承载的页面中的包括2D/3D图形的图表的功能和显示效果的期望较高，且高于开发人员对载体Web承载的页面中的包括2D/3D图形的图表的功能和显示效果的期望。

综上，往往是因为为载体Web开发的Web页面中的包括2D/3D图形的图表的功能和显示效果无法达到为载体原生应用程序开发的页面中的包括2D/3D图形的图表的功能和显示效果的期望(包括全面性或多样性等)，从而导致在载体原生应用程序上基于Web控件显示的Web页面中的包括2D/3D图形的图表针对载体原生应用程序的很多预期功能无法正常使用以及针对载体原生应用程序的很多预期效果无法实现。

鉴于此，提出了“降低开发人员的开发工作量以及尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能能够正常使用且很多预期效果能够实现”的需求。

为了实现“降低开发人员的开发工作量以及尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能能够正常使用且很多预期效果能够实现”的目的，发明人想到了又一种方式：

例如，针对载体Web编写一套页面的计算机程序代码，例如，一套页面的计算机程序代码中至少包括用于使用图形库Echarts获取用于在页面上渲染的SVG格式的图形数据的获取指令以及用于使用图形库Echarts在页面上渲染SVG格式的图形数据的渲染指令等，将这一套页面的计算机程序代码打包，可以得到载体Web能够承载的页面(页面中具有包括2D/3D图形的图表)。

另外，对于载体原生应用程序而言，如果需要得到载体原生应用程序承载的页面，则可以将为载体Web编写的这一套页面的计算机程序代码自动转换为支持载体原生应用程序的技术栈的页面的计算机程序代码。

例如，载体原生应用程序支持使用Skia图形库渲染SVG格式的图形数据，使用Echarts图形库可以获取SVG格式的图形数据，如此，转换得到的代码中可以包括用于使用Echarts图形库获取用于在页面上渲染的SVG格式的图形数据的获取指令，用于使用Echarts图形库将SVG格式的图形数据传递至Skia图形库的指令，以及，用于使用Skia图形库在页面上渲染SVG图形数据的指令等，然后将转换得到的代码打包，得到载体原生应用程序承载的页面。

通过上述又一种方式，一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到Echarts图形库的相关功能，例如，可以使用Echarts图形库获取用于在页面上渲染的SVG格式的图形数据，将SVG格式的图形数据传递至Skia图形库，以及，使用Skia图形库在页面上渲染SVG格式的图形数据，如此，不仅能够实现渲染SVG格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的SVG格式的图形数据是使用Echarts图形库获取的，使得在载体原生应用程序承载的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序承载的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

在介绍本申请的方案之前，先对本申请涉及的一些术语进行解释。

图形：线条、端点、矩形、圆形以及文字等独立的基础元素。

图表：由多个图形组合而成，如柱状图以及折线图等，可以用视觉图像来体现数据变化或对比。

SVG：Scalable Vector Graphics，一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作。

Skia：一个开源的2D图形库，用于绘制文本、几何图形和图像，它提供了可跨各种硬件和软件平台工作的通用API，支持使用SVG格式的数据渲染图像。

ECharts：一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，支持SVG的渲染模式。

Touch Event：触摸事件，一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

Taro：一个开放式跨端跨框架解决方案，支持使用前端脚本语法来开发Web、小程序以及原生应用程序等，实现一套代码多端运行。

WebView:是一种控件，用于在原生应用程序中渲染Web页面。

具体地，参照图1，示出了本申请的一种数据处理方法的流程示意图，该方法应用于电子设备。电子设备中部署有开发环境(包括Taro等)，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令。

原生应用程序支持使用第二图形库渲染图形的图形数据。原生应用程序不支持使用第一图形库渲染图形的图形数据。使用第二图形库能够渲染目标格式的图形数据。使用第一图形库能够生成目标格式的图形数据。可见，原生应用与第一图形库之间的交叉点在于目标格式的图形数据。

例如，原生应用程序、第二图形库以及目标格式的图形数据之间是关联的，而第一图形库与目标格式的图形数据之间是关联的。如此，原生应用程序、第二图形库、目标格式的图形数据以及第一图形库之间的关联的。

这样，对于原生应用程序而言，就可以使用到第一图形库的功能等。

在一个例子中，第一图形库可以包括Echarts图形库或其它图形库，目标格式包括SVG格式或其它图形数据格式，第二图形库可以包括Skia图形库或其它图形库。

原生应用程序支持使用Skia图形库渲染图形的图形数据。原生应用程序不支持使用Echarts图形库渲染图形的图形数据。基于Skia图形库能够渲染SVG格式的图形数据。使用Echarts能够生成SVG格式的图形数据。可见，原生应用与Echarts图形库之间的交叉点在于SVG格式的图形数据。

例如，原生应用程序、Skia图形库以及SVG格式的图形数据之间是关联的，而Echarts图形库与SVG格式的图形数据之间是关联的。如此，原生应用程序、Skia图形库、SVG格式的图形数据以及Echarts图形库之间的关联的。

这样，对于原生应用程序而言，就可以使用到Echarts图形库的功能等。

其中，该方法包括：

在步骤S101中，获取对工程项目中的页面的第一计算机程序代码的打包请求，打包请求携带原生应用程序的标识，打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面。

原生应用程序作为一个载体，其具有承载页面的能力。

在本申请中，在开发人员需要在工程项目中开发页面且页面中需要具有包括2D/3D图形的图表的情况下，在编写页面的计算机程序代码的阶段，开发人员可以在工程项目中编写使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令，开发人员编写的页面的计算机程序代码可以看作页面的第一计算机程序代码。

在实际情况中，开发人员往往需要页面承载在至少一个载体上，也即，使得用户可以基于至少一个载体来查看页面。

其中，不同的载体在渲染图形的图形数据时所能支持使用的图形库不同。例如，载体Web在渲染图形数据时所能支持使用的图形库包括Echarts，而载体原生应用程序在渲染图形数据时所能支持使用的图形库不包括Echarts。

如此，在一个实施例中，页面的第一计算机程序代码包括为载体Web开发的页面的计算机程序代码，若需要得到Web承载的页面，则可以将页面的第一计算机程序代码直接打包，得到载体Web承载的页面。

如果需要得到载体原生应用程序的页面，则由于载体原生应用程序不支持使用第一图形库渲染图形的图形数据，则直接将页面的第一计算机程序代码直接打包，是得不到载体原生应用程序的页面的。

如此，为了能够得到载体原生应用程序的页面，在开发完毕页面的第一计算机程序代码的情况下，开发人员可以输入对工程项目中的页面的第一计算机程序代码的打包请求。且打包请求携带原生应用程序的标识，打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面。

例如，开发人员可以控制电子设备在开发环境中显示载体原生应用程序的标识。开发人员可以选择显示的载体原生应用程序的标识，电子设备可以获取开发人员选择的载体原生应用程序的标识。然后开发人员可以在电子设备中的开发环境中输入对工程项目中的页面的第一计算机程序代码的打包请求(携带选择的载体原生应用程序的标识)，电子设备可以获取对工程项目中的页面的第一计算机程序代码的打包请求，然后执行步骤S102。

在步骤S102中，根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据。

传递指令是编写的计算机程序代码，传递指令中可以调用了传递函数的API，传递函数可以参见之后的描述，在此不做详述。

在本申请中，事先在开发环境中可以设置中间件，中间件可以包括SDK(SoftwareDevelopment Kit，软件开发工具包)等，中间件至少能够起到的一个作用包括：充当“原生应用程序”与“Echarts图形库”之间的桥梁。

在本申请中，在开发页面的场景中，对于服务厂商需要的能够承载页面的载体原生应用程序而言，事先可以确定原生应用程序在渲染图形数据时所支持使用的第二图形库，并编写用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令，以及，确定基于第二图形库支持渲染目标格式的图形数据以及确定基于第一图形库能够生成目标格式的图形数据，如此，可以编写将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令。

然后将传递指令以及第二渲染指令设置在中间件中。

如此，在获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令时，可以获取事先在中间件中设置的用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令。

在步骤S103中，使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码。

在步骤S104中，对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

例如，对原生应用程序的页面的第二计算机程序代码编译，得到原生应用程序的页面。

另外，电子设备还可以存储原生应用程序的页面的第二计算机程序代码，以使得后续若开发人员根据实际需求需要对原生应用程序的页面优化，则可以直接调用存储的原生应用程序的页面的第二计算机程序代码，并在原生应用程序的页面的第二计算机程序代码的基础上优化。

原生应用程序的页面的第二计算机程序代码中的指令包括：用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令，而不是适用于载体Web的用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令，由于是需要对原生应用程序的页面优化，则对于开发人员而言，页面的第二计算机程序代码中的内容更加直观，便于开发人员理解，有助于提高对原生应用程序的页面优化的效率以及准确性等。

在本申请中，中间件可以集成在开发环境中。如此，使得开发环境不仅具有根据一套页面的计算机程序代码打包得到载体Web承载页面的能力，还具有根据这一套页面的计算机程序代码打包得到载体原生应用程序承载页面的能力，使得开发环境具有跨端开发的能力，便于开发人员开发跨端的页面。

在本申请中，获取对工程项目中原生应用程序的页面的第一计算机程序代码的打包请求，打包请求携带原生应用程序的标识，打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面。根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据。使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码。对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

如此，支持在需要在原生应用程序的页面中渲染包括2D/3D的图形的图表的情况下，可以使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。其中，目标格式的图形数据可以包括2D/3D的图形的图表。

一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即第一计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码即第二计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到第一图形库例如Echarts图形库的相关功能，例如，可以使用第一图形库获取用于在页面上渲染的目标格式例如SVG格式的图形数据，将目标格式的图形数据传递至第二图形库例如Skia图形库，以及，使用第二图形库在页面上渲染目标格式的图形数据，如此，不仅能够实现渲染目标格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的目标格式的图形数据是使用第一图形库获取的，使得在载体原生应用程序的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

在开发人员最终编译得到原生应用程序之后，原生应用程序中就具有这个页面(页面中具有包括2D/3D的图形的图表)，在用户使用原生应用程序访问页面的情况下，应用程序可以通过图2的方式在原生应用程序的页面中渲染包括2D/3D的图形的图表。

例如，具体地，参照图2，示出了本申请的一种数据处理方法的流程示意图，该方法应用于电子设备。电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库。

其中，该方法包括：

在步骤S201中，使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。

在一个实施例中，第一图形库可以包括Echarts图形库或其它图形库，目标格式可以包括SVG格式或其它图形数据格式，第二图形库可以包括Skia图形库等或其它图形库。

在本申请一个实施例中，在启动原生应用程序之后跳转至这个页面或者从其他页面中跳转至这个页面的场景下，需要获取用于在原生应用程序的这个页面上渲染的目标格式的图形数据，并渲染目标格式的图形数据，以实现在这个页面中渲染包括2D/3D图形的图表等。

在这种场景中，在原生应用程序进入这个页面的情况下，会根据这个页面URL从云端中获取这个页面的页面数据，由于在这个页面上需要渲染包括2D/3D图形的图表，如此，页面数据中具有包括2D/3D图形的图表的相关数据，原生应用程序可以调用第一图形库，并使用第一图形库根据页面数据中的包括2D/3D图形的图表的相关数据计算出用于在原生应用程序的这个页面上渲染的目标格式的图形数据。

或者，在另一个实施例中，原生应用程序已经渲染了页面，页面中具有包括2D/3D图形的图表，用户可以查看页面中的包括2D/3D图形的图表，且可以控制页面中的包括2D/3D图形的图表，例如，移动图表的位置、放大图表、缩小图表、将操作体停留在图表的位置以及图表显示更多的信息等等。这时候原生应用程序就需要根据用户的操控至少针对包括2D/3D图形的图表重新渲染。

为此，在本申请中，原生应用程序可以监听操作体(包括用户的手指或者电容笔等)对在原生应用程序的页面上当前显示的图表的操控信息(操控信息可以是触摸事件(例如TouchEvent事件等)触发的操控信息等，操控信息中包括操控方式信息以及操控位置信息等)；然后将得到的操控信息转换为第一图形库支持的格式的操控信息。

在本申请中，第一图形库可以用于在载体Web承载的Web页面上渲染包括2D/3D图形的图表，第二图形库可以用于在载体原生应用程序的页面上渲染包括2D/3D图形的图表。

载体Web承载的Web页面支持的交互方式与载体原生应用程序支持交互方式不同。

第一图形库支持处理的操控信息的格式与第二图形库支持处理的操控信息的格式不同。

原生应用程序获取到的操控信息的格式往往是与第二图形库支持处理的操控信息的格式匹配的，但却不是与第一图形库支持处理的操控信息的格式匹配的，如此，为了使得原生应用程序能够使用第二图形库根据操控信息在页面上渲染新的包括2D/3D图形的图表，需要将监听到的操作体对在原生应用程序的页面上当前显示的图表的操控信息转换为第一图形库支持的格式的操控信息。

例如，Echarts图形库可以用于在载体Web承载的Web页面上渲染包括2D/3D图形的图表，Skia图形库用于可以在载体原生应用程序的页面上渲染包括2D/3D图形的图表。

载体Web承载的Web页面支持的交互方式与载体原生应用程序支持交互方式不同。

Echarts图形库支持处理的操控信息的格式与Skia图形库支持处理的操控信息的格式不同。

原生应用程序获取到的操控信息的格式往往是与Skia图形库支持处理的操控信息的格式匹配的，但却不是与Echarts图形库支持处理的操控信息的格式匹配的，如此，为了使得原生应用程序能够使用Skia图形库根据操控信息在页面上渲染新的包括2D/3D图形的图表，需要将监听到的操作体对在原生应用程序的页面上当前显示的图表的操控信息转换为Echarts图形库支持的格式的操控信息。

然后可以使用第一图形库根据当前显示的图表以及第一图形库支持的格式的操控信息计算用于在原生应用程序的页面上渲染的目标格式的图形数据。

在步骤S202中，将目标格式的图形数据传递至原生应用程序中的第二图形库。

在步骤S203中，使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

以实现在原生应用程序的页面上渲染包括2D/3D图形的图表，以供用户查看等。

在一个实施例中，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；如此，在使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据时，可以基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

另外，第一图形库中具有API，API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；在一个实施例中，该API可以位于自定义渲染类中。如此，在将目标格式的图形数据传递至原生应用程序中的第二图形库时，可以基于第一图形库中的API调用第二自定义渲染组件中的传递函数，并基于传递函数通过关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

在一个实施例中，原生渲染组件可以包括SVGRenderer等。原生渲染类中可以包括SVGRenderer中的SVGPainter。传递函数可以包括PatchString等。

在本申请中，在需要在原生应用程序的页面中渲染包括2D/3D的图形的图表的情况下，可以使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即第一计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码即第二计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到第一图形库例如Echarts图形库的相关功能，例如，可以使用第一图形库获取用于在页面上渲染的目标格式例如SVG格式的图形数据，将目标格式的图形数据传递至第二图形库例如Skia图形库，以及，使用第二图形库在页面上渲染目标格式的图形数据，如此，不仅能够实现渲染目标格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的目标格式的图形数据是使用第一图形库获取的，使得在载体原生应用程序的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域开发人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域开发人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作并不一定是本申请所必须的。

参照图3，示出了本申请的一种数据处理装置的结构框图，应用于电子设备中，电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库，原生应用程序支持使用第二图形库渲染图形的图形数据，原生应用程序不支持使用第一图形库渲染图形的图形数据，所述装置包括：

第一获取模块11，用于使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染；

传递模块12，用于将目标格式的图形数据传递至原生应用程序中的第二图形库；

渲染模块13，用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

在一个可选的实现方式中，第一图形库包括Echarts图形库，目标格式包括SVG格式，第二图形库包括Skia图形库等。

在一个可选的实现方式中，所述第一获取模块包括：

监听单元，用于监听操作体对在原生应用程序的页面上当前显示的图表的操控信息；

转换单元，用于将所述操控信息转换为第一图形库支持的格式的操控信息；

计算单元，用于使用第一图形库对当前显示的图表以及第一图形库支持的格式的操控信息进行计算，得到用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；

所述第一获取模块包括：

获取单元，用于基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

在一个可选的实现方式中，第一图形库中具有API，所述API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；

所述传递模块包括：

调用单元，用于基于第一图形库中的所述API调用第二自定义渲染组件中的所述传递函数，传递单元，用于基于所述传递函数通过所述关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

在本申请中，在需要在原生应用程序的页面中渲染包括2D/3D的图形的图表的情况下，可以使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。其中，目标格式的图形数据可以包括2D/3D的图形的图表。

一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即第一计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码即第二计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到第一图形库例如Echarts图形库的相关功能，例如，可以使用第一图形库获取用于在页面上渲染的目标格式例如SVG格式的图形数据，将目标格式的图形数据传递至第二图形库例如Skia图形库，以及，使用第二图形库在页面上渲染目标格式的图形数据，如此，不仅能够实现渲染目标格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的目标格式的图形数据是使用第一图形库获取的，使得在载体原生应用程序的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

参照图4，示出了本申请的一种数据处理装置的结构框图，应用于电子设备，电子设备中部署有开发环境，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括用于使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令；

所述装置包括：

第二获取模块21，用于获取对工程项目中的原生应用程序的页面的第一计算机程序代码的打包请求，所述打包请求携带原生应用程序的标识，所述打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面；

第三获取模块22，用于根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据；

替换模块23，用于使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码；

打包模块24，用于对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

在一个可选的实现方式中，所述装置还包括：

存储模块，用于存储原生应用程序的页面的第二计算机程序代码。

在本申请中，获取对工程项目中原生应用程序的页面的第一计算机程序代码的打包请求，打包请求携带原生应用程序的标识，打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面。根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据。使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码。对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

如此，支持在需要在原生应用程序的页面中渲染包括2D/3D的图形的图表的情况下，可以使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染。将目标格式的图形数据传递至原生应用程序中的第二图形库。使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。其中，目标格式的图形数据可以包括2D/3D的图形的图表。

一方面，可以实现一套代码的复用，例如，一套代码在载体Web以及载体原生应用程序中复用，例如，实现“一次开发，多端使用”的效果，支持开发人员可以仅开发一套页面的计算机程序代码即第一计算机程序代码即可，从而可以降低开发人员的开发工作量，降低人工成本。

另一方面，转换得到的页面的计算机程序代码即第二计算机程序代码能够支持载体原生应用程序的技术栈以及能够使用到第一图形库例如Echarts图形库的相关功能，例如，可以使用第一图形库获取用于在页面上渲染的目标格式例如SVG格式的图形数据，将目标格式的图形数据传递至第二图形库例如Skia图形库，以及，使用第二图形库在页面上渲染目标格式的图形数据，如此，不仅能够实现渲染目标格式的图形数据以达到在页面中绘制包括2D/3D图形的图表的目的，且由于渲染的目标格式的图形数据是使用第一图形库获取的，使得在载体原生应用程序的页面中的包括2D/3D图形的图表的外观样式与在载体Web承载的Web页面中的包括2D/3D图形的图表的外观样式相同，避免出现用户在载体Web承载的Web页面以及原生应用程序的页面分别看到的包括2D/3D图形的图表的外观样式不同的情况，进而避免降低用户体验。

其次，在载体原生应用程序上显示的页面中的包括2D/3D图形的图表不受制于比载体原生应用程序的技术栈更低级的技术栈(例如载体Web的技术栈)的制约，可以尽可能地保障在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的很多预期功能(例如更多方式的交互功能等)能够正常使用以及很多预期效果(例如载体原生应用程序的技术栈支持更快地渲染速度且快于载体Web的技术栈支持的渲染速度，如此，可以达到提高渲染速度的效果等)能够实现，提高广大用户对在载体原生应用程序上显示的页面中的包括2D/3D图形的图表的使用体验。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

可选的，本申请实施例还提供了一种电子设备，包括：处理器，存储器，存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等。

图5是本申请示出的一种电子设备800的框图。例如，电子设备800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图5，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图像，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件806为电子设备800的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收到的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播操作信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由电子设备800的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图6是本申请示出的一种电子设备1900的框图。例如，电子设备1900可以被提供为一服务器。

参照图6，电子设备1900包括处理组件1922，其进一步包括一个或多个处理器，以及由存储器1932所代表的存储器资源，用于存储可由处理组件1922的执行的指令，例如应用程序。存储器1932中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件1922被配置为执行指令，以执行上述方法。

电子设备1900还可以包括一个电源组件1926被配置为执行电子设备1900的电源管理，一个有线或无线网络接口1950被配置为将电子设备1900连接到网络，和一个输入输出(I/O)接口1958。电子设备1900可以操作基于存储在存储器1932的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

本领域普通技术人员可以意识到，结合本申请实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims (14)

1.一种数据处理方法，其特征在于，应用于电子设备中，电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库，原生应用程序支持使用第二图形库渲染图形的图形数据，原生应用程序不支持使用第一图形库渲染图形的图形数据，所述方法包括：

使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染；

将目标格式的图形数据传递至原生应用程序中的第二图形库；

使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

2.根据权利要求1所述的方法，其特征在于，所述使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据，包括：

监听操作体对在原生应用程序的页面上当前显示的图表的操控信息；

将所述操控信息转换为第一图形库支持的格式的操控信息；

使用第一图形库对当前显示的图表以及第一图形库支持的格式的操控信息进行计算，得到用于在原生应用程序的页面上渲染的目标格式的图形数据。

3.根据权利要求1所述的方法，其特征在于，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；

所述使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据，包括：

基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

4.根据权利要求1或3所述的方法，其特征在于，第一图形库中具有API，所述API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；

所述将目标格式的图形数据传递至原生应用程序中的第二图形库，包括：

基于第一图形库中的所述API调用第二自定义渲染组件中的所述传递函数，并基于所述传递函数通过所述关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

5.一种数据处理方法，其特征在于，应用于电子设备，电子设备中部署有开发环境，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括用于使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令；

所述方法包括：

获取对工程项目中的原生应用程序的页面的第一计算机程序代码的打包请求，所述打包请求携带原生应用程序的标识，所述打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面；

根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据；

使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码；

对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

存储原生应用程序的页面的第二计算机程序代码。

7.一种数据处理装置，其特征在于，应用于电子设备中，电子设备上运行有原生应用程序，原生应用程序中具有第一图形库以及第二图形库，原生应用程序支持使用第二图形库渲染图形的图形数据，原生应用程序不支持使用第一图形库渲染图形的图形数据，所述装置包括：

第一获取模块，用于使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据；目标格式的图形数据能够被第二图形库渲染；

传递模块，用于将目标格式的图形数据传递至原生应用程序中的第二图形库；

渲染模块，用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据。

8.根据权利要求7所述的装置，其特征在于，所述第一获取模块包括：

监听单元，用于监听操作体对在原生应用程序的页面上当前显示的图表的操控信息；

转换单元，用于将所述操控信息转换为第一图形库支持的格式的操控信息；

计算单元，用于使用第一图形库对当前显示的图表以及第一图形库支持的格式的操控信息进行计算，得到用于在原生应用程序的页面上渲染的目标格式的图形数据。

9.根据权利要求7所述的装置，其特征在于，原生应用程序中包括第一自定义渲染组件，第一自定义渲染组件是对第一图形库中的原生渲染组件重写后得到的，第一自定义渲染组件中包括对第一图形库中的原生渲染组件中的原生渲染类重写后的自定义渲染类；

所述第一获取模块包括：

获取单元，用于基于第一自定义渲染组件中的自定义渲染类使用原生应用程序中的第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据。

10.根据权利要求7或9所述的装置，其特征在于，第一图形库中具有API，所述API包括原生应用程序中的第二自定义渲染组件中的传递函数的API，第二自定义渲染组件是对第二图形库重写后得到的，第二自定义渲染组件中包括传递函数以及第二图形库，且传递函数与第二图形库之间具有关联关系；

所述传递模块包括：

调用单元，用于基于第一图形库中的所述API调用第二自定义渲染组件中的所述传递函数，传递单元，用于基于所述传递函数通过所述关联关系将目标格式的图形数据传递至第二自定义渲染组件中的第二图形库。

11.一种数据处理装置，其特征在于，应用于电子设备，电子设备中部署有开发环境，开发环境中创建有原生应用程序的工程项目，工程项目中包括第一图形库、第二图形库以及原生应用程序的页面的第一计算机程序代码，第一计算机程序代码中至少包括用于使用第一图形库获取用于在原生应用程序的页面上渲染的目标格式的图形数据的获取指令以及用于使用第一图形库在原生应用程序的页面上渲染目标格式的图形数据的第一渲染指令；

所述装置包括：

第二获取模块，用于获取对工程项目中的原生应用程序的页面的第一计算机程序代码的打包请求，所述打包请求携带原生应用程序的标识，所述打包请求用于指示根据原生应用程序的标识以及第一计算机程序代码生成原生应用程序的页面；

第三获取模块，用于根据原生应用程序的标识，获取用于将目标格式的图形数据传递至原生应用程序中的第二图形库的传递指令以及用于使用原生应用程序中的第二图形库在原生应用程序的页面上渲染目标格式的图形数据的第二渲染指令；第二图形库能够被原生应用程序调用以渲染目标格式的图形数据；

替换模块，用于使用传递指令以及第二渲染指令替换第一计算机程序代码中的第一渲染指令，得到原生应用程序的页面的第二计算机程序代码；

打包模块，用于对原生应用程序的页面的第二计算机程序代码打包，得到原生应用程序的页面。

12.根据权利要求11所述的装置，其特征在于，所述装置还包括：

存储模块，用于存储原生应用程序的页面的第二计算机程序代码。

13.一种电子设备，其特征在于，包括：处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至6中任一项所述的方法。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6中任一项所述的方法。

Images