CN113127784A - 大屏数据可视化显示方法、装置、存储介质和计算机设备 - Google Patents

Abstract

本申请涉及数据可视化技术领域，揭示了一种大屏数据可视化显示方法、装置、存储介质和计算机设备，方法包括：当监听到浏览器视口发生变化时，获取浏览器视口的变化数据及容器参数；根据浏览器视口的变化数据及容器参数计算画布的画布缩放比例；根据画布缩放比例对浏览器容器进行重新渲染；获取与容器相关的目标组件，将画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；获取大屏数据，将大屏数据导入重新渲染后的容器及各个目标组件中，生成可视化图形，将可视化图形在界面进行显示。本申请实现了根据浏览器视口的变化情况自动对容器及各个目标组件进行重新渲染，以调整显示比例及参数，保证显示内容不变形，提高显示效果。

Description

大屏数据可视化显示方法、装置、存储介质和计算机设备

技术领域

本申请涉及到数据可视化技术领域，特别是涉及到一种大屏数据可视化显示方法、装置、存储介质和计算机设备。

背景技术

大屏数据可视化是终端应用当中比较广泛的一个领域。数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。无论在零售、物流、电力、水利、环保、还是交通领域，通过交互式实时数据可视化视屏墙来帮助用户发现、诊断问题，越来越成为大数据解决方案中不可或缺的一环。

与目前流行的HTML5响应式开发不同，HTML5响应式开发，是在设备视口允许滚动的情况下做适配，当横向或纵向内容无法容纳时，允许组件以不同的形态和位置展示，或者出现滚动条以容纳完整内容。

而大屏数据可视化最大的不同，是需要保证内容的完整性，且不允许组件发生形态和位置变化，不允许内容的溢出，要求在单一屏幕下展示所有数据。

但对于在大屏幕上的展示，需要依赖可视化技术的支持，对于单一屏幕需要容纳尽可能多的内容，而又要求不影响页面整体布局，总会遇到浏览器视口适配的问题，使显示内容出现变形，显示效果较差。

发明内容

本申请的主要目的为提供一种大屏数据可视化显示方法、装置、存储介质和计算机设备，以自动适配终端的浏览器视口，确保显示内容不变形，提高显示效果。

为了实现上述发明目的，本申请提出一种大屏数据可视化显示方法，包括：

当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

根据所述画布缩放比例对所述浏览器容器进行重新渲染；

获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

进一步地，所述目标组件包括图表组件，所述获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件的步骤之后，还包括：

获取所述图表组件预置的图表组件参数；

根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数，得到目标图表组件参数；所述目标图表组件参数包括进场动画、图表组件缩放比例、组件间相对关系及位置信息；

根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染，并获取与所述图表组件相关的组件，将所述图表组件的目标图表组件参数广播至与所述图表组件相关的组件完成重新渲染。

优选地，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，包括：

根据所述画布缩放比例调整所述图表组件的宽度、高度和图表组件缩放比例；

将调整后的所述图表组件的宽度、高度和图表组件缩放比例作为所述图表组件参数；

所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，包括：

按照所述图表组件缩放比例对所述图表组件的宽度和高度进行缩小或放大，并将超过所述图表组件的宽度和高度的内容进行裁剪，完成所述图表组件的重新渲染。

优选地，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，包括：

根据所述画布缩放比例调整所述图表组件的宽度、高度及宽度缩放比例；

将调整后的所述图表组件的宽度、高度及宽度缩放比例作为所述图表组件参数；

所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，包括：

按照所述宽度缩放比例对所述图表组件的宽度进行缩小或放大，并保持所述图表组件的高度不变，完成所述图表组件的重新渲染。

进一步地，所述将所述画布缩放比例广播至各个目标组件的步骤之后，还包括：

监听所述各个目标组件的广播消息；其中，所述广播消息携带有所述目标组件的目标组件参数；

