基于数据可视化场景下实现可视化组件联动的方法及系统与流程

本发明涉及计算机软件开发领域，尤其涉及一种基于数据可视化场景下实现可视化组件联动的方法及系统。

背景技术：

1、数据可视化旨在借助图形化手段，以一种更直观、高效的方式呈现数据，在数据可视化场景中，最小组成单元是可视化组件，通过可视化组件之间的联动来实时刷新数据，以此来展示整体的数据变化以及趋势预测。然而，现有的可视化组件联动方案中，需要针对不同的可视化组件单独编写代码，通过监听组件的前端事件触发相应操作，然后编写后台数据服务，通过调用后台服务拿到新的数据，查找要渲染的可视化组件，最后重新渲染整个可视化组件。

2、目前方案主要有两方面的缺陷：一方面，需要处理组件的前端事件，编写后台数据服务，调用后台数据服务，渲染组件，在整个过程中，涉及到前端开发，后台开发、可视化组件渲染等专业的开发技术。对普通用户来说，学习成本和实现成本都极高。

3、另一方面，在实现可视化组件实时刷新数据时，通过调用后台服务拿到新数据，重新渲染组件过程中，组件会先销毁再创建，导致可视化组件的重新渲染效率低下。

技术实现思路

1、针对现有技术存在的问题，本发明的目的在于实现了通过可视化配置方式实现在数据可视化场景下可视化组件之间的数据联动；同时改进了可视化组件的渲染方式，无需对可视化组件进行创建销毁，仅渲染可视区域部分，极大提高了可视化组件渲染效率，提升了可视化场景下的使用体验。

2、为实现上述目的，本发明提供一种基于数据可视化场景下实现可视化组件联动的方法，所述方法包括以下步骤：

3、步骤s10，在触发联动的可视化组件上配置联动条件和回调变量；

4、步骤s20，在接收联动的可视化组件上配置使用的回调变量；

5、步骤s30，建立触发联动的可视化组件和接收联动的可视化组件之间的联动关系；

6、步骤s40， 改进可视化组件的渲染方式，实现联动时仅渲染可视化组件的可视区域；

7、步骤s50，在触发联动的可视化组件触发联动条件时，通知接收联动的可视化组件调用渲染方法。

8、进一步，在步骤s10中，选择触发联动的可视化组件，在触发联动的可视化组件上配置联动条件和回调变量；

9、配置联动条件和回调变量的详细信息使用标准json语法表示如下：

10、{

11、    "condition": [], // 联动条件

12、    "variable": [],    // 回调变量

13、}。

14、进一步，在步骤s20中，选择接收联动的可视化组件，在接收联动的可视化组件上配置使用的回调变量；

15、配置接收联动的可视化组件使用回调变量的详细信息使用标准json语法表示如下：

16、{

17、    "usevariable": [],    // 使用的回调变量

18、}。

19、进一步，在步骤s30中，建立触发联动的可视化组件和接收联动的可视化组件之间的联动关系；

20、建立完成的联动关系使用标准的json语法表示如下：

21、{

22、    "source": [], // 回调变量的来源

23、    "reference": [], // 回调变量被引用

24、"link": [], // 联动关系

25、}

26、通过建立联动关系，在触发联动的可视化组件触发了联动条件后，可以基于所述联动关系，将消息通知给接收联动的可视化组件。

27、进一步，在步骤s40中，包括以下子步骤：

28、s401. 拆分可视化组件的显示单元；

29、s402. 根据显示单元的在组件中的表现确定需要渲染的显示单元；具体地，依据显示单元在组件中的表现将显示单元拆分为动态显示单元和静态显示单元，其中跟随数据变化动态渲染的显示单元为动态显示单元，动态显示单元为要需要进行渲染的显示单元，而静态显示单元为不需要进行重新渲染的显示单元；

30、s403. 计算每个需要渲染的显示单元在可视化组件视口的可见性；通过显示单元的坐标和视口范围坐标计算，当显示单元的坐标出现在可视区域内部，即可确定显示单元和视口范围存在范围重叠，那么显示单元在可视区域内是可见的，否则显示单元不可见，对于在视口完全在可视区域内部的显示单元则渲染整个显示单元，对于在可视区域只出现部分的显示单元，只渲染显示单元的可视部分，对于未出现在可视区域的显示单元，则不进行渲染。

31、进一步，计算每个需要渲染的显示单元在可视化组件视口的可见性的流程如下：

32、使用 element.getboundingclientrect 方法返回显示单元的大小及其相对于组件视口的位置，可以得到当前显示单元相对组件可视区域的坐标：

33、const { top, left, bottom, right } = el.getboundingclientrect();

34、设定当前显示单元上下左右四个边界的坐标分别为top，bottom，left，right；得到显示单元的坐标信息后，获取组件视口的宽高来确定显示单元是否跟视口范围存在区域相交：

35、可视区域的横坐标范围是0 ~ innerwidth，纵坐标范围是0 ~ innerheight，

36、先判断显示单元在可视区域中是全部显示还是部分显示，当显示单元的top，bottom，left，right坐标全部在可视区域横纵坐标范围之内，显示单元为全部显示，判断条件如下：

37、top >= 0 && left >= 0 && bottom <= innerheight && right <= innerwidth

38、当计算结果为true时，显示单元在可视区域中全部显示，直接渲染整个显示单元；

39、当判断结果为false时，显示单元在可视区域中部分显示，接着判断显示单元在可视区域中的可视部分，仅对可视部分进行渲染。

40、进一步，在步骤s50中，在触发联动的可视化组件触发了联动条件后，根据触发联动和接收联动的可视化组件之间建立的联动关系，通知接收联动的可视化组件根据回调变量的值调用后台api服务重新获取实时数据，最后调用步骤s40中的渲染方法，对接收联动的组件进行可视区域的重新渲染。

41、另一方面，本发明提供一种基于数据可视化场景下实现可视化组件联动的系统，所述系统用于实现根据本发明所述的基于数据可视化场景下实现可视化组件联动的方法。

42、本发明的有益效果在于，所述基于数据可视化场景下实现可视化组件联动的方法能够降低可视化场景下可视化组件联动的实现难度，开发者无需学习专业的前后台开发技术，也无需编写代码，仅通过在页面上简单的可视化配置即可实现可视化组件之间的联动功能；同时，本发明在可视化组件实时刷新数据过程中，采用仅渲染组件可视区域的方式，无需重新渲染整个可视化组件，极大提高了可视化组件数据刷新时的渲染效率。