(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210614461.2 (22)申请日 2022.05.30 (71)申请人 紫光建筑云科技 （重庆） 有限公司 地址 401120 重庆市渝北区仙桃街道数据 谷中路107号 (72)发明人 刘魏　 (74)专利代理 机构 天津企兴智财知识产权代理 有限公司 12 226 专利代理师 安孔川 (51)Int.Cl. G06F 8/38(2018.01) G06F 9/451(2018.01) (54)发明名称 一种数据可视化大屏的自适应布局方法 (57)摘要 本发明提供了一种数据可视化大屏的自适 应布局方法， 包括以下步骤： S1、 通过 JS原生方法 获取body元素， 并将body元素隐藏； S2、 根据当前 屏幕分辨率与网页实际开发尺寸计算出两者之 间的比例； S3、 根据步骤S2获得的比例， 对页面进 行等比例缩放； S4、 显示body元素； S5、 判断页面 是否为初次加载， 如果是则监听浏览器resize事 件， 当浏览器窗口发生变化后， 重新执行之前上 述步骤S1 ‑S4， 否则结束。 本发明有益效果： 一种 数据可视化大屏的自适应布局方法， 可以保持网 页宽度和浏览器 保持一致， 自动适应不同尺寸的 屏幕， 能够快捷解决多设备显示适应问题， 面对 不同分辨 率设备灵活性强。 权利要求书1页 说明书4页 附图1页 CN 114895909 A 2022.08.12 CN 114895909 A 1.一种数据可视化大屏的自适应布局方法， 其特 征在于， 包括以下步骤： S1、 通过JS原生方法获取body元素， 并将body元素隐藏,所述body是用在网页中的一种 HTML标签； S2、 根据当前屏幕分辨 率与网页实际开发尺寸计算出两者之间的比例； S3、 根据步骤S2获得的比例， 对页面进行等比例缩放； S4、 显示body元 素； S5、 判断页 面是否为初次加载， 如果是则监听浏览器resize事件， 当浏览器窗口发生变 化后， 重新执行之前上述步骤S1 ‑S4， 否则结束， 所述resize事件是窗口大小改变时发生的 事件， 所述resize事 件在窗口开启、 最大化、 最小化、 窗口大小改变时发生。 2.根据权利要求1所述的一种数据可视化大屏的自适应布局方法， 其特征在于： 在步骤 S1中， 通过JS原生方法getElementsByClas sName获取body元 素。 3.根据权利要求1所述的一种数据可视化大屏的自适应布局方法， 其特征在于： 在步骤 S3中， 对页面进行等比例缩放的方法为： 将比例赋值给body元素css  transform ‑scale属 性。 4.根据权利要求1所述的一种数据可视化大屏的自适应布局方法， 其特征在于： 在步骤 S3中， 计算屏幕与网页宽度比， 并设置给body元 素css transform ‑scale属性。 5.根据权利要求1所述的一种数据可视化大屏的自适应布局方法， 其特征在于： 在步骤 S5中， 如果页面初次加载， 监听浏览器resize事件， 并将第一步创建的JS方法做为resize的 回调函数。 6.一种电子设备， 包括处理器以及与处理器通信连接， 且用于存储所述处理器可执行 指令的存储器， 其特征在于： 所述处理器用于执行上述权利要求 1‑5任一所述的一种数据可 视化大屏的自适应布局方法。 7.一种服务器， 其特征在于： 包括至少一个处理器， 以及与所述处理器通信连接的存储 器， 所述存储器存储有 可被所述至少一个处理器执行的指 令， 所述指 令被所述处理器执行， 以使所述至少一个处理器执行如权利要求 1‑5任一所述的一种数据可视化大屏的自适应布 局方法。 8.一种计算机可读取存储介质， 存储有计算机程序， 其特征在于： 所述计算机程序被处 理器执行时实现权利要求1 ‑5任一项所述的一种数据可视化大屏的自适应布局方法。权　利　要　求　书 1/1 页 2 CN 114895909 A 2一种数据可视化大屏的 自适应布局方 法 技术领域 [0001]本发明属于数据处 理领域， 尤其是 涉及一种数据可视化大屏的自适应布局方法。 背景技术 [0002]在当下的信息时代， 数据可视化已经成为炙手可热的话题了， 并且在网页端也开 始得到了广泛支持。 [0003]数据可视化的基本思想， 是将数据库 中每一个数据项作为单个图元元素表示， 大 量的数据集构成数据图像， 同时将数据的各个属 性值以多维数据的形式表示， 可以从不同 的维度观察数据， 从而对数据进行 更深入的观察和分析。 [0004]数据可视化主旨在于借助图形化， 清 晰有效地展示信息。 但这并不是指数据可视 化就一定因为要实现其功能而令人感到枯燥乏味， 或者是为了看上去绚丽多彩而显得极端 复杂。 发明内容 [0005]有鉴于此， 本发明旨在提出一种数据可视化大屏的自适应布局方法， 为了有效地 传达思想概念， 美学与 功能需要齐头并进， 通过直观地传达关键的方向与特性， 从而实现对 复杂又枯 燥的数据深入观察。 [0006]为达到上述目的， 本发明的技 术方案是这样实现的： [0007]一种数据可视化大屏的自适应布局方法， 包括以下步骤： [0008]S1、 通过JS原生方法获取body元 素， 并将body元 素隐藏； [0009]S2、 根据当前屏幕分辨 率与网页实际开发尺寸计算出两者之间的比例； [0010]S3、 根据步骤S2获得的比例， 对页面进行等比例缩放； [0011]S4、 显示body元 素； [0012]S5、 判断页面是否为初次加载， 如果是则监听浏览器resize事件， 当浏览器窗 口发 生变化后， 重新执 行之前上述步骤S1‑S4， 否则结束。 [0013]进一步， 在步骤S1中， 通过JS原生方法getElementsByClas sName获取body元 素。 [0014]进一步， 在步骤S3中， 对页面进行等比例缩放的方法为： 将比例赋值给body元素 css transform ‑scale属性。 [0015]进一步， 在步骤S3中， 计算屏幕与网页宽度比， 并设置给body元素css  transform ‑ scale属性。 [0016]进一步， 在步骤S5中， 如果页面初次加 载， 监听浏览器resize事件， 并将第一步创 建的JS方法做为resize的回调函数。 [0017]第二方面本方案公开了一种电子设备， 包括处理器以及与处理器通信连接， 且用 于存储所述处理器可执行指令的存储器， 所述处理器用于执行第一方面所述的一种数据可 视化大屏的自适应布局方法。 [0018]第三方面本方案公开了一种服务器， 包括至少一个处理器， 以及与所述处理器通说　明　书 1/4 页 3 CN 114895909 A 3