当监听到至少一个所述目标组件的广播消息时，从所述广播消息中提取所述目标组件的目标组件参数；

根据所述目标组件的目标组件参数重新渲染所述容器。

进一步地，所述将所述画布缩放比例广播至各个目标组件的步骤之前，还包括：

判断所述画布缩放比例是否为预设的目标缩放比例；

若否，则执行将所述画布缩放比例广播至各个目标组件的步骤；

若是，则按照所述画布缩放比例对各个目标组件进行重新渲染。

优选地，所述将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示的步骤，包括：

对所述大屏数据进行平面化处理；

将平面化处理后的所述大屏数据导入重新渲染后的所述容器及各个目标组件中，得到可视化图形；

将所述可视化图形按照预定的风格在界面进行显示。

本申请还提供一种大屏数据可视化显示装置，包括：

监听模块，用于当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

计算模块，用于根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

重新渲染模块，用于根据所述画布缩放比例对所述浏览器容器进行重新渲染；

广播模块，用于获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

显示模块，用于获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

本申请还提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。

本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。

本申请的大屏数据可视化显示方法、装置、存储介质和计算机设备，当监听到浏览器视口发生变化时，获取浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；根据浏览器视口的变化数据及容器参数计算画布的缩放比例，得到画布缩放比例；根据画布缩放比例对浏览器容器进行重新渲染；获取与容器相关的组件，得到目标组件，将画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；获取大屏数据，将大屏数据导入重新渲染后的容器及各个目标组件中，生成可视化图形，将可视化图形在界面进行显示，从而根据浏览器视口的变化情况，如终端分辨率的改变，自动对容器及各个目标组件进行重新渲染，以调整显示比例及参数，保证显示内容不变形，提高显示效果；此外，对于UI设计师来说，只需要使用通用的画布尺寸大小，输出一套设计方案，即可适配于各种显示器，且保证显示内容不变形；而对于开发者来说，只需要根据UI设计师的设计方案进行视觉还原即可，提高了开发效率。在实际应用当中，开发者也无需关心程序在什么显示器上进行展示，只需要在开发时配置好相关参数，即可实现一个程序在多种分辨率上正常展示，解决了浏览器视口适配的难题。

附图说明

图1为本申请一实施例的大屏数据可视化显示方法的流程示意图；

图2为本申请一实施例的大屏数据可视化显示装置的结构示意框图；

图3为本申请一实施例的计算机设备的结构示意框图。

本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

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

本申请提出一种大屏数据可视化显示方法，用于解决浏览器视口适配时，出现的显示内容变形，显示效果较差的问题，在一实施例中，如图1所示，该大屏数据可视化显示方法包括：

S1、当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

S2、根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

S3、根据所述画布缩放比例对所述浏览器容器进行重新渲染；

S4、获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

S5、获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

如上述步骤S1所述，浏览器是电脑、手机和智能电视上实现网页浏览等操作的主要工具。随着硬件设备的更新换代，浏览器越来越多地工作在高清晰大面积的显示器上，实现大屏幕发展趋势。浏览器视口是用于显示网页内容的显示区域，可通过设置浏览器视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在浏览器上，以保证网页在手机上看起来更像在桌面浏览器中的样子。浏览器界面的基本组成单位是UI元素，容器是用于容纳多个子元素的组件，容器可以添加其他组件形成复合组件，比如在panel里可以添加button，其本身也是一种组件。

本步骤的终端实时监听浏览器视口的变化情况，获取浏览器视口的变化数据，并从数据库中获取容器预置的容器参数。其中，变化情况可包括视口的放大、缩小或终端分辨率的改变等等。变化数据可包括视口的放大比例、缩小比例、终端分辨率等等。容器参数包括元素的数量、高度、宽度及位置信息等等。

