图与表的交互方法及装置与流程

本申请涉及数据交互领域，具体而言，涉及一种图与表的交互方法及装置。

背景技术：

在一些图表软件的使用场景下，例如，vuechart。在界面的一部分是图，界面的另一部分是表，表与图的内容相对相应，当用户点击表时，会联动图的变化，例如，用户点击表的单元格，或者行，在图中对应的部分会显示高亮。但是用户不能根据对图的点击，来实现与图对应的表中的高亮标记。

针对相关技术中图与表的交互方式，功能不够完善的问题，目前尚未提出有效的解决方案。

技术实现要素：

本申请的主要目的在于提供一种图与表的交互方法及装置，以解决相关技术中图与表的交互方式，功能不够完善的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种图与表的交互方法，包括：建立用于关联图与表的控件；通过所述控件监测，是否发生对图中内容执行的第一操作对应的操作事件；在所述控件监测到所述操作事件发生的情况下，获取所述第一操作对应的表的位置；根据所述表的位置更新所述位置的内容。

可选的，建立用于关联图与表的控件之后包括：响应于对表中位置的第二操作，通过控件更新所述图中的，与所述位置对应的内容。

可选的，响应于对表中位置的第二操作，通过所述控件更新所述图中的，与所述位置对应的内容包括：响应于所述第二操作，更新所述控件的向导文件的数据；根据所述数据，突出显示所述图中的与所述表中位置对应的内容。

可选的，在所述控件监测到所述操作事件发生的情况下，获取所述第一操作对应的表的位置包括：根据所述操作事件，采用应用编程接口api获取所述表中对应的位置。

可选的，根据所述表的位置更新所述位置的内容包括：突出显示所述表中的所述位置。

可选的，突出显示所述表中的所述位置之后还包括：监测所述表中其他位置的内容是否发生变化；在其他所述位置的内容发生变化的情况下，取消所述位置的突出显示，并突出显示发生内容变化的所述位置。

可选的，建立用于关联图与表的控件包括：将所述表封装为组件；向所述组件的向导文件添加种类属性。

为了实现上述目的，根据本申请的另一方面，提供了一种图与表的交互装置，包括：建立模块，用于建立用于关联图与表的控件；检测模块，用于通过所述控件监测，对图中内容执行的第一操作对应的操作事件；获取模块，用于在所述控件监测到所述操作事件发生的情况下，获取所述第一操作对应的表的位置；第一更新模块，用于根据所述表的位置更新所述位置的内容。

为了实现上述目的，根据本申请的另一方面，提供了一种存储介质，所述存储介质包括存储的程序，其中，所述程序执行上述中任意一项所述的方法。

为了实现上述目的，根据本申请的另一方面，提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述中任意一项所述的方法。

通过本申请，采用以下步骤：建立用于关联图与表的控件；通过所述控件监测，是否发生对图中内容执行的第一操作对应的操作事件；在所述控件监测到所述操作事件发生的情况下，获取所述第一操作对应的表的位置；根据所述表的位置更新所述位置的内容，解决了相关技术中图与表的交互方式，功能不够完善的问题。进而达到了根据包下载器指定软件包的所有依赖，以及软件包打包器快速打包功能，结合软件包管理器，可以快速的将应用系统所依赖的软件包安装到位，且不影响后续的操作的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的图与表的交互方法的流程图；以及

图2是根据本申请实施例提供的图与表的交互装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为了便于描述，以下对本申请实施例涉及的部分名词或术语进行说明：

vue.js是一个前端的框架，主要利用vue.js的响应式特性和控件可复用性，prop使父控件可以向子控件传递数据，这样便可在控件上注册一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个控件实例的一个属性。watch是vue提供的一种更通用的方式来观察和响应vue实例上的数据变动。当数据发生变化时，就会调用这个数据的watch方法。

echarts是百度的一款开源免费图表类型丰富的图表库。

vuechart对echart进行了一个封装，成为组件的形式，图表的数据通过prop，data传递进去，这样，当改变下方的表时，就可以改变传递进去的data属性的值，便可以很方便的去更新图表使用的数据。达到用户点击下方的表，更新图的作用。

