数据可视化大屏自适应页面的方法及系统技术方案

本发明专利技术公开了一种数据可视化大屏自适应页面的方法及系统，方法包括：使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则进行以下步骤；使用js获取浏览器可视化区域的尺寸，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值；依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放。本发明专利技术能够减少工作量、降低代码冗余，只需要编写一套代码即可实现屏幕等比例自适应；复用性高，任何其余项目均可使用该套代码实现屏幕等比例自适应；变换时间短，在屏幕变化同时就可实现屏幕等比例自适应，几乎感知不到变化过程。程。程。

【技术实现步骤摘要】
数据可视化大屏自适应页面的方法及系统


[0001]本专利技术涉及终端适配
，具体来说，涉及一种数据可视化大屏自适应页面的方法及系统。

技术介绍

[0002]现有显示屏种类繁多，屏幕分辨率多样，这就需要技术人员使用媒体查询技术根据分辨率的不同编写不同的CSS代码加载不同的样式文件去适配不同屏幕的分辨率来进行正常显示，这样便会产生极大的工作量，也会变得越来越不易维护。

技术实现思路

[0003]本专利技术的目的在于提出一种数据可视化大屏自适应页面的方法及系统，以克服现有技术中存在的上述不足。
[0004]为实现上述技术目的，本专利技术的技术方案是这样实现的：
[0005]一种数据可视化大屏自适应页面的方法，所述方法包括以下步骤：
[0006]使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则进行以下步骤；
[0007]使用js获取浏览器可视化区域的尺寸，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值；
[0008]依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放。
[0009]一种数据可视化大屏自适应页面的系统，所述系统包括：
[0010]监测模块，用于使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则向计算模块发出信号；
[0011]计算模块，用于使用js获取浏览器可视化区域的尺寸，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值，并将横向比例值和竖向比例值发送给处理模块；
[0012]处理模块，用于依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放。
[0013]一种电子设备，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行如上所述的数据可视化大屏自适应页面的方法。
[0014]一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如上所述的数据可视化大屏自适应页面的方法。
[0015]本专利技术的有益效果：1、减少工作量、降低代码冗余，只需要编写一套代码即可实现屏幕等比例自适应；2、复用性高，任何其余项目均可使用该套代码实现屏幕等比例自适应；3、变换时间短，在屏幕变化同时就可实现屏幕等比例自适应，几乎感知不到变化过程。
附图说明
[0016]图1是本专利技术实施例所述方法的流程图；
[0017]图2是本专利技术实施例所述系统的功能模块结构示意图。
具体实施方式
[0018]下面结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述。
[0019]如图1所示，根据本专利技术的实施例所述的一种数据可视化大屏自适应页面的方法，所述方法包括以下步骤：
[0020]使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则进行以下步骤。
[0021]使用js获取浏览器可视化区域的宽(screenWidth)、高(screentHeight)，大屏需按照设计图对body设置固定宽(width)和高(height)，不同浏览器利用js获取可视化区域宽高的方式会有所差异，一般使用document.body.width来获取宽度，document.body.height来获取高度，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值。具体的，横向比例值等于width除以screenWidth，竖向比例值等于height除以screenHeight。
[0022]依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放，具体操作为transform：scale(width，height)。
[0023]如图2所示，基于上述公开的一种数据可视化大屏自适应页面的方法，本专利技术还公开了一种数据可视化大屏自适应页面的系统，所述系统包括：
[0024]监测模块，用于使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则向计算模块发出信号；
[0025]计算模块，用于使用js获取浏览器可视化区域的尺寸，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值，并将横向比例值和竖向比例值发送给处理模块；
[0026]处理模块，用于依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放。
[0027]本专利技术实施例所述的数据可视化大屏自适应页面的系统的上述各个功能模块，分别对应本专利技术的数据可视化大屏自适应页面的方法的各个操作步骤，这里不再赘述。
[0028]在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，
″
计算机可读介质
″
可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的
介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。
[0029]以上所述仅为本专利技术的较佳实施例而已，并不用以限制本专利技术，凡在本专利技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本专利技术的保护范围之内。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据可视化大屏自适应页面的方法，其特征在于，所述方法包括以下步骤：使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则进行以下步骤；使用js获取浏览器可视化区域的尺寸，并与大屏设定尺寸进行计算，得到横向比例值和竖向比例值；依据计算得到的横向比例值和竖向比例值使用css3技术对浏览器body元素进行缩放。2.一种数据可视化大屏自适应页面的系统，其特征在于，所述系统包括：监测模块，用于使用window.onresize实时监听浏览器的尺寸变化，若监测到浏览器的尺寸发生变化，则向计算模块发出信号；计算模块，用于使用js获取浏览器可视化区域...

【专利技术属性】
技术研发人员：张凯，范源，赵天丽，
申请(专利权)人：上海熙菱信息技术有限公司，
类型：发明
国别省市：