如上述步骤S2所述，每个项目开发前都会先确定画布大小，如1920*1080px，以确定在有限的画布中，根据浏览器布局来展示响应的内容。根据容器大小与浏览器尺寸大小以计算响应的缩放比例，从而保证在不同的画布尺寸下，浏览器能完整地展示画布内容。比如：如果希望展示3840*2160px的画布内容，在2k显示器下，将完整展示内容；在1080p的显示器下，则需要将乘以压缩系数：横向压缩系数scaleX＝0.5，纵向压缩系数caleY＝0.5，即将画布内容缩小0.5倍；在4k显示器下，则横向压缩系数scaleX＝2，纵向压缩系数scaleY＝2，及将画布内容放大两倍；以上情况仅限于当画布大小与显示器大小都为16：9的情况下，画布的缩放才不会导致内容的变形。当项目中出现画布大小与实际演示显示器大小严重不匹配时，当前方案显示效果严重影响体验。例如，在1080p的画布下进行开发，在投影到如公安局的超大屏幕上，显示器分辨率可能为12000*6000，画布内容必将出现严重变形。

因此，本实施例在监听到浏览器视口发生变化后，如放大、缩小或切换至不同分辨率的显示设备时，先对容器进行初始化处理，获取预先配置的容器参数，并确定画布大小，根据浏览器视口的变化数据及容器参数计算画布的缩放比例作为画布缩放比例，以重新确定画布的缩放比例，从而避免在不同分辨率的显示设备上显示内容发生变形。例如，当显示设备的分辨率由16：9变成2:1时，则浏览器视口的高度增加了，此时需要对容器的高度、元素的位置或数量进行调整，以避免在该分辨率的显示设备上显示内容被纵向拉长，影响观看体验。

如上述步骤S3所述，本步骤按照该画布缩放比例对容器进行重新渲染，如按照该画布缩放比例对容器的高度，内部元素的位置或数量进行重新布局。

如上述步骤S4所述，在容器重新渲染后，进一步获取与容器直接相关或间接相关的组件，得到目标组件。其中，与容器直接相关或间接相关的组件指的是容器的容器参数在发生变化之后，这一变化会直接或间接地影响到其他组件参数的组件，如在改变画布的画布缩放比例时，与容器直接相关或间接相关的目标组件的显示比例也需要进行调整，因此需要将画布缩放比例广播至各个目标组件，以使各个目标组件根据该画布缩放比例调整缩放比例及其他参数，进行重新渲染。

如上述步骤S5所述，当容器及各个目标组件都完成重新渲染后，则获取可视化图形数据的大屏数据，将可视化图形数据导入渲染后的容器及各个目标组件中，生成可视化图形，并将生成的可视化图形在显示设备的界面进行显示，该可视化图形即为适应浏览器视口的变化的图形，从而自动适应浏览器视口的变化情况，自动调整容器及各个目标组件的显示比例及参数，保证显示内容不变形，解决了传统响应式显示内容被压缩变形的技术问题。其中，所述大屏数据为屏幕尺寸大于预设值或显示设备的分辨率大于预设分辨率相对应的可视化图形数据。

本申请的大屏数据可视化显示方法，当监听到浏览器视口发生变化时，获取浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；根据浏览器视口的变化数据及容器参数计算画布的缩放比例，得到画布缩放比例；根据画布缩放比例对浏览器容器进行重新渲染；获取与容器相关的组件，得到目标组件，将画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；获取大屏数据，将大屏数据导入重新渲染后的容器及各个目标组件中，生成可视化图形，将可视化图形在界面进行显示，从而根据浏览器视口的变化情况，如终端分辨率的改变，自动对容器及各个目标组件进行重新渲染，以调整显示比例及参数，保证显示内容不变形，提高显示效果；此外，对于UI设计师来说，只需要使用通用的画布尺寸大小，输出一套设计方案，即可适配于各种显示器，且保证显示内容不变形；而对于开发者来说，只需要根据UI设计师的设计方案进行视觉还原即可，提高了开发效率。在实际应用当中，开发者也无需关心程序在什么显示器上进行展示，只需要在开发时配置好相关参数，即可实现一个程序在多种分辨率上正常展示，解决了浏览器视口适配的难题。