根据本申请的实施例，提供了一种图与表的交互方法。

图1是根据本申请实施例的图与表的交互方法的流程图。如图1所示，该方法包括以下步骤：

步骤s101，建立用于关联图与表的控件；

步骤s102，通过控件监测，是否对图中内容执行的第一操作对应的操作事件；

步骤s103，在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；

步骤s104，根据表的位置更新位置的内容。

上述建立用于关联图与表的控件可以是上述vuechart中，将echart进行封装而成的组件，该组件可以通过prop，data等属性传递图或者表的数据，从而在图与表之间建立用于关联图与表的控件。

上述第一操作可以是对图执行点击操作的事件，上述控件可以通过应用编程接口api(applicationprogramminginterface)可以监听上述第一操作事件，并根据该第一操作事件确定该点击操作对应的标的位置，例如，单元格、行或者列。在本实施例中，通过控件对该第一操作是否发生进行监测，在该第一操作发生的情况下，根据该第一操作确定第一操作对应的表的位置。

根据表的位置更新该位置的内容，需要说明的是，突出显示表的位置只是一种与图联动的联动方式，还可以是通过该表图的比例，实现同步更改表中对应的位置的数值，或者数据，还可以是根据对图的点击操作，实现对表的其他突出显示方式，还可以根据图中部分的消除或者合并，实现对表中的对应位置的删除或者合并。

可选地，在本申请实施例提供的图与表的交互方法中，建立用于关联图与表的控件之后包括：响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容。

在根据对图的第一操作，实现对表的相应的联动，还可以通过对表的第二操作，实现对图的相应的联动，从而实现图与表之间的双向联动，实用性更强，适用范围更广。上述通过对表的第二操作，实现对图的相应的联动可以包括：响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容。在vuechart中，该控件(组件)可以对表中发生的第二操作，通过api进行响应，在发生第二操作时，获取该第二操作对应的表的位置。由于该图的构成组件是通过对echart进行封装而成，因此将该表的位置可以通过更新prop：data文件更新图。

可选的，在本申请实施例提供的图与表的交互方法中，响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容包括：响应于第二操作，更新控件的向导文件的数据；根据数据，突出显示图中的与表中位置对应的内容。

上述向导文件可以是prop文件，上述向导文件的数据，可以是prop：data数据，如上，该图的构成组件由echart封装而成，因此可以根据更新该组件中的prop：data数据来更新该图，可以是对图中的与表的位置相对应的部分进行突出显示，上述突出显示的方式可以包括高亮，加粗，斜体，下划线等多种方式。

可选的，在本申请实施例提供的图与表的交互方法中，在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置包括：根据操作事件，采用应用编程接口api获取表中对应的位置。

上述在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置，可以根据操作事件，采用应用编程接口api获取表中对应的位置。在vuechart中，echart自带的api可以实现根据对图的第一操作获取对应的表的位置的功能，直接利用该功能，方便快捷，避免占用过多的运算资源。

可选的，在本申请实施例提供的图与表的交互方法中，根据表的位置更新位置的内容包括：突出显示表中的位置。

在图与表交互过程中，可以实现对表进行突出显示，方便实现，在vuechart中，能够根据表的更新，突出显示对应的图的部分，而且可以采用通过表突出显示图的方式，对表进行突出显示，避免以其他方式进行标记和突出，可以避免增加系统运算负担。

可选的，在本申请实施例提供的图与表的交互方法中，突出显示表中的位置之后包括：监测表中其他位置的内容是否发生变化；在其他位置的内容发生变化的情况下，取消突出显示位置的突出显示，并突出显示发生内容变化的位置。

上述表的位置根据图的更新进行突出显示，可以对表的其他位置进行监测，表中的其他位置可以根据图的更新，或者用户的操作发生变化，对该表中的其他位置进行监测，在该表的其他位置发生变化时，取消对表中原位置的突出显示，对发生变化的位置进行突出显示，以突出表中内容的变化。

