基于React框架的图表联动更新方法、装置及计算机设备与流程
基于react框架的图表联动更新方法、装置及计算机设备
技术领域
1.本技术涉及数据可视化技术领域，具体涉及一种基于react框架的图表联动更新方法、基于react框架的图表联动更新装置、计算机设备、计算机可读存储介质及计算机程序产品。
背景技术：
2.大屏数据可视化是以大屏为主要展示载体进行数据的可视化呈现，可连接多个终端，支持多人进行内容投放，数据进行图形化的展示，可以形象地表达数据内在的信息和规律，让数据更加简单明了的展示。可视化大屏在排版上不仅仅是简单的横平竖直、简易的图形，还支持智能化布局和组件的自由排版，不同图形样式及彩的搭配，能带来富有个性化、层次感、空间感的大屏。
3.随着大屏数据可视化相关技术与工具的发展，大屏可视化项目的需求和功能越来越复杂，图表联动成为大屏可视化项目中常见的需求。在大屏可视化领域的图表联动中，使用全局筛选和局部联动功能时，被动组件不能及时响应主动组件的变化。例如，现有的一种图表联动技术中，直接使用当前图表中所显示的字段作为关联字段，与其它图表进行绑定，实现多个图表之间的联动，具有绑定字段的其他被关联的图表依据对当前图表的操作，对应进行联动显示。但是，对于具有筛选条件的图表，无法利用当前图表的非绑定字段进行图表的全局联动显示，存在联动图表更新不及时的缺陷。
技术实现要素：
4.为了解决上述技术缺陷之一，本技术提供一种基于react框架的图表联动更新方法及装置。
5.本技术第一方面提供一种基于react框架的图表联动更新方法，包括：
6.在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数；
7.通过react项目中创建的用于保存关联参数的对象保存所述关联参数；
8.在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；
9.通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图。
10.在本技术实施例中，所述在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数，包括：根据主动组件的维度信息和指标信息组合形成所述关联参数；其中，主动组件和被动组件均为图表组件。
11.在本技术实施例中，所述通过react项目中创建的用于保存关联参数的对象保存所述关联参数，包括：将所述关联参数赋值给被动组件的配置参数中的从属数据，同时将所
述关联参数赋值给所述对象下的对应被动组件的键值。
12.在本技术实施例中，所述在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，包括：在主动组件的维度信息或指标信息发生改变时，根据改变的维度信息和指标信息组合形成新的关联参数；根据新的关联参数对被动组件的配置参数中的从属数据进行重新赋值。
13.在本技术实施例中，所述通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图，包括：在可复用组件的生命周期中获取被动组件的配置参数中的从属数据作为第一对比数据，获取所述对象下的对应被动组件的键值作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据被动组件的配置参数调用对应接口获取新的图表数据以更新视图，同时根据被动组件的配置参数中的从属数据对所述对象下的对应被动组件的键值进行更新。
14.在本技术实施例中，所述在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数，包括：在所述可复用组件的静态属性中添加对应图表组件的全局过滤属性，将图表组件创建时的配置参数作为对应该图表组件的全局过滤属性的初始值；根据主动组件的标识id、维度信息及指标信息组合形成所述关联参数；其中，主动组件为筛选组件，被动组件为图表组件。
15.在本技术实施例中，所述通过react项目中创建的用于保存关联参数的对象保存所述关联参数，包括：将react项目中创建的全局过滤数组作为用于保存关联参数的对象，将所述关联参数推进到全局过滤数组中。
16.在本技术实施例中，所述在主动组件的状态信息发生改变时生成新的关联参数，将所述对象中保存的关联参数替换为新的关联参数，包括：在主动组件的维度信息或指标信息发生改变时，根据主动组件的标识id、改变的维度信息和指标信息组合形成新的关联参数；根据新的关联参数中的标识id在所述全局过滤数组中查对应该主动组件的关联参数，将查到的关联参数替换为新的关联参数。
17.在本技术实施例中，所述通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图，包括：在可复用组件的生命周期中获取对应被动组件的静态属性值作为第一对比数据，获取所述全局过滤数组中的对应主动组件的关联参数作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据所述被动组件的配置参数和所述全局过滤数组中的对应主动组件的关联参数调用对应接口获取新的图表数据以更新视图，同时将可复用组件中对应被动组件的静态属性值更新为所述全局过滤数组中的对应主动组件的关联参数。
18.本技术第二方面提供一种基于react框架的图表联动更新装置，包括：
19.关联参数生成模块，用于在建立主动组件与被动组件的联动关系时根据主动组件的状态信息生成关联参数，以及在主动组件的状态信息发生改变时生成新的关联参数；
20.关联参数保存模块，用于通过react项目中创建的用于保存关联参数的对象保存所述关联参数；
21.关联参数更新模块，用于根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；
22.关联参数对比模块，用于通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比；
23.图表更新模块，用于根据对比结果确定是否获取新的图表数据以更新视图。
24.本技术第三方面提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；所述存储器存储有计算机程序；所述处理器执行所述存储器存储的计算机程序，以实现上述第一方面提供的基于react框架的图表联动更新方法。
25.本技术第四方面提供一种机器可读存储介质，所述计算机可读存储介质中存储有计算机指令，所述计算机指令被处理器执行时用于实现上述第一方面提供的基于react框架的图表联动更新方法。
26.本技术第五方面提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述第一方面提供的基于react框架的图表联动更新方法。
27.本技术提供的基于react框架的图表联动更新方法及装置，通过在react项目中创建用于保存关联参数的对象、可复用组件等数据结构，通过创建的对象传递关联参数，通过可复用组件获取关联参数并判断关联参数的变化，能够及时将变化的关联参数传递给后端，以便及时获取图表数据并更新渲染图表。本技术的方法对全局联动和局部联动均适用，一旦主动组件的状态发生变化就会立即生成新的关联参数，可复用组件通过对比关联参数就可发现变化，即可触发图表更新，解决了图表联动时被动组件未能在主动组件的状态变化时及时更新的问题。
28.本技术实施例的其它特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
29.附图是用来提供对本技术实施例的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本技术实施例，但并不构成对本技术实施例的限制。在附图中：
30.图1示意性示出了本技术实施例的基于react框架的图表联动更新方法的流程图；
31.图2示意性示出了本技术实施例的局部联动的流程图；
32.图3示意性示出了本技术实施例的全局联动的流程图；
33.图4示意性示出了本技术实施例的基于react框架的图表联动更新装置的结构框图；
34.图5示意性示出了本技术实施例的计算机设备的内部结构图。
具体实施方式
35.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，应当理解的是，此处所描述的具体实施方式仅用于说明和解释本技术实施例，并不用于限制本技术实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他
实施例，都属于本技术保护的范围。
36.术语解释：
37.图表联动：两个或多个组件建立联系，其中一个组件的维度或者指标改变会驱动其它组件进行相应的改变。联动的组件中驱动其它组件变化的组件称为主动组件，被驱动变化的组件称为被动组件。主动组件可以是筛选组件，也可以是图表组件。被动组件一般为图表组件，图表组件例如折线图、饼图、条形图、烛台图、表格、文本等。
38.筛选组件：具有全局属性的组件，不会被其它组件驱动，常见的筛选组件有下拉选择组件、日期范围组件等非图表组件。
39.全局联动：主动组件为筛选组件，主动组件的维度或者指标改变会驱动所有的非筛选组件进行联动。
40.局部联动：主动组件和被动组件均为图表组件(非筛选组件)，图表组件之间进行的联动。
41.图1示意性示出了本技术实施例的基于react框架的图表联动更新方法的流程图。如图1所示，在本技术一实施例中提供一种基于react框架的图表联动更新方法，包括以下步骤：
42.步骤102，在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数；
43.步骤104，通过react项目中创建的用于保存关联参数的对象保存关联参数；
44.步骤106，在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；
45.步骤108，通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图。
46.本技术实施例提供的基于react框架的图表联动更新方法，通过在react项目中创建用于保存关联参数的对象、可复用组件等数据结构，通过创建的对象传递关联参数，通过可复用组件获取关联参数并判断关联参数的变化，能够及时将变化的关联参数传递给后端，以便及时获取图表数据并更新渲染图表。本技术的方法对全局联动和局部联动均适用，一旦主动组件的状态发生变化就会立即生成新的关联参数，可复用组件通过对比关联参数就可发现变化，即可触发图表更新，解决了图表联动时被动组件未能在主动组件的状态变化时及时更新的问题。
47.应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
48.在一个实施例中，在局部联动的情况下，主动组件和被动组件均为图表组件。上述步骤102中，根据主动组件的维度信息和指标信息组合形成关联参数。维度信息包括组件的
聚合字段或筛选字段，例如图表的横向、纵向、第三维位置坐标等，特定图例的颜、填充、线形等。指标信息包括各个维度下的数据值，例如横向坐标值、纵向坐标值。上述步骤104中，将关联参数赋值给被动组件的配置参数中的从属数据，同时将该关联参数赋值给用于保存关联参数的对象下的对应被动组件的键值。上述步骤106中，在主动组件的维度信息或指标信息发生改变时，根据改变的维度信息和指标信息组合形成新的关联参数，根据新的关联参数对被动组件的配置参数中的从属数据进行重新赋值。上述步骤108中，在可复用组件的生命周期中获取被动组件的配置参数中的从属数据作为第一对比数据，获取用于保存关联参数的对象下的对应被动组件的键值作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据被动组件的配置参数调用对应接口获取新的图表数据以更新视图，同时根据被动组件的配置参数中的从属数据对用于保存关联参数的对象下的对应被动组件的键值进行更新；若对比结果一致，则不进行更新操作。
49.在一个实施例中，主动组件为筛选组件，被动组件为图表组件，对于全局联动的情况，在可复用组件的静态属性中添加对应图表组件的全局过滤属性，将图表组件创建时的配置参数作为对应该图表组件的全局过滤属性的初始值。上述步骤102中，根据主动组件的标识id、维度信息及指标信息组合形成关联参数。需要说明的是，每个组件的标识id是唯一的。上述步骤104中，将react项目中创建的全局过滤数组作为用于保存关联参数的对象，将关联参数推进到全局过滤数组中。上述步骤106中，在主动组件的维度信息或指标信息发生改变时，根据主动组件的标识id、改变的维度信息和指标信息组合形成新的关联参数，根据新的关联参数中的标识id在全局过滤数组中查对应该主动组件的关联参数，将查到的关联参数替换为新的关联参数。上述步骤108中，在可复用组件的生命周期中获取对应被动组件的静态属性值作为第一对比数据，获取全局过滤数组中的对应主动组件的关联参数作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据被动组件的配置参数和全局过滤数组中的对应主动组件的关联参数调用对应接口获取新的图表数据以更新视图，同时将可复用组件中对应被动组件的静态属性值更新为全局过滤数组中的对应主动组件的关联参数；若对比结果一致，则不进行更新操作。
50.以下列举局部联动和全局联动的示范性示例，对本技术实施例的技术方案进行详细说明。
51.在一个局部联动的示例中，首先在react项目中引入一个状态管理插件react-redux，创建一个用于保存关联参数的对象relate，对象relate可以存储在客户端本地。react项目中生成的每个组件(包括筛选组件和图表组件)都有唯一的标识id。创建一个core.js文件作为可复用组件，用于根据不同的配置参数渲染出不同的图表组件。假设组件a和组件b是一对局部联动的联动组件，其中组件a作为主动组件，标识id为ida，组件b作为被动组件，标识id为idb。两个组件建立联动关系时，根据主动组件a的维度和指标组合成一条关联参数，将该关联参数赋值给被动组件b的配置参数中的从属数据dependencedata，同时将该关联参数赋值给对象relate的idb键。
52.如图2所示，当主动组件a的维度或者指标发生改变时，将新的维度和指标组合成一条新的关联参数，将被动组件b的配置参数中的从属数据dependencedata更新为新的关联参数。在可复用组件core.js的生命周期componentdidupdate中获取被动组件b的配置参数中的dependencedata，记录为data1；获取对象relate的idb键，记录为data2。深度比较
data1和data2，如果两值不相等，根据被动组件b的配置参数调用后端接口，获取新的图表数据，调用图表组件的渲染api重新渲染图表组件(更新视图)。同时，将对象relate的idb键更新为被动组件b的配置参数中的dependencedata。如果data1和data2的值相等，则不进行更新操作。
53.在一个全局联动的示例中，首先在react项目中引入一个状态管理插件react-redux，创建一个用于保存关联参数的全局过滤数组globalfilterdata，全局过滤数组globalfilterdata可以存储在服务器端。react项目中生成的每个组件(包括筛选组件和图表组件)都有唯一的标识id。创建一个core.js文件作为可复用组件，用于根据不同的配置参数渲染出不同的图表组件。在可复用组件core.js的静态属性中添加对应图表组件(作为被动组件)的globalfilter属性，globalfilter属性的初始值为该图表组件创建时的配置参数，该配置参数为globalfilterdata。在全局联动时，筛选组件作为主动组件，图表组件作为被动组件。假设筛选组件c的标识id为idc，图表组件d的标识id为idd。创建筛选组件c的时候根据筛选组件c的维度和指标生成一条关联参数，该关联参数是一个包含标识id、维度信息和指标信息的对象，将该关联参数推进到全局过滤数组globalfilterdata中。
54.如图3所示，当筛选组件c的维度或者指标发生改变时，将新的维度和指标组合成一条新的关联参数，通过新的关联参数中的标识id在全局过滤数组globalfilterdata中查标识id为idc的关联参数，将查到的关联参数替换为新的关联参数。在可复用组件core.js的生命周期componentdidupdate中获取对应图表组件d的静态属性globalfilter，记录为data3；获取全局过滤数组globalfilterdata，记录为data4。深度比较data3和data4，如果两值不相等，根据图表组件d的配置参数和全局过滤数组globalfilterdata为参数调用后端接口获取新的数据，调用图表组件的渲染api重新渲染图表组件，同时将可复用组件core.js中对应图表组件d的静态属性值globalfilter更新为globalfilterdata。如果data3和data4的值相等，则不进行更新操作。
55.图4示意性示出了本技术实施例的基于react框架的图表联动更新装置的结构框图。如图4所示，在一个实施例中，提供一种基于react框架的图表联动更新装置400，包括：关联参数生成模块402、关联参数保存模块404、关联参数更新模块406、关联参数对比模块408、图表更新模块410。关联参数生成模块402用于在建立主动组件与被动组件的联动关系时根据主动组件的状态信息生成关联参数，以及在主动组件的状态信息发生改变时生成新的关联参数。关联参数保存模块404用于通过react项目中创建的用于保存关联参数的对象保存所述关联参数。关联参数更新模块406用于根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数。关联参数对比模块408用于通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比。图表更新模块410用于根据对比结果确定是否获取新的图表数据以更新视图。
56.在局部联动的情况下，主动组件和被动组件均为图表组件。关联参数生成模块402根据主动组件的维度信息和指标信息组合形成关联参数。关联参数保存模块404将关联参数赋值给被动组件的配置参数中的从属数据，同时将该关联参数赋值给用于保存关联参数的对象下的对应被动组件的键值。在主动组件的维度信息或指标信息发生改变时，关联参数生成模块402根据改变的维度信息和指标信息组合形成新的关联参数，关联参数更新模
块406根据新的关联参数对被动组件的配置参数中的从属数据进行重新赋值。关联参数对比模块408在可复用组件的生命周期中获取被动组件的配置参数中的从属数据作为第一对比数据，获取用于保存关联参数的对象下的对应被动组件的键值作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，图表更新模块410根据被动组件的配置参数调用对应接口获取新的图表数据以更新视图，同时根据被动组件的配置参数中的从属数据对所述用于保存关联参数的对象下的对应被动组件的键值进行更新；若对比结果一致，则不进行更新操作。
57.在全局联动的情况下，主动组件为筛选组件，被动组件为图表组件。在可复用组件的静态属性中添加对应图表组件的全局过滤属性，将图表组件创建时的配置参数作为对应该图表组件的全局过滤属性的初始值。关联参数生成模块402根据主动组件的标识id、维度信息及指标信息组合形成关联参数。将react项目中创建的全局过滤数组globalfilterdata作为用于保存关联参数的对象，关联参数保存模块404将关联参数推进到全局过滤数组中。在主动组件的维度信息或指标信息发生改变时，关联参数生成模块402根据主动组件的标识id、改变的维度信息和指标信息组合形成新的关联参数，关联参数更新模块406根据新的关联参数中的标识id在所述全局过滤数组中查对应该主动组件的关联参数，将查到的关联参数替换为新的关联参数。关联参数对比模块408在可复用组件的生命周期中获取对应被动组件的静态属性值作为第一对比数据，获取全局过滤数组中的对应主动组件的关联参数作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，图表更新模块410根据被动组件的配置参数和全局过滤数组中的对应主动组件的关联参数调用对应接口获取新的图表数据以更新视图，同时将可复用组件中对应被动组件的静态属性值更新为全局过滤数组中的对应主动组件的关联参数；若对比结果一致，则不进行更新操作。
58.本实施例的图表联动更新装置的具体细节可以参照上述实施例的图表联动更新方法进行理解，本实施例的图表联动更新装置与上述的图表联动更新方法相对于现有技术所具有的优势相同，此处不再赘述。
59.在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器a01、网络接口a02、显示屏a04、输入装置a05和存储器(图中未示出)。其中，该计算机设备的处理器a01用于提供计算和控制能力。该计算机设备的存储器包括内存储器a03和非易失性存储介质a06。该非易失性存储介质a06存储有操作系统b01和计算机程序b02。该内存储器a03为非易失性存储介质a06中的操作系统b01和计算机程序b02的运行提供环境。该计算机设备的网络接口a02用于与外部的终端通过网络连接通信。该计算机程序被处理器a01执行时以实现上述实施例中基于react框架的图表联动更新方法。该计算机设备的显示屏a04可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置a05可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
60.本技术实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行上述实施例中基于react框架的图表联动更新方法的技术方案。计算机可读存储介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、
数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。
61.本技术实施例还提供一种计算机程序产品，该计算机程序产品包括计算机程序，其存储在计算机可读存储介质中，至少一个处理器可以从计算机可读存储介质读取计算机程序，至少一个处理器执行计算机程序时可实现上述实施例中基于react框架的图表联动更新方法的技术方案。所述处理器执行计算机程序至少可以实现以下方法步骤：
62.步骤102，在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数；
63.步骤104，通过react项目中创建的用于保存关联参数的对象保存关联参数；
64.步骤106，在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；
65.步骤108，通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图。
66.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
67.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
68.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
69.以上仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。
技术特征：
1.一种基于react框架的图表联动更新方法，其特征在于，包括：在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数；通过react项目中创建的用于保存关联参数的对象保存所述关联参数；在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图。2.根据权利要求1所述的基于react框架的图表联动更新方法，其特征在于，所述在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数，包括：根据主动组件的维度信息和指标信息组合形成所述关联参数；其中，主动组件和被动组件均为图表组件。3.根据权利要求2所述的基于react框架的图表联动更新方法，其特征在于，所述通过react项目中创建的用于保存关联参数的对象保存所述关联参数，包括：将所述关联参数赋值给被动组件的配置参数中的从属数据，同时将所述关联参数赋值给所述对象下的对应被动组件的键值。4.根据权利要求3所述的基于react框架的图表联动更新方法，其特征在于，所述在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，包括：在主动组件的维度信息或指标信息发生改变时，根据改变的维度信息和指标信息组合形成新的关联参数；根据新的关联参数对被动组件的配置参数中的从属数据进行重新赋值。5.根据权利要求4所述的基于react框架的图表联动更新方法，其特征在于，所述通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图，包括：在可复用组件的生命周期中获取被动组件的配置参数中的从属数据作为第一对比数据，获取所述对象下的对应被动组件的键值作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据被动组件的配置参数调用对应接口获取新的图表数据以更新视图，同时根据被动组件的配置参数中的从属数据对所述对象下的对应被动组件的键值进行更新。6.根据权利要求1所述的基于react框架的图表联动更新方法，其特征在于，所述在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数，包括：在所述可复用组件的静态属性中添加对应图表组件的全局过滤属性，将图表组件创建时的配置参数作为对应该图表组件的全局过滤属性的初始值；根据主动组件的标识id、维度信息及指标信息组合形成所述关联参数；其中，主动组件为筛选组件，被动组件为图表组件。7.根据权利要求6所述的基于react框架的图表联动更新方法，其特征在于，所述通过react项目中创建的用于保存关联参数的对象保存所述关联参数，包括：
将react项目中创建的全局过滤数组作为用于保存关联参数的对象，将所述关联参数推进到全局过滤数组中。8.根据权利要求7所述的基于react框架的图表联动更新方法，其特征在于，所述在主动组件的状态信息发生改变时生成新的关联参数，将所述对象中保存的关联参数替换为新的关联参数，包括：在主动组件的维度信息或指标信息发生改变时，根据主动组件的标识id、改变的维度信息和指标信息组合形成新的关联参数；根据新的关联参数中的标识id在所述全局过滤数组中查对应该主动组件的关联参数，将查到的关联参数替换为新的关联参数。9.根据权利要求8所述的基于react框架的图表联动更新方法，其特征在于，所述通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比，根据对比结果确定是否获取新的图表数据以更新视图，包括：在可复用组件的生命周期中获取对应被动组件的静态属性值作为第一对比数据，获取所述全局过滤数组中的对应主动组件的关联参数作为第二对比数据；将第一对比数据与第二对比数据进行对比，若对比结果不一致，根据所述被动组件的配置参数和所述全局过滤数组中的对应主动组件的关联参数调用对应接口获取新的图表数据以更新视图，同时将可复用组件中对应被动组件的静态属性值更新为所述全局过滤数组中的对应主动组件的关联参数。10.一种基于react框架的图表联动更新装置，其特征在于，包括：关联参数生成模块，用于在建立主动组件与被动组件的联动关系时根据主动组件的状态信息生成关联参数，以及在主动组件的状态信息发生改变时生成新的关联参数；关联参数保存模块，用于通过react项目中创建的用于保存关联参数的对象保存所述关联参数；关联参数更新模块，用于根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；关联参数对比模块，用于通过react项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将被动组件的配置参数与所述对象中保存的关联参数进行对比；图表更新模块，用于根据对比结果确定是否获取新的图表数据以更新视图。11.一种计算机设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；所述存储器存储有计算机程序；所述处理器执行所述存储器存储的计算机程序，以实现如权利要求1至9中任一项所述的基于react框架的图表联动更新方法。12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机指令，所述计算机指令被处理器执行时用于实现如权利要求1至9中任一项所述的基于react框架的图表联动更新方法。13.一种计算机程序产品，其特征在于，包括计算机程序，该计算机程序被处理器执行
时实现如权利要求1至9中任一项所述的基于react框架的图表联动更新方法。
技术总结
本申请涉及数据可视化技术领域，提供一种基于React框架的图表联动更新方法、装置及计算机设备。所述方法包括：在建立主动组件与被动组件的联动关系时，根据主动组件的状态信息生成关联参数；通过React项目中创建的对象保存关联参数；在主动组件的状态信息发生改变时生成新的关联参数，根据新的关联参数对被动组件的配置参数进行更新，或者将所述对象中保存的关联参数替换为新的关联参数；通过React项目中创建的可复用组件获取被动组件的配置参数，获取所述对象中保存的关联参数，将两者进行对比，根据对比结果确定是否获取新的图表数据以更新视图。本申请对全局联动和局部联动均适用，解决了图表联动时被动组件未能及时更新的问题。的问题。的问题。