在一实施例中，所述目标组件包括图表组件，在步骤S4中，所述获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件的步骤之后，还可包括：

D5、获取所述图表组件预置的图表组件参数；

D6、根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数，得到目标图表组件参数；所述目标图表组件参数包括进场动画、图表组件缩放比例、组件间相对关系及位置信息；

D7、根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染，并获取与所述图表组件相关的组件，将所述图表组件的目标图表组件参数广播至与所述图表组件相关的组件完成重新渲染。

如上述步骤D5所述，可从预先构建的列表中查询与容器相关的图表组件，根据查询结果从数据库中提取该图表组件及配置在该图表组件的图表组件参数。其中，所述图表组件参数可包括图表类型、图表尺寸、图表位置、进场方式、图表缩放比例等等信息。

如上述步骤D6所述，当监听到容器或相关组件发生变化时，接收广播的画布缩放比例，根据画布缩放比例及图表组件参数重新计算图表组件的图表组件参数，如基于画布缩放比例调整目标图表组件的位置、尺寸及缩放比例，并生成新的目标图表组件参数。

如上述步骤D7所述，本步骤根据目标图表组件参数对图表组件进行重新渲染，以调整图表组件的位置、尺寸及缩放比例等，并获取与目标图表组件参数相关的其他组件，将目标图表组件参数广播至其他组件，以使其他组件根据目标图表组件参数进行重新渲染，循环往复，直至各个组件都完成重新渲染。

本实施例的容器及组件由于使用广播的方式传递其属性，在任一组件的参数发生改变时，对应调整与其相关的其他组件的参数，从而通过监听浏览器视口的变化情况，自动对容器及各个目标组件进行重新渲染，以实时调整显示比例及参数，保证显示内容不变形，提高显示效果。

在一实施例中，在步骤D6中，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，可具体包括：

D61、根据所述画布缩放比例调整所述图表组件的宽度、高度和图表组件缩放比例；

D62、将调整后的所述图表组件的宽度、高度和图表组件缩放比例作为所述图表组件参数；

此时，在步骤D7中，所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，可具体包括：

D71、按照所述图表组件缩放比例对所述图表组件的宽度和高度进行缩小或放大，并将超过所述图表组件的宽度和高度的内容进行裁剪，完成所述图表组件的重新渲染。

因考虑到图表组件在不同显示设备上的位置和作用不同，需要针对图表组件做单独的缩放适配，以保证图表组件的图形内容不会变形。

具体的，应用在地图上时，如上述步骤D61所述，可将图表组件的缩放比例跟随画布的画布缩放比例，自动改变图表组件的宽度、高度及图表组件缩放比例，即根据画布缩放比例对应调整图表组件的宽度、高度和图表组件缩放比例，以在画布大小发生改变后，自动调整图表组件的图表组件参数。

如上述步骤D62所述，在调整图表组件的宽度、高度和图表组件缩放比例之后，本步骤可将调整后的图表组件的宽度、高度和图表组件缩放比例直接作为图表组件参数。

如上述步骤D71所述，本步骤对超过所述宽度和高度的图形内容进行裁剪，但图形内容不会变形，使显示的大小不依赖图表组件缩放比例，而是通过改变宽高来适配，以重点显示地图中的关键区域。

在另一实施例中，在步骤D6中，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，可具体包括：

C61、根据所述画布缩放比例调整所述图表组件的宽度、高度及宽度缩放比例；

C62、将调整后的所述图表组件的宽度、高度及宽度缩放比例作为所述图表组件参数；

此时，在步骤D7中，所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，可具体包括：

C71、按照所述宽度缩放比例对所述图表组件的宽度进行缩小或放大，并保持所述图表组件的高度不变，完成所述图表组件的重新渲染。

