数据处理方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种数据处理方法、装置、计算机设备和存储介质。

背景技术

随着技术的发展，数据越来越丰富，数据统计和展示的功能也越来越被需要。

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

在网页开发中，传统的图表处理方法通常采用HTML(HyperText MarkupLanguage，超文本标记语言)中的标签实现静态展示效果，然而这种方法应用在稍微复杂的图表中时，若需将不同数据做个性化显示，需要使用大量HTML标签和显示样式来实现，实现过程复杂。

发明内容

基于此，有必要针对上述技术问题，提供一种能够简化以图表显示数据的实现过程的数据处理方法、装置、计算机设备和存储介质。

一种数据处理方法，所述方法包括：

响应于数据查询指令，向服务器发送数据查询请求；其中，所述数据查询请求包含待查询的目标时间段；

接收所述服务器反馈的查询数据和图表属性数据；所述查询数据为所述服务器从预设数据库中获取所述目标时间段内对应的数据，所述图表属性数据为所述服务器根据预设图表类型确定所述查询数据对应的数据；其中，所述图表属性数据包括：根据所述查询数据确定的横轴关键字、根据所述查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置；

基于所述图表属性数据和所述查询数据进行渲染，得到展示所述查询数据的数据图表。

在其中的一个实施例中，所述查询数据包括所述目标时间段内上线的游戏项目、各所述游戏项目所属的公司名称、各所述游戏项目对应的年度收入、各所述游戏项目的上线时间；所述纵轴关键字包括各公司名称；所述横轴关键字包括各上线时间。

一种数据处理方法，所述方法包括：

接收前端发送的数据查询请求；所述数据查询请求为所述前端响应于数据查询指令时发送，所述数据查询请求包含待查询的目标时间段；

根据所述数据查询请求在预设数据库中获取所述目标时间段内的查询数据；

根据预设图表类型确定所述查询数据对应的图表属性数据；其中，所述图表属性数据包括：根据所述查询数据确定的横轴关键字、根据所述查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置；

基于所述查询数据和图表属性数据向所述前端发送查询反馈结果；所述查询反馈结果用于使前端基于所述图表属性数据和查询数据进行渲染，得到展示所述查询数据的数据图表。

一种数据处理装置，所述装置包括：

查询请求发送模块，用于响应于数据查询指令，向服务器发送数据查询请求；其中，所述数据查询请求包含待查询的目标时间段；

接收模块，用于接收所述服务器反馈的查询数据和图表属性数据；所述查询数据为所述服务器从预设数据库中获取所述目标时间段内对应的数据，所述图表属性数据为所述服务器根据预设图表类型确定所述查询数据对应的数据；其中，所述图表属性数据包括：根据所述查询数据确定的横轴关键字、根据所述查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置；

渲染模块，用于基于所述图表属性数据和所述查询数据进行渲染，得到展示所述查询数据的数据图表。

一种数据处理装置，所述装置包括：

请求接收模块，用于接收前端发送的数据查询请求；所述数据查询请求为所述前端响应于数据查询指令时发送，所述数据查询请求包含待查询的目标时间段；

数据获取模块，用于根据所述数据查询请求在预设数据库中获取所述目标时间段内的查询数据；

属性确定模块，用于根据预设图表类型确定所述查询数据对应的图表属性数据；其中，所述图表属性数据包括：根据所述查询数据确定的横轴关键字、根据所述查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置；

反馈模块，用于基于所述查询数据和图表属性数据向所述前端发送查询反馈结果；所述查询反馈结果用于使所述前端基于所述图表属性数据和查询数据进行渲染，得到展示所述查询数据的数据图表。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述数据处理方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述数据处理方法的步骤。

上述数据处理方法、装置、计算机设备和存储介质，前端响应于用户发送的数据查询指令，向服务器发送携带待查询的目标时间段的数据查询请求，服务器接收到数据查询请求之后，从预设数据库中查找并获取目标时间段内的查询数据，并根据预设图表类型确定查询数据对应的图表属性数据；然后将图表属性数据和查询数据反馈给前端；前端接收到服务器的反馈结果后，根据其中的图表属性数据和查询数据进行渲染，从而得到展示查询数据的数据图表。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。上述方法最终以预设图表类型展示查询数据，其中，通过预设图表类型显示查询数据所需要的属性数据为服务器针对查询数据确定并反馈给前端，因此避免了使用大量HTML标签，大大简化了开发的工作量。

附图说明

图1为一个实施例中数据处理方法的应用环境图；

图2为一个实施例中数据处理方法的流程示意图；

图3为另一个实施例中数据处理方法的流程示意图；

图4为一个具体实施例中的展示查询数据的数据图表的示意图；

图5为一个具体实施例中检测到鼠标悬停操作时，显示对应的第一待显示数据的示意图；