在vuechart中，在使表中对应的位置突出显示后，又将表中的位置作为图的组件的prop传递进去，在图的组件内部watch(监测)表中其他位置的变化。一旦表中的位置发生改变就调用echart的api：dispatchaction类，去取消图表之前突出显示的部分，再突出显示现在的表中的位置。

可选的，在本申请实施例提供的图与表的交互方法中，建立用于关联图与表的控件包括：将表封装为组件；向组件的向导文件添加种类属性。

上述控件可以为将echart封装而成的组件，对该组件的prop文件添加种类type属性，可以通过该type属性区分图的种类，在组件的其他文件中不必区分图的种类，可以有效提高该组件中的代码的复用率。

需要说明的是，本实施例还提供了一种图与表的交互方法，作为一种可选的实施方式，下面对该实施方式进行说明。

在界面上半部分是图，下半部分是表的情况下，用户会希望达到以下效果：当用户点击表时，会联动图的变化，具体包括更新数据和图的相应部分的高亮，当用户点击图时，也会引起表对应的行发生高亮。vuechart对echart进行了一个封装，成为组件的形式，图表的数据通过prop，data传递进去，这样，当改变下方的表时，就可以改变传递进去的data属性的值，便可以很方便的去更新图表使用的数据。达到用户点击下方的表，更新图的作用。但是存在以下问题：vuechart对echart的封装程度不高，按图的种类来定义组件，这样代码复用率不高。而且，vuechart虽然实现了点击表去更新图，但是却没有实现点击图去更新表。功能不够完善。

本实施方式对echart进行更完善的封装，通过type属性，不必区分图的种类，提高代码的复用率。实现点击图去更新下方的表，使功能更完善。

由于图表种类比较多，所以需要构建一个图的组件，使用prop:type来区分图的种类，从而达到复用组件的目的。实际上在这个组件内部就使用了ehcarts的api去绘图和事件响应。要想达到点击下方的表去更新图，这就意味着需要去更新prop:data。

再回到如何去点击图的某一部分去使下方表对应的行高亮。在图的组件中，监听‘click’点击事件，这是echart这个图表库自带的api，监听这个事件可以拿到点击的对应的行。然后改变组件外部的行，这个时候就可以使下方的表的对应的行高亮了。又将这个行作为图的组件的prop传递进去，在图的组件内部watch行的变化。一旦发生改变就调用echart的api：dispatchaction，去取消图表之前高亮的部分，再高亮现在的行。

本实施方式具有以下有益效果：通过对echart使用prop:type属性做适配，定义一个图的组件，使代码复用率提高。在图组件内部监听了ehcart实例的点击事件，从而去实现表的高亮。

在本实施方式中，封装图的组件时可以使用jsx语法也可以使用template。另外，表高亮的行的改变可以使用computed的setter方法，当点击时这个就算属性重新赋值，就执行了setter方法，然后在setter方法内部去更新表高亮的行和执行图的取消高亮和重新高亮。

本实施方式可以在图组件内部去监听echart实例的点击事件，实现图与表的交互。并且灵活的使用eharts的api和vue.js的特性去打造一个可以交互的图表展示。

本申请实施例提供的图与表的交互方法，通过采用以下步骤：建立用于关联图与表的控件；通过控件监测，是否发生对图中内容执行的第一操作对应的操作事件；在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；根据表的位置更新位置的内容，解决了相关技术中图与表的交互方式，功能不够完善的问题。进而达到了根据包下载器指定软件包的所有依赖，以及软件包打包器快速打包功能，结合软件包管理器，可以快速的将应用系统所依赖的软件包安装到位，且不影响后续的操作的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种图与表的交互装置，需要说明的是，本申请实施例的图与表的交互装置可以用于执行本申请实施例所提供的用于图与表的交互方法。以下对本申请实施例提供的图与表的交互装置进行介绍。

图2是根据本申请实施例的图与表的交互装置的示意图。如图2所示，该装置包括：建立模块22，检测模块24，获取模块26和更新模块28，下面对该装置进行详细说明。

建立模块22，用于建立用于关联图与表的控件；检测模块24，与上述建立模块22相连，用于通过控件监测，对图中内容执行的第一操作对应的操作事件；获取模块26，与上述检测模块24相连，用于在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；第一更新模块28，与上述获取模块26相连，用于根据表的位置更新位置的内容。