如上述步骤C61所述，可将图表组件的宽度缩放比例跟随画布的画布缩放比例，自动改变图表组件的宽度、高度及宽度缩放比例，即根据画布缩放比例对应调整图表组件的宽度、高度和宽度缩放比例，但保持图表组件的高度缩放比例不变，以在画布大小发生改变后，自动调整图表组件的图表组件参数。

如上述步骤C62所述，在调整图表组件的宽度、高度和宽度缩放比例之后，本步骤可将调整后的图表组件的宽度、高度和宽度缩放比例直接作为图表组件参数。

如上述步骤C71所述，本步骤按照宽度缩放比例对图表组件的宽度进行缩小或放大，并保持图表组件的高度不变，完成图表组件的重新渲染，从而通过仅仅改变宽度来适配浏览器视口的变化，以避免图表组件在纵向方向上的内容无法全部显示。

在另一些实施例中，渲染的方式还可包括以下几种：

可将图表组件的缩放比例跟随容器的容器缩放比例，不改变图表组件的项目的宽度、高度，不改变纵向缩放比例，但会自动改变横向缩放比例，确保内容不会变形，从而通过保持纵向缩放比例不变，通过调整横向缩放比例的方式来保持内容不变形；

可将图表组件的缩放比例跟随容器的容器缩放比例，不改变图表组件的项目的宽度、高度，不改变横向缩放比例，但会自动改变纵向缩放比例，确保内容不会变形，从而还可通过保持横向缩放比例不变，通过调整纵向缩放比例的方式来保持内容不变形；

可将图表组件的缩放比例跟随容器的容器缩放比例，宽度相对固定，高度自动缩放。当画布横向缩放比例或画布纵向缩放比例大于1时，自动改变宽度、横向缩放比例；当画布横向缩放比例或画布纵向缩放比例小于1时，自动改变纵向缩放比例，保证内容不会变形；

可将图表组件的缩放比例跟随容器的容器缩放比例，高度相对固定，宽度自动缩放。当画布横向缩放比例或画布纵向缩放比例大于1时，自动改变横向缩放比例；当画布横向缩放比例或画布纵向缩放比例小于1时，自动改变高度及纵向缩放比例，保证内容不会变形。

在一实施例中，在步骤S5中，所述将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示的步骤，可具体包括：

S51、对所述大屏数据进行平面化处理；

S52、将平面化处理后的所述大屏数据导入重新渲染后的所述容器及各个目标组件中，得到可视化图形；

S53、将所述可视化图形按照预定的风格在界面进行显示。

在本实施例中，各类可视化图形数据的大屏数据的定义不同，格式不同，使用时需要对可视化图形数据的名称和用法进行统一规范，通过对可视化图形数据定义参数的统一，能够实现参数的标准化，以方便后续的统一封装处理。

因此，如上述步骤S51所述，本步骤可对各种可视化图像要求的数组、矩阵等多种大屏数据格式进行统一采用平面化处理，形成统一数据格式或相同维度的大屏数据。

如上述步骤S52所述，将平面化处理后的可视化数据导入所述渲染后的容器及各个目标组件中，得到可视化图形，例如可以对可视化图形的颜色进行动态展示，规范所有参数定义后，可以对所有可视化图形的风格还可进行统一的控制。

如上述步骤S53所述，本步骤将可视化图形按照预定的风格在界面进行显示，如将可视化图形在界面上显示成统一的颜色、字样等风格类型，提高了用户体验。

在一实施例中，在步骤S4中，所述将所述画布缩放比例广播至各个目标组件的步骤之前，还可包括：

判断所述画布缩放比例是否为预设的目标缩放比例；

若否，则执行将所述画布缩放比例广播至各个目标组件的步骤；

若是，则按照所述画布缩放比例对各个目标组件进行重新渲染。