图6为一个具体实施例中检测到鼠标点击事件触发时，显示对应的第二待显示数据的示意图；

图7为另一个实施例中数据处理方法的流程示意图；

图8为一个具体实施例中显示表示等级的等级图形的示意图；

图9为一个实施例中图表属性数据的确定过程的流程示意图；

图10为另一个实施例中数据处理方法的流程示意图；

图11为另一个实施例中数据处理方法的流程示意图；

图12为一个具体实施例中数据处理方法的时序示意图；

图13为一个实施例中在展示的数据图表中包含的静态显示效果以及动态交互事件及其对应实现方式；

图14为一个实施例中数据处理装置的结构框图；

图15为另一个实施例中数据处理装置的结构框图；

图16为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的数据处理方法，可以应用于如图1所示的应用环境中。其中，前端设备102通过网络与服务器104进行通信。前端设备102响应于用户发送的数据查询指令，向服务器104发送数据查询请求，其中数据查询指令包括待查询的目标时间段；前端设备102接收服务器104反馈的查询数据和图表属性数据，然后基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表。其中，查询数据为服务器104基于数据查询请求从预设数据库中查询并获取目标时间段对应的数据，图表属性数据为服务器104在获取到查询数据后，根据预设图表类型确定的查询数据对应的图表属性。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。本申请提供的数据处理方法可应用于上述应用环境中的终端102或者服务器104。

其中，前端即网站前台部分，运行在PC(个人计算机)端，移动端等浏览器上展现给用户浏览的网页。前端设备102表示PC端，可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种数据处理方法，以该方法应用于图1中的前端设备为例进行说明，包括步骤S210至步骤S230。

步骤S210，响应于数据查询指令，向服务器发送数据查询请求；其中，数据查询请求包含待查询的目标时间段。

其中，数据查询指令为用户在希望查询数据时通过前端设备发送，例如可以是用户在显示界面点击数据查询按钮，即视为用户发送了数据查询指令。

在一个实施例中，数据查询指令中携带待查询的数据的数据类型，例如需要查询的是企业数据、项目数据、产品数据或者其他数据。在另一个实施例中，待查询的数据为历史数据，数据查询指令携带待查询的数据对应的时间段，例如需要查询过去一年内的数据；在其它实施例中，数据查询指令还可以携带其它信息。进一步地，在其中的一个实施例中，可以在显示界面展示时间段录入的控件，当用户在该控件输入目标时间段并点击数据查询按钮时判定检测到数据查询指令；或者，也可以仅在显示界面展示数据查询按钮，在检测到对数据查询按钮的点击操作时判定检测到数据查询指令，响应于该数据查询指令在显示界面展示时间段录入的控件，并在该控件接收到用户输入的待查询的目标时间段之后，向服务器发送数据查询请求。可以理解地，在其它实施例中，也可以通过其它方式实现响应于数据查询指令向服务器发送数据查询请求。

进一步地，在一个实施例中，服务器在接收到数据查询请求之后，对其进行解析得到待查询的目标时间段。在一个具体实施例中，服务器基于egg.js(一种开源的企业级Node.js框架)搭建。

步骤S220，接收服务器反馈的查询数据和图表属性数据；查询数据为服务器从预设数据库中获取目标时间段内对应的数据，图表属性数据为服务器根据预设图表类型确查询数据对应的数据。

其中，预设数据库用于存储某种类型的数据；在一个具体实施例中，上述数据处理方法应用于提供给用户查询与游戏项目相关的信息，预设数据库用于存储于游戏项目相关的信息，包括游戏项目所属公司，游戏项目上线时间、游戏项目对应的收入信息等等；在本实施例中，查询数据包括目标时间段内上线的游戏项目、各游戏项目所属的公司名称、各游戏项目对应的年度收入、各游戏项目的上线时间。在一个具体实施例中，数据库基于mongodb搭建。