可选地，在本申请实施例提供的图与表的交互装置中，还包括：第二更新模块，用于响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容。

可选地，在本申请实施例提供的图与表的交互装置中，上述第二更新模块包括：更新单元，用于响应于第二操作，更新控件的向导文件的数据；显示单元，用于根据数据，突出显示图中的与表中位置对应的内容。

可选地，在本申请实施例提供的图与表的交互装置中，上述获取模块26包括：获取单元，用于根据操作事件，采用应用编程接口api获取表中对应的位置。

可选地，在本申请实施例提供的图与表的交互装置中，上述更新模块28包括：突出单元，用于突出显示表中的位置。

可选地，在本申请实施例提供的图与表的交互装置中，上述更新模块28还包括：检测单元，用于监测表中其他位置的内容是否发生变化；更新单元，用于在其他位置的内容发生变化的情况下，取消位置的突出显示，并突出显示发生内容变化的位置。

可选地，在本申请实施例提供的图与表的交互装置中，上述建立模块22包括：封装单元，用于将表封装为组件；添加单元，用于向组件的向导文件添加种类属性。

本申请实施例提供的图与表的交互装置，通过建立模块22建立用于关联图与表的控件；检测模块24通过控件监测，是否发生对图中内容执行的第一操作对应的操作事件；获取模块26在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；更新模块28根据表的位置更新位置的内容，解决了相关技术中图与表的交互方式，功能不够完善的问题。进而达到了根据包下载器指定软件包的所有依赖，以及软件包打包器快速打包功能，结合软件包管理器，可以快速的将应用系统所依赖的软件包安装到位，且不影响后续的操作的效果。

所述图与表的交互装置包括处理器和存储器，上述建立模块22，检测模块24，获取模块26和更新模块28等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来根据包下载器指定软件包的所有依赖，以及软件包打包器快速打包功能，结合软件包管理器，可以快速的将应用系统所依赖的软件包安装到位，且不影响后续的操作的效果。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)，存储器包括至少一个存储芯片。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述图与表的交互方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述图与表的交互方法。

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：建立用于关联图与表的控件；通过控件监测，是否发生对图中内容执行的第一操作对应的操作事件；在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；根据表的位置更新位置的内容。

可选的，建立用于关联图与表的控件之后包括：响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容。

可选的，响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容包括：响应于第二操作，更新控件的向导文件的数据；根据数据，突出显示图中的与表中位置对应的内容。

可选的，在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置包括：根据操作事件，采用应用编程接口api获取表中对应的位置。

可选的，根据表的位置更新位置的内容包括：突出显示表中的位置。

可选的，突出显示表中的位置之后还包括：监测表中其他位置的内容是否发生变化；在其他位置的内容发生变化的情况下，取消位置的突出显示，并突出显示发生内容变化的位置。

可选的，建立用于关联图与表的控件包括：将表封装为组件；向组件的向导文件添加种类属性。

本文中的设备可以是服务器、pc、pad、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：建立用于关联图与表的控件；通过控件监测，是否发生对图中内容执行的第一操作对应的操作事件；在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置；根据表的位置更新位置的内容。

可选的，建立用于关联图与表的控件之后包括：响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容。

可选的，响应于对表中位置的第二操作，通过控件更新图中的，与位置对应的内容包括：响应于第二操作，更新控件的向导文件的数据；根据数据，突出显示图中的与表中位置对应的内容。

可选的，在控件监测到操作事件发生的情况下，获取第一操作对应的表的位置包括：根据操作事件，采用应用编程接口api获取表中对应的位置。

可选的，根据表的位置更新位置的内容包括：突出显示表中的位置。

可选的，突出显示表中的位置之后还包括：监测表中其他位置的内容是否发生变化；在其他位置的内容发生变化的情况下，取消位置的突出显示，并突出显示发生内容变化的位置。

可选的，建立用于关联图与表的控件包括：将表封装为组件；向组件的向导文件添加种类属性。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

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

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(cd-rom、光学存储器等)上实施的计算机程序产品的形式。

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