在本实施例中，在计算得到画布缩放比例之后，进一步判断画布缩放比例是否为目标缩放比例，该目标缩放比例一般为16：9，当然，用户还可根据实际情况进行自定义。

当所述画布缩放比例为预设的目标缩放比例时，则表明容器及各个目标组件按照目标缩放比例直接缩小后，生成的可视化图形的内容不会发生变形，因此可对容器及各个目标组件直接按照该目标缩放比例进行渲染即可，如在2k显示器下，将完整展示内容，在1080p的显示器下，则需要将乘以压缩系数：横向scaleX＝0.5，纵向caleY＝0.5，即将画布内容缩小0.5倍。

当所述画布缩放比例不是预设的目标缩放比例时，则无法按照该画布缩放比例对容器及各个目标组件直接渲染，需要将画布缩放比例广播至各个目标组件，以使各个目标组件的组件参数按照所述画布缩放比例进行调整，实现容器及组件以广播的方式传递其属性，自动适应浏览器视口的变化情况，自动调整容器及各个目标组件的显示比例及参数，保证显示内容不变形。

在一实施例中，在步骤S4中，所述将所述画布缩放比例广播至各个目标组件的步骤之后，还可包括：

监听所述各个目标组件的广播消息；其中，所述广播消息携带有所述目标组件的目标组件参数；

当监听到至少一个所述目标组件的广播消息时，从所述广播消息中提取所述目标组件的目标组件参数；

根据所述目标组件的目标组件参数重新渲染所述容器。

在本实施例中，当设置了关系的图表组件，每当监听到至少一个相关组件的广播消息时，都会重新渲染当前容器，以确保两个组件之间的相对关系保持不变，从而以广播的方式传递其属性，进行自动重新渲染。

其中，两个组件之间的相对关系可包括：当前图表组件位于目标组件上方、下方、左方或右方，还可以是当前图表组件左边界与目标组件左边界、右边界、上边界或下边界对齐。

参照图2，本申请实施例中还提供一种大屏数据可视化显示装置，包括：

监听模块1，用于当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

计算模块2，用于根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

重新渲染模块3，用于根据所述画布缩放比例对所述浏览器容器进行重新渲染；

广播模块4，用于获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

显示模块5，用于获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

浏览器是电脑、手机和智能电视上实现网页浏览等操作的主要工具。随着硬件设备的更新换代，浏览器越来越多地工作在高清晰大面积的显示器上，实现大屏幕发展趋势。浏览器视口是用于显示网页内容的显示区域，可通过设置浏览器视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在浏览器上，以保证网页在手机上看起来更像在桌面浏览器中的样子。浏览器界面的基本组成单位是UI元素，容器是用于容纳多个子元素的组件，容器可以添加其他组件形成复合组件，比如在panel里可以添加button，其本身也是一种组件。

此外，终端可实时监听浏览器视口的变化情况，获取浏览器视口的变化数据，并从数据库中获取容器预置的容器参数。其中，变化情况可包括视口的放大、缩小或终端分辨率的改变等等。变化数据可包括视口的放大比例、缩小比例、终端分辨率等等。容器参数包括元素的数量、高度、宽度及位置信息等等。

每个项目开发前都会先确定画布大小，如1920*1080px，以确定在有限的画布中，根据浏览器布局来展示响应的内容。根据容器大小与浏览器尺寸大小以计算响应的缩放比例，从而保证在不同的画布尺寸下，浏览器能完整地展示画布内容。比如：如果希望展示3840*2160px的画布内容，在2k显示器下，将完整展示内容；在1080p的显示器下，则需要将乘以压缩系数：横向压缩系数scaleX＝0.5，纵向压缩系数caleY＝0.5，即将画布内容缩小0.5倍；在4k显示器下，则横向压缩系数scaleX＝2，纵向压缩系数scaleY＝2，及将画布内容放大两倍；以上情况仅限于当画布大小与显示器大小都为16：9的情况下，画布的缩放才不会导致内容的变形。当项目中出现画布大小与实际演示显示器大小严重不匹配时，当前方案显示效果严重影响体验。例如，在1080p的画布下进行开发，在投影到如公安局的超大屏幕上，显示器分辨率可能为12000*6000，画布内容必将出现严重变形。