预设图表类型是指前端设备显示查询数据所使用的图表类型，为预先根据实际情况设定；在一个实施例中，预设图表类型可根据前端的搭建框架确定；在一个具体实施例中，前端可以基于vue的element-ui(一款基于Vue.js 2.0的桌面端UI框架)框架搭建，预设图表类型为echarts(enterprise charts,商业级数据图表，一个纯JavaScript的图表库图表插件；在另一个具体实施例中，基于react的antd(一个组件库)框架搭建，预设图表类型为bizcharts(是一个基于G2封装的React图表库)图表插件。进一步地，在一个实施例中可以由前端设备将预设图表类型与数据查询请求一同发送给服务器，在其它实施例中也可以由前端设备预先将预设图表类型发送至服务器。

在一个实施例中，根据预设图表类型即可确定以预设图表类型显示数据所需要的属性数据，在本实施例中，服务器在获取到查询数据之后，根据预设图表类型和查询数据确定以预设图表类型显示查询数据所对应需要的图表属性数据。

进一步地，在一个实施例中，前端接收到服务器的反馈还包括各查询数据对应的等级。在本实施例中，服务器在预设数据库中获取目标时间段内的查询数据之后，还包括步骤：按照预设等级对查询数据进行等级划分，将查询数据归类到对应的等级。以将上述方法应用于提供给用户查询游戏项目相关信息为例，预设等级可以是收入等级，例如年度收入等级或者季度收入等级等等。在根据数据类型在预设数据库中获取目标时间段内的查询数据之后，还包括：根据各游戏项目的年度收入，将目标时间段内的查询数据划分至对应的预设收入等级。

步骤S230，基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表。

其中，基于图表属性数据和查询数据进行渲染，是指前端将接收的服务器反馈的数据变成人眼看到的图像的全过程。

在一个实施例中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。在本实施例中，基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表，包括：根据横轴关键字、纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置，得到以直角坐标系，将各查询数据显示在直角坐标系中对应的坐标点。

在本实施例中以直角坐标系的展示查询数据，服务器在获取到查询数据后，需计算直角坐标系的横轴关键字及其显示位置、纵轴关键字及其显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。前端在接收到上述图表属性数据后，进行渲染可得到对应的直角坐标系。其中，横轴关键字和纵轴关键字可分别根据查询数据的数据属性确定。

横轴关键字、纵轴关键字表示的是在横轴、纵轴上需显示的词语，用于表示坐标轴中对应显示数据的信息。在一个实施例中，横轴表示时间，横轴关键字与时间相关，纵轴表示数据的归属，纵轴关键字与数据归属相关。横轴关键字的显示位置、纵轴关键字的显示位置即表示在坐标轴上各关键字的显示位置。在一个具体实施例中，仍以游戏项目相关信息的应用场景为例，纵轴关键字包括各公司名称；横轴关键字包括游戏项目的上线时间。

横轴、纵轴对应的标线分别表示的是在横轴、纵轴上需显示的标示线，用于划分横轴或者纵轴上的各关键字对应数据的显示区域。在一个实施例中，标线包括刻度线和/或网格线；其中，刻度线是类似于直尺分隔线的短度量线，与坐标轴相交；网格线是坐标轴上刻度线的延伸，并穿过绘图区，即在编辑区显示的用来对齐图像或文本的像风格一样的辅助线条。前端根据标线的显示位置可在直角坐标系的横轴和纵轴中显示对应的标线。

在根据图表属性数据渲染得到对应的直角坐标系之后，根据查询数据本身的信息将查询数据依次显示在直角坐标系对应的坐标点位置，即得到展示了查询数据的图表，本实施例中记为数据图表。以游戏项目的相关信息的应用场景为例，横轴关键字为游戏项目的上线时间，纵轴关键字为公司名称，根据任一游戏项目(查询数据)的上线时间和所属公司名称可确定该游戏项目在直角坐标系中对应的坐标点，进而将该游戏项目的信息显示在该坐标点位置。

本实施例中使用图表类插件实现数据的显示，在后台服务器计算出所使用图表类插件所需的属性信息，传递到前端页面进行图形渲染，大大简化了开发的工作量，减少了html元素和css样式的使用，基于预设类型的图表类插件自身的一些特性，可提高方案的可扩展性和延伸性。

上述数据处理方法，前端响应于用户发送的数据查询指令，向服务器发送携带待查询的目标时间段的数据查询请求，然后接收服务器的反馈的查询数据和对应的图表属性数据，根据其中的图表属性数据和查询数据进行渲染，从而得到展示查询数据的数据图表。其中，查询数据是服务器接收到数据查询请求之后，从预设数据库中查找并获取目标时间段内的数据，图表属性数据为服务器根据预设图表类型确定查询数据对应的属性数据；然后将图表属性数据和查询数据反馈给前端。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。上述方法最终以预设图表类型展示查询数据，其中，通过预设图表类型显示查询数据所需要的属性数据为服务器针对查询数据确定并反馈给前端，因此避免了使用大量HTML标签，大大简化了开发的工作量。

进一步地，在一个实施例中，如图3所示，基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表，还包括步骤S310：基于图表属性数据，利用预设图表类型的序列属性将各查询数据分别显示为预设图形。

在一个具体实施例中，预设图表类型采用的是echarts图表插件，利用echarts的series属性实现将各查询数据显示为预设图形，需要说明的是，对每一个查询数据分别以一个预设图形显示在界面中。在其它实施例中也可以利用其它图表插件的功能属性实现上述静态显示效果。其中，预设图形可以设置为任意一种图形，例如可以设置为矩形、圆形等等。

进一步地，还可以在显示的各查询数据对应的预设图形中显示查询数据的名称，例如可以显示游戏项目的名称。

在另一个实施例中，请继续参照图3，基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表，还包括步骤S320：读取各查询数据对应的等级；基于图表属性数据，将对应同一等级的查询数据显示为相同的背景颜色。

其中，服务器在从预设数据库中获取到查询数据之后，还会根据预设等级将各查询数据归类至对应的预设等级中，反馈的查询数据携带对应的等级；前端在接收到服务器反馈的查询数据后，可读取到各查询数据对应的等级，进而可以确定属于同一等级的查询数据。在一个具体实施例中，等级包括supreme(最高)、high(高)、medium(中等)和low(低)。

进一步地，在其它实施例中，在读取各查询数据对应的等级之后，也可以将同一等级的查询数据显示为相同的填充类型，例如在同一等级的查询数据的显示图形中均填充为斜杠；或者将同一等级的查询数据显示为相同的图形；或者还可以将同一等级的查询数据显示为相同的图形边框线条，例如实线、虚线等。

在一个具体实施例中，以游戏项目相关信息的应用场景为例，预设等级可以是收入等级，例如年度收入等级或者季度收入等级等等。查询数据的等级的确定包括步骤：服务器读取各查询数据的收入数值，根据收入数值划分至对应的预设收入等级。

在一个具体实施例中，预设图表类型采用的是echarts图表插件，利用echarts的显示颜色属性将属于同一等级的查询数据显示为相同的颜色。在其它实施例中也可以利用其它图表插件的功能属性实现上述静态显示效果。

如图4所示为一个具体实施例中的展示查询数据的数据图表的示意图，本实施例中以查询游戏项目的相关信息的应用场景为例。

在本实施例中，结合查询数据中的部分信息做特别的静态展示，包括将查询数据在数据图表中以预设图形的形式展示，以及将属于同一等级的查询数据显示为相同的背景颜色，可以用更加丰富的显示效果为用户展示更加直观的信息；其中，利用预设图表类型中的属性实现上述静态显示效果，避免了使用大量HTML标签，可减少开发工作量。

请继续参照图3，在一个实施例中，在基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表之后，还包括步骤S330：在查询数据的显示位置检测到鼠标指针悬停操作时，根据数据图表的提示框组件属性获取第一目标查询数据对应的第一待显示数据，展示第一待显示数据；其中，第一目标查询数据包括检测到鼠标指针悬停操作的查询数据。

其中，鼠标指针在计算机的图形界面上标识出鼠标位置；鼠标指针悬停表示鼠标指针在网页的部分图标、文字或者图片上停留。在本实施例中，当在查询数据的显示位置处检测到鼠标指针的悬停时，获取该查询数据(本实施例中记为第一目标查询数据)对应的待显示数据，在本实施例中为了与其它名称区分，记为第一待显示数据，并将第一待显示数据展示在数据图表中。其中，展示待显示数据的位置也可以根据实际情况预先设定；在一个具体实施例中，第一待显示数据的显示位置为第一目标查询数据的显示位置的预设范围内。

在一个实施例中，目标查询数据对应的待显示数据包括查询数据中的部分信息；在一个具体实施例中，以查询游戏项目相关信息的应用场景为例，检测到鼠标悬停操作时，显示游戏项目数据中的收入信息和所对应的收入等级信息。

在一个具体实施例中，预设图表类型为echarts图表插件，数据图表的提示框组件属性是指tooltip属性。如图5所示，为一个具体实施例中检测到鼠标悬停操作时，显示对应的第一待显示数据的示意图。

在另一个实施例中，在基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表之后，还包括步骤S340：在查询数据的显示位置检测到鼠标单击事件被触发时，获取第二目标查询数据对应的第二待显示数据，展示第二待显示数据；其中，第二目标查询数据包括检测到鼠标单击事件的查询数据。

鼠标单击事件(onclick)是在鼠标单击时被触发的事件；在本实施例中，在查询数据的显示位置触发的鼠标单击事件可以根据实际情况预先设置。进一步地，当在查询数据的显示位置检测到触发了鼠标单击事件时，根据预先设定的事件内容获取对应的待显示数据(本实施例中记为第二待显示数据)，并将其展示在数据图表中。其中，展示待显示数据的位置也可以根据实际情况预先设定。

在一个实施例中，目标查询数据对应的待显示数据包括根据查询数据确定的信息；在一个具体实施例中，以查询游戏项目相关信息的应用场景为例，检测到鼠标点击事件触发时，在指定的位置显示游戏项目所对应的等级，以及该等级的收入总和。可以理解地，在本实施例中，若用户通过鼠标点击查询数据的显示图形，将会在数据图表中展示对应的收入等级和所在收入等级的收入总和。如图6所示，为一个具体实施例中检测到鼠标点击事件触发时，显示对应的第二待显示数据的示意图，实线框中所示内容即对应本实施例中的第二待显示数据。

在本实施例中，通过两种动态交互事件(鼠标悬停显示和鼠标点击显示相应数据)，可在数据图表中显示更多信息，为用户提供更丰富的信息；而且利用预设图表类型的自身属性和鼠标点击事件，同样避免了使用大量HTML标签和样式，减少开发工作量。

在一个实施例中，如图7所示，在接收服务器反馈的查询数据和图表属性数据之后，还包括步骤S710至步骤S730。

步骤S710，读取各查询数据对应的等级。

步骤S720，在数据图表中显示表示等级的等级图形。

在一个实施例中，等级图形的显示样式包括显示图形和背景颜色等，其中，等级图形的显示图形可以根据实际情况进行预先设置，背景颜色可以设置为与该等级对应的查询数据相同的背景颜色。

进一步地，在一个实施例中，在数据图表中展示等级图形之后还包括：在数据图表中展示对应的等级名称。如图8所示为一个具体实施例中显示表示等级的等级图形的示意图。

步骤S730，在等级图形的显示位置检测到鼠标点击操作时，根据数据图表的显隐属性读取目标等级图形对应的第三目标查询数据，在显示界面展示或隐藏第三目标查询数据；其中，目标等级图形包括检测到点击操作的等级图形。

本实施例中，若用户用鼠标点击表示等级的等级图形，则在数据图表中显示或者隐藏该等级图形对应的查询数据。如图8所示，相较于图6所示的数据图表，等级为medium对应的游戏项目在数据图表中被隐藏。

在本实施例中，通过静态展示和动态交互事件(显示等级图形和点击显示等级图形显示或隐藏对应等级的数据)，可在数据图表中显示更多信息，为用户提供更丰富的信息；而且利用预设图表类型的自身属性和鼠标点击事件，同样避免了使用HTML标签和样式，减少开发工作量。

在一个实施例中，如图9所示，图表属性数据的确定过程包括步骤S910至步骤S950：

步骤S910，将目标时间段划分为多个子时间段，将各子时间段确定为横轴关键字。

其中，将目标时间段进行划分后得到多个不同的子时间段；在本实施例中将子时间段作为横轴关键字。从预设数据库中获取的查询数据均对应时间，对应的时间可以是查询数据的获取时间、记录时间、入库时间、上线时间，或者还可以是查询数据所采集时对应的年龄数据等等。可以理解地，在读取查询数据对应的时间后，可将查询数据对应归类到子时间段中，即对应落入横轴的不同位置。

步骤S920，读取各查询数据的归属名称，将各归属名称确定为初始纵轴关键字。

其中，数据的归属可以是任意一种归属；例如在一个实施例中，查询数据的归属包括查询数据的来源地址(例如数据来自网页、来自期刊文本或者来自统计等等)、查询数据对应所属的所有人(例如身高体重信息的所属用户)、查询数据所属的公司(例如游戏项目的所属公司)等等。在本实施例中读取查询数据各自对应的归属名称，以所有的归属名称作为初始纵轴关键字；后续对初始纵轴关键字进行筛选后得到最终的纵轴关键字，作为查询数据的图表属性数据之一。

步骤S930，针对任一初始纵轴关键字，分别统计对应的各坐标点对应的查询数据的数量，确定对应查询数据的数量最多的目标坐标点。

可以理解地，在坐标系中一组确定的横轴坐标值和纵轴坐标值可以确定唯一的一个坐标点。在本实施例中，对应落入同一坐标点的查询数据可能包括多个查询数据，对同一初始纵轴关键字对应的各坐标点中落入的查询数据的数量进行统计，对每一个初始纵轴关键字确定落入查询数据数量最多的一个坐标点，记为目标坐标点。例如，纵轴关键字C

步骤S940，基于目标坐标点中包含的查询数据数量依次为初始纵轴关键字进行编号。

以目标坐标点中包含的查询数据数量依次为初始纵轴关键字进行编号，包括：依次在初始纵轴关键字之后添加序号，序号的最大值即为目标坐标点中包含查询数据的数量。在一个具体实施例中，初始纵轴关键字对应的目标坐标点中包含3个，以数值3为初始纵轴关键字进行编号，得到：C

步骤S950，将携带编号的初始纵轴关键字确定为纵轴关键字。

在一个具体实施例中，将添加序号之后的初始纵轴关键字：C

本实施例中，通过将编号之后的归属名称确定为纵轴关键字，可确保每一个数据对应显示在一个单独的坐标点，可避免在一个坐标点显示多个数据导致数据重叠和显示不全面的后果。

进一步地，在一个实施例中，如图10所示，在将携带编号的初始纵轴关键字确定为纵轴关键字之前，还包括步骤S1010：确定各初始纵轴关键字对应的中位编号。

确定初始纵轴关键字对应的中位编号，即针对同一初始关键字对应的各编号，计算中位数值对应的编号；在一个具体实施例中，若只包含1个编号，则中位编号为1。在本实施例中，对所有携带编号的初始纵轴关键字确定一个中位编号。

在本实施例中，将携带编号的初始纵轴关键字确定为纵轴关键字，包括步骤S1020：将携带中位编号的初始纵轴关键字确定为纵轴关键字。

在一个具体实施例中，以初始纵轴关键字C

更进一步地，在本实施例中，在将携带编号的初始纵轴关键字确定为纵轴关键字之后，还包括步骤S1030：针对任一纵轴关键字：将携带中位编号的初始纵轴关键字的位置，确定为纵轴关键字的显示位置；步骤S1040，将各编号中最小编号和最大编号对应的标线显示位置确定为纵轴的标线显示位置。

以初始纵轴关键字C

本实施例中，通过一定的逻辑将纵轴关键字和对应的标线的显示位置进行精简，可得到显示更为简洁的数据图表；并且，由于本实施例中对于各查询数据的显示均有对应显示的位置，在最终展示的数据图表中，各查询数据分别显示且完全落入对应的坐标点，可使数据图表的显示界面更为整洁，显示信息更加完整。

在一个实施例中，将目标时间段划分为多个子时间段，将各子时间段确定为横轴关键字之后，还包括：按照时间顺序对横轴关键字进行排列，得到横轴关键字的显示位置、横轴对应的标线显示位置。

本实施例中依据所查询的数据的目标时间段确定横轴关键字；在一个具体实施例中，目标时间段为2019Q3至2020Q2，对其进行划分得到2019Q3、2019Q4、2020Q1和2020Q2的子时间段，将确定为横轴关键字。按照时间顺序对2019Q3、2019Q4、2020Q1和2020Q2进行排列，得到各横轴关键字对应的显示位置的顺序；本实施例中，所有横轴关键字均需显示，因此将横轴关键字的标线显示位置及横轴对应的标线显示位置。

在一个实施例中，如图11所示，提供了一种数据处理方法，以该方法应用于图1中的后台服务器为例进行说明，包括步骤S1110至步骤S1140。

步骤S1110，接收前端发送的数据查询请求；数据查询请求为前端响应于数据查询指令时发送，数据查询请求包含待查询的目标时间段。

步骤S1120，根据数据查询请求在预设数据库中获取目标时间段内的查询数据。

步骤S1130，根据预设图表类型确定查询数据对应的图表属性数据。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。

步骤S1140，基于查询数据和图表属性数据向前端发送查询反馈结果；查询反馈结果用于使前端基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表。

关于数据处理方法的具体限定可以参见上文中对于数据处理方法中的限定，在此不再赘述。

上述数据处理方法，服务器在接收到前端发送的数据查询请求之后，根据其中待查询的目标时间段，从预设数据库中获取目标时间段的查询数据，并基于预设图表类型确定查询数据对应的图表属性数据，并将查询数据和对应的图表属性数据反馈给前端，以使前端基于查询数据和图表属性数据进行渲染，得到展示查询数据的数据图表。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。由于在服务器端获取数据之后，按照预设图表类型的要求确定了查询数据对应的图表属性，前端可直接基于这些数据进行渲染，实现以预设图表类型展示查询数据，避免前端使用大量的HTML标签和样式，可减少开发工作量。

在一个实施例中，在预设数据库中获取目标时间段内的查询数据之后，还包括步骤：按照预设等级对查询数据进行等级划分，将查询数据归类到对应的等级。以将上述方法应用于提供给用户查询游戏项目相关信息为例，预设等级可以是收入等级，例如年度收入等级或者季度收入等级等等。在根据数据查询请求在预设数据库中获取目标时间段内的查询数据之后，还包括：根据各游戏项目的收入数值，将目标时间段内的查询数据划分至对应的预设收入等级。

本申请还提供一种应用场景，该应用场景应用上述的数据处理方法。在该应用场景下，在PC端网页上实现一个不同时间上线的游戏项目分布的图形，通过鼠标悬停和点选，会呈现一定的交互功能。具体地，该数据处理方法在该应用场景的应用如下：

如图12所示为本实施例方法的时序示意图。本实施例中前端使用的是基于vue的element-ui框架，预设图表类型为echarts图表插件；后台服务器基于egg.js。

用户在PC端打开网页页面，进行账户登录，本实施例中以企业微信登录为例；由智能网关对账户信息进行校验成功后授权用户登录。

接收用户发送的数据查询指令，获取用户输入的待查询的起止时间(上述目标时间段)，发起数据查询请求，调用相关查询接口，接口向后台服务器传递包含目标时间段在内的参数，调用相应的后台接口。

后台服务器在接收到数据查询请求后，执行查询逻辑：从预设数据库中查询并获取目标时间段内的查询数据，包括所有投资公司上线的游戏项目、所属公司名称、上线时间以及对应的年收入等数据。后台服务器将获取的数据按照收入等级进行划分等级，并计算echarts图表显示查询数据所需的图表属性数据。将查询数据和图表属性数据一同经VUE框架的API接口反馈给PC端网页。

其中，按照该时间上线的游戏个数在投资公司名称后加上序号，这样将一个投资公司在y轴上分割成多个部分。图表上展示时只展示位于该投资公司中间位置的名称，并去掉尾部的序号；另外，刻度线和网格线也只展示该投资公司始末位置的，中间部分的均隐藏起来。在后台查询到游戏以及相应的投资公司，游戏上线时间和年收入等数据时，计算出图表属性的相关的数据，连同待展示的游戏相关信息，一起返回到前端，前端根据这些在做渲染即可。

图表属性数据包括：y轴上的值，y轴要展示的标签axisLabel对应的位置，y轴要展示的刻度线axisTick对应的位置，y轴要展示的网格线splitLine对应的位置，x轴上的值等。

待传到前端的图表属性相关的结果示例：

const xAxis＝[‘2019Q1’,‘2019Q2’,‘2019Q3’,‘2019Q4’,‘2020Q1’,‘2020Q2’,……]；

//y轴上的值，相同的公司根据单个时间点上线最多的游戏个数加上序号，

const yAxis＝[‘company_A_1’,‘company_A_2’,‘company_A_3’,‘company_B_1’,‘company_C_1’,‘company_C_2’,‘company_C_3’,‘company_C_4’,‘company_C_5’]；

//y轴不需要隐藏的刻度线的位置

//company A中隐藏company_A_2,company C中隐藏C_2,C_3,C_4

const yAxisTick＝[1,3,4,5,9]；

//y轴不需要隐藏的网格线的位置

const ySplitLine＝[1,3,4,5,9]；

//y轴需要展示的标签的位置

//company_A展示位置：compay_A_2，company_B展示位置：company_B_1，company_C展示位置：company_C_3

const yAxisLabel＝[2,4,7]

前端图表中的游戏相关数据需要按收入等级分组展示，每组数据中包括游戏名，所属公司，上线时间，年收入等；相关示例如下：

//supermeRes:年收入为superme级的游戏数据,game:游戏名，company:所属公司，release_date：上线时间，year_revenue:年收入

const supermeRes＝[{game:‘game1’,company:‘company_A’,release_date:‘2020Q1’,year_revenue:2000}]；

//highRes:年收入为high级的游戏数据,

const highRes＝[{game:‘game2’,company:‘**’,release_date:‘***‘,year_revenue:2000}]；

//mediumRes:年收入为medium级的游戏数据,

const mediumRes＝[{game:‘game3’,company:‘**’,release_date:‘**‘,year_revenue:2000}]；

//lowRes:年收入为low级的游戏数据,

const lowRes＝[{game:‘game4’,company:‘**’,release_date:‘**’,year_revenue:2000}]；

PC端网页接收到查询数据和对应的图表属性数据之后，进行渲染，得到展示查询数据的数据图表。如图13所示为一个实施例中在展示的数据图表中包含的静态显示效果以及动态交互事件及其对应实现方式。

上述实施例中，利用echarts插件做图，在后台采用一定的逻辑技巧，计算出echarts相关的属性信息，传递到前端页面进行图形渲染。大大简化了开发的工作量，减少了html元素和css样式的使用，基于图形插件自身的一些特性，提高了整个方案的可扩展性和延伸性。

应该理解的是，虽然上述实施例中所涉及的各流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述实施例中所涉及的各流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图14所示，提供了一种数据处理装置，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：查询请求发送模块1410、接收模块1420和渲染模块1430，其中：

查询请求发送模块1410，用于响应于数据查询指令，向服务器发送数据查询请求；其中，数据查询请求包含待查询的目标时间段。

接收模块1420，用于接收服务器反馈的查询数据和图表属性数据；查询数据为服务器从预设数据库中获取目标时间段内对应的数据，图表属性数据为服务器根据预设图表类型确定查询数据对应的数据。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。

渲染模块1430，用于基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表。

上述数据处理装置，前端响应于用户发送的数据查询指令，向服务器发送携带待查询的目标时间段的数据查询请求，然后接收服务器的反馈的查询数据和对应的图表属性数据，根据其中的图表属性数据和查询数据进行渲染，从而得到展示查询数据的数据图表。其中，查询数据是服务器接收到数据查询请求之后，从预设数据库中查找并获取目标时间段内的数据，图表属性数据为服务器根据预设图表类型确定查询数据对应的属性数据；然后将图表属性数据和查询数据反馈给前端。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。上述装置最终以预设图表类型展示查询数据，其中，通过预设图表类型显示查询数据所需要的属性数据为服务器针对查询数据确定并反馈给前端，因此避免了使用大量HTML标签，大大简化了开发的工作量。

在一个实施例中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置；在本实施例中，上述装置的渲染模块1430，具体用于：根据横轴关键字、纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置，得到以直角坐标系，将各查询数据显示在直角坐标系中对应的坐标点。

在一个实施例中，上述装置的渲染模块1430，还用于基于图表属性数据利用预设图表类型的将各查询数据分别显示为预设图形。

在一个实施例中，上述装置的渲染模块1430包括：等级读取单元，用于读取各查询数据对应的等级；渲染模块1430还用于基于图表属性数据利用将对应同一等级的查询数据显示为相同的背景颜色。

在一个实施例中，上述装置还包括：检测模块，用于在查询数据的显示位置检测到鼠标指针悬停操作时，根据数据图表的提示框组件属性获取第一目标查询数据对应的第一待显示数据，展示第一待显示数据；其中，第一目标查询数据包括检测到鼠标指针悬停操作的查询数据。

在一个实施例中，上述装置还包括：检测模块，用于在查询数据的显示位置检测到鼠标单击事件被触发时，获取第二目标查询数据对应的第二待显示数据，展示第二待显示数据；其中，第二目标查询数据包括检测到触发鼠标单击事件的查询数据。

在一个实施例中，上述装置还包括：等级读取单元，用于读取各查询数据对应的等级；在本实施例中，渲染模块1430还用于在数据图表中显示表示等级的等级图形；在等级图形的显示位置检测到鼠标点击操作时，根据数据图表的显隐属性读取目标等级图形对应的第三目标查询数据，在显示界面展示或隐藏第三目标查询数据；其中，目标等级图形包括检测到点击操作的等级图形。

在一个实施例中，查询数据包括目标时间段内上线的游戏项目、各游戏项目所属的公司名称、各游戏项目对应的年度收入、各游戏项目的上线时间；纵轴关键字包括各公司名称；横轴关键字包括各上线时间。

在另一个实施例中，本申请还提供一种数据处理装置，如图15所示，该装置包括：请求接收模块1510、数据获取模块1520、属性确定模块1530以及反馈模块1540。其中：

请求接收模块1510，用于接收前端发送的数据查询请求；数据查询请求为前端响应于数据查询指令时发送，数据查询请求包含待查询的目标时间段。

数据获取模块1520，用于根据数据查询请求在预设数据库中获取目标时间段内的查询数据。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。

属性确定模块1530，用于根据预设图表类型确定查询数据对应的图表属性数据。

反馈模块1540，用于基于查询数据和图表属性数据向前端发送查询反馈结果；查询反馈结果用于使前端基于图表属性数据和查询数据进行渲染，得到展示查询数据的数据图表。

上述数据处理装置，在接收到前端发送的数据查询请求之后，根据其中待查询的目标时间段，从预设数据库中获取目标时间段的查询数据，并基于预设图表类型确定查询数据对应的图表属性数据，并将查询数据和对应的图表属性数据反馈给前端，以使前端基于查询数据和图表属性数据进行渲染，得到展示查询数据的数据图表。其中，图表属性数据包括：根据查询数据确定的横轴关键字、根据查询数据确定的纵轴关键字、横轴关键字的显示位置、纵轴关键字的显示位置、横轴对应的标线显示位置，以及纵轴对应的标线显示位置。由于在服务器端获取数据之后，按照预设图表类型的要求确定了查询数据对应的图表属性，前端可直接基于这些数据进行渲染，实现以预设图表类型展示查询数据，避免前端使用大量的HTML标签和样式，可减少开发工作量。

进一步地，在一个实施例中，上述装置的属性确定模块1530包括：时间段划分对应，用于将目标时间段划分为多个子时间段，将各子时间段确定为横轴关键字；读取单元，用于读取各查询数据的归属名称，将各归属名称确定为初始纵轴关键字；统计单元，用于针对任一初始纵轴关键字，分别统计对应的各坐标点对应的查询数据的数量，确定对应查询数据的数量最多的目标坐标点；编号单元，用于基于目标坐标点中包含的查询数据数量依次为初始纵轴关键字进行编号；属性确定模块1530具体用于将携带编号的初始纵轴关键字确定为纵轴关键字。

在一个实施例中，上述装置还包括：中位编号确定单元，用于确定各初始纵轴关键字对应的中位编号；属性确定模块1530具体用于将携带中位编号的初始纵轴关键字确定为纵轴关键字；所述装置还包括：关键字显示位置确定单元，用于针对任一纵轴关键字，将携带中位编号的初始纵轴关键字的位置，确定为纵轴关键字的显示位置；标线显示位置确定单元，用于将各编号中最小编号和最大编号对应的标线显示位置确定为纵轴的标线显示位置。

关于数据处理装置、数据处理装置的具体限定可以参见上文中对于数据处理方法的限定，在此不再赘述。上述数据处理装置、数据处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图16所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种数据处理方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图16中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。