【技术实现步骤摘要】
本申请涉及屏幕显示，具体而言，涉及一种基于渐进式框架和可视化图表库的屏幕调整方法、装置、计算机可读存储介质和电子设备。
技术介绍
1、当下最为常用的echarts(即可视化图表库)可视化插件因其技术成熟、效果优异获得了广泛的关注。echarts使用javascript实现的开源可视化库，可以流畅的运行在pc和移动设备上，兼容当前绝大部分浏览器(ie9/10/11，chrome，firefox，safari等)，底层依赖矢量图形库zrender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。echarts提供了常规的折线图、柱状图、散点图、饼图、k线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于bi的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、echarts总体结构是基于mvc架构的，各部分的主要作用是：
3、storage(m)：模型层，实现图形数据的curd(增删改查)管理；
4、painter(v)：视图层，实现canvas元素的生命周期管理，即：视图渲染、更新控制、绘图；
5、handler(c)：控制层，事件交互处理，实现完整的dom事件模拟封装。
6、对于echarts图表自适应宽高大小的方案，当前主流方案的整体思路是在echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高再赋值给echarts容器。具体为设置两层div，外层是
7、对于echarts字体在大屏下的自适应方案，现有的方案基本思路为在fontsize里写一个函数，根据当前屏幕宽度除以初始设定的屏幕宽度得到比例，用字体大小乘以比例，获得自适应字体大小的比例。
8、echarts图表自适应宽高大小的现有方案，该方案首先需要内外层两层div的嵌套，在前端层级结构上较为冗余；其次对于外层div容器的宽高用百分比计算，这种计算方式首先相对于px等布局消耗较大，其次在展示上存在宽高太小引起的内容溢出、宽高过大引起的内容之间的间距太大的问题。因此很少在前端布局中使用百分比；最后该方案需要监听屏幕大小变化每次调用函数改变内层div宽高，而过多的监听事件容易造成负担。整体方案较为复杂，且性能开销较大，实际视觉效果也较差。
9、echarts字体在大屏下的自适应现有方案，该方案的核心是对屏幕宽度的获取，从而得到合适的比例，但是目前的方案中，缺乏对屏幕宽度获取的标准，也没有考虑不同场景下的宽度选择，因此并不具备通用性。
10、现有的大屏自适应方案采用获取比例设置scale来实现对不同分辨率的自适应。这种方案存在以下弊端：1.该方案在适配时会因分辨率大小出现两侧留白现象；2.在非f11全屏模式下，不能适应全屏效果。
技术实现思路
1、本申请的主要目的在于提供一种基于渐进式框架和可视化图表库的屏幕调整方法、装置、计算机可读存储介质和电子设备，以至少解决现有方案无法展示页面的全部内容的同时且对可视化图表库的图表和可视化图表库的字体进行放大的问题。
2、为了实现上述目的，根据本申请的一个方面，提供了一种基于渐进式框架和可视化图表库的屏幕调整方法，包括：获取屏幕在当前时刻的分辨率和预设的分辨率，得到当前分辨率和预设分辨率，对页面高度、滚动条状态、字体大小参数和全局样式进行调节，以使得渐进式框架的屏幕在非全屏模式的情况下显示页面的全部内容，所述页面以弹性布局进行展示；在所述屏幕显示的内容发生变化的情况下，调用全局初始化比例函数，以调节所述屏幕显示的页面的比例，所述全局初始化比例函数为采用所述当前分辨率和所述预设分辨率，对文件对象模型中的变形样式进行修改的函数；并调用第一自适应函数，以调节所述屏幕显示的页面的可视化图表库的图表的大小，所述第一自适应函数为采用第一调节系数、所述当前时刻的分辨率和所述预设的分辨率，对所述屏幕显示的页面的可视化图表库的图表的大小进行调整的函数；并调用第二自适应函数，以调节所述屏幕显示的可视化图表库的字体的大小，所述第二自适应函数为采用第二调节系数、所述当前时刻的分辨率和所述预设的分辨率，对所述屏幕显示的页面的可视化图表库的字体的大小进行调整的函数。
3、可选地，对页面高度、滚动条状态、字体大小参数和全局样式进行调节，包括：将所述页面高度调节为100％，并将所述滚动条状态调节为隐藏状态，并将所述字体大小参数调节为所述预设的分辨率的宽度与目标单位属性的比值，所述目标单位属性为根据页面的根节点的字体大小进行转变的单位的属性，并将所述全局样式调节为以所述页面的左上角为原点进行分辨率转换的样式。
4、可选地，在对页面高度、滚动条状态、字体大小参数和全局样式进行调节的过程中，所述方法还包括：接收到预设操作，并响应于所述预设操作，对所述页面的布局进行修改，以使得所述页面以所述弹性布局进行展示。
5、可选地，响应于所述预设操作，对所述页面的布局进行修改，包括：响应于所述预设操作，对所述页面自左至右依次分割为三个部分，所述三个部分的比例为与所述预设操作对应的预设比例。
6、可选地，调用全局初始化比例函数，包括：将所述变形样式修改为拉伸，宽度比例，高度比例，其中，所述宽度比例为所述当前分辨率的宽度与所述预设分辨率的宽度的比值，所述高度比例为所述当前分辨率的高度与所述预设分辨率的高度的比值。
7、可选地，调用第一自适应函数，包括：确定所述可视化图表库的图表的宽度的调节值为所述第一调节系数与宽度比例的乘积，所述宽度比例为所述当前分辨率的宽度与所述预设分辨率的宽度的比值；确定所述可视化图表库的图表的高度的调节值为所述第一调节系数与高度比例的乘积，所述高度比例为所述当前分辨率的高度与所述预设分辨率的高度的比值；将所述可视化图表库的图表的宽度修改为所述可视化图表库的图表的宽度的调节值，并将所述可视化图表库的图表的高度修改为所述可视化图表库的图表的高度的调节值。
8、可选地，调用第二自适应函数，包括：确定所述可视化图表库的字体的宽度的调节值为所述第二调节系数与宽度比例的乘积，所述宽度比例为所述当前分辨率的宽度与所述预设分辨率的宽度的比值；确定所述可视化图表库的字体的高度的调节值为所述第二调节系数与高度比例的乘积，所述高度比例为所述当前分辨率的高度与所述预设分辨率的高度的比值；将所述可视化图表库的字体的宽度修改为所述可视化图表库的字体的宽度的调节值，并将所述可视化图表库的字体的高度修改为所述可视化图表库的字体的高度的调节值。
9、根据本申请的另一方面，提供了一种基于渐进式框架和可视化图表库的屏幕调整装置，该装置包括：
10、获取单元，本文档来自技高网...
【技术保护点】
1.一种基于渐进式框架和可视化图表库的屏幕调整方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，对页面高度、滚动条状态、字体大小参数和全局样式进行调节，包括：
3.根据权利要求1所述的方法，其特征在于，在对页面高度、滚动条状态、字体大小参数和全局样式进行调节的过程中，所述方法还包括：
4.根据权利要求3所述的方法，其特征在于，响应于所述预设操作，对所述页面的布局进行修改，包括：
5.根据权利要求1至4中任一项所述的方法，其特征在于，调用全局初始化比例函数，包括：
6.根据权利要求1至4中任一项所述的方法，其特征在于，调用第一自适应函数，包括：
7.根据权利要求1至4中任一项所述的方法，其特征在于，调用第二自适应函数，包括：
8.一种基于渐进式框架和可视化图表库的屏幕调整装置，其特征在于，包括：
9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的程序，其中，在所述程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至8中任意一项所述的方法。<...
【技术特征摘要】
1.一种基于渐进式框架和可视化图表库的屏幕调整方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，对页面高度、滚动条状态、字体大小参数和全局样式进行调节，包括：
3.根据权利要求1所述的方法，其特征在于，在对页面高度、滚动条状态、字体大小参数和全局样式进行调节的过程中，所述方法还包括：
4.根据权利要求3所述的方法，其特征在于，响应于所述预设操作，对所述页面的布局进行修改，包括：
5.根据权利要求1至4中任一项所述的方法，其特征在于，调用全局初始化比例函数，包括：
6.根据权利要求1至4中任一项所述的方法，其特征在于，调用第一自适应函数，包...
【专利技术属性】
技术研发人员：马倩煜，仇春辉，郑艳，张清，
申请(专利权)人：中国邮政储蓄银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。