因此，本实施例在监听到浏览器视口发生变化后，如放大、缩小或切换至不同分辨率的显示设备时，先对容器进行初始化处理，获取预先配置的容器参数，并确定画布大小，根据浏览器视口的变化数据及容器参数计算画布的缩放比例作为画布缩放比例，以重新确定画布的缩放比例，从而避免在不同分辨率的显示设备上显示内容发生变形。例如，当显示设备的分辨率由16：9变成2:1时，则浏览器视口的高度增加了，此时需要对容器的高度、元素的位置或数量进行调整，以避免在该分辨率的显示设备上显示内容被纵向拉长，影响观看体验。

在对容器进行渲染时，可按照该画布缩放比例对容器进行重新渲染，如按照该画布缩放比例对容器的高度，内部元素的位置或数量进行重新布局。

在容器重新渲染后，进一步获取与容器直接相关或间接相关的组件，得到目标组件。其中，与容器直接相关或间接相关的组件指的是容器的容器参数在发生变化之后，这一变化会直接或间接地影响到其他组件参数的组件，如在改变画布的画布缩放比例时，与容器直接相关或间接相关的目标组件的显示比例也需要进行调整，因此需要将画布缩放比例广播至各个目标组件，以使各个目标组件根据该画布缩放比例调整缩放比例及其他参数，进行重新渲染。

当容器及各个目标组件都完成重新渲染后，则获取可视化图形数据的大屏数据，将可视化图形数据导入渲染后的容器及各个目标组件中，生成可视化图形，并将生成的可视化图形在显示设备的界面进行显示，该可视化图形即为适应浏览器视口的变化的图形，从而自动适应浏览器视口的变化情况，自动调整容器及各个目标组件的显示比例及参数，保证显示内容不变形，解决了传统响应式显示内容被压缩变形的技术问题。其中，所述大屏数据为屏幕尺寸大于预设值或显示设备的分辨率大于预设分辨率相对应的可视化图形数据。

如上所述，可以理解地，本申请中提出的所述大屏数据可视化显示装置的各组成部分可以实现如上所述大屏数据可视化显示方法任一项的功能，具体结构不再赘述。

参照图3，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过***总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***、计算机程序和数据库。该内存器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种大屏数据可视化显示方法。

上述处理器执行上述的大屏数据可视化显示方法，包括：

当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

根据所述画布缩放比例对所述浏览器容器进行重新渲染；

获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种大屏数据可视化显示方法，包括步骤：

当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

根据所述画布缩放比例对所述浏览器容器进行重新渲染；

获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

综上所述，本申请的最大有益效果在于：

本申请的大屏数据可视化显示方法，当监听到浏览器视口发生变化时，获取浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；根据浏览器视口的变化数据及容器参数计算画布的缩放比例，得到画布缩放比例；根据画布缩放比例对浏览器容器进行重新渲染；获取与容器相关的组件，得到目标组件，将画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；获取大屏数据，将大屏数据导入重新渲染后的容器及各个目标组件中，生成可视化图形，将可视化图形在界面进行显示，从而根据浏览器视口的变化情况，如终端分辨率的改变，自动对容器及各个目标组件进行重新渲染，以调整显示比例及参数，保证显示内容不变形，提高显示效果；此外，对于UI设计师来说，只需要使用通用的画布尺寸大小，输出一套设计方案，即可适配于各种显示器，且保证显示内容不变形；而对于开发者来说，只需要根据UI设计师的设计方案进行视觉还原即可，提高了开发效率。在实际应用当中，开发者也无需关心程序在什么显示器上进行展示，只需要在开发时配置好相关参数，即可实现一个程序在多种分辨率上正常展示，解决了浏览器视口适配的难题。

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

以上所述仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (10)

1.一种大屏数据可视化显示方法，其特征在于，包括：

当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

根据所述画布缩放比例对所述浏览器容器进行重新渲染；

获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

2.根据权利要求1所述的方法，其特征在于，所述目标组件包括图表组件，所述获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件的步骤之后，还包括：

获取所述图表组件预置的图表组件参数；

根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数，得到目标图表组件参数；所述目标图表组件参数包括进场动画、图表组件缩放比例、组件间相对关系及位置信息；

根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染，并获取与所述图表组件相关的组件，将所述图表组件的目标图表组件参数广播至与所述图表组件相关的组件完成重新渲染。

3.根据权利要求2所述的方法，其特征在于，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，包括：

根据所述画布缩放比例调整所述图表组件的宽度、高度和图表组件缩放比例；

将调整后的所述图表组件的宽度、高度和图表组件缩放比例作为所述图表组件参数；

所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，包括：

按照所述图表组件缩放比例对所述图表组件的宽度和高度进行缩小或放大，并将超过所述图表组件的宽度和高度的内容进行裁剪，完成所述图表组件的重新渲染。

4.根据权利要求2所述的方法，其特征在于，所述根据所述画布缩放比例及图表组件参数重新确定所述图表组件的图表组件参数的步骤，包括：

根据所述画布缩放比例调整所述图表组件的宽度、高度及宽度缩放比例；

将调整后的所述图表组件的宽度、高度及宽度缩放比例作为所述图表组件参数；

所述根据所述图表组件的目标图表组件参数完成所述图表组件的重新渲染的步骤，包括：

按照所述宽度缩放比例对所述图表组件的宽度进行缩小或放大，并保持所述图表组件的高度不变，完成所述图表组件的重新渲染。

5.根据权利要求1所述的方法，其特征在于，所述将所述画布缩放比例广播至各个目标组件的步骤之后，还包括：

监听所述各个目标组件的广播消息；其中，所述广播消息携带有所述目标组件的目标组件参数；

当监听到至少一个所述目标组件的广播消息时，从所述广播消息中提取所述目标组件的目标组件参数；

根据所述目标组件的目标组件参数重新渲染所述容器。

6.根据权利要求1所述的方法，其特征在于，所述将所述画布缩放比例广播至各个目标组件的步骤之前，还包括：

判断所述画布缩放比例是否为预设的目标缩放比例；

若否，则执行将所述画布缩放比例广播至各个目标组件的步骤；

若是，则按照所述画布缩放比例对各个目标组件进行重新渲染。

7.根据权利要求1所述的方法，其特征在于，所述将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示的步骤，包括：

对所述大屏数据进行平面化处理；

将平面化处理后的所述大屏数据导入重新渲染后的所述容器及各个目标组件中，得到可视化图形；

将所述可视化图形按照预定的风格在界面进行显示。

8.一种大屏数据可视化显示装置，其特征在于，包括：

监听模块，用于当监听到浏览器视口发生变化时，获取所述浏览器视口的变化数据，并读取浏览器的容器预置的容器参数；其中，所述容器参数包括画布大小、缩放模式；

计算模块，用于根据所述浏览器视口的变化数据及所述容器参数计算画布的缩放比例，得到画布缩放比例；

重新渲染模块，用于根据所述画布缩放比例对所述浏览器容器进行重新渲染；

广播模块，用于获取与所述容器相关的组件，得到目标组件，将所述画布缩放比例广播至各个目标组件，完成各个目标组件的重新渲染；

显示模块，用于获取大屏数据，将所述大屏数据导入重新渲染后的所述容器及各个目标组件中，生成可视化图形，将所述可视化图形在界面进行显示。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述大屏数据可视化显示方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述大屏数据可视化显示方法的步骤。

Images