本发明涉及ui设计技术领域，更具体地说，涉及一种报表ui元素自适应展示的方法及系统。
背景技术：
自从移动终端全面普及后，在不同移动终端界面上的ui元素展示要求越来越高，需要满足自适应展示在屏幕上。而目前使用的报表设计器是分别针对不同终端设计多套样式报表，不同的移动终端加载适合自己分辨率的样式报表进行展示。
技术实现要素：
本发明提出一种报表ui元素自适应展示的方法及系统，能够使得一份样式报表的各个ui元素在不同分辨率的移动终端自适应展示。
为此，本发明提出以下技术方案：
第一方面，一种报表ui元素自适应展示的方法，包括：
计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置；
根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例；
根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置；
根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表；
在移动终端显示屏展示所述展示报表。
其中，所述样式报表的页面尺寸包括样式报表的页面宽度和样式报表的页面高度；
以样式报表的右上角为原点，水平向右为x轴正向，竖直向下为y轴正向建立直角坐标系；
所述样式报表中各个ui元素的相对大小包括：各个ui元素的相对宽度wn和相对高度hn；
所述样式报表中各个ui元素的相对位置包括：各个ui元素的起点横向位置xn和起点纵向位置yn；
相对宽度wn表示ui元素的宽度相对于报表的页面宽度的百分比；
相对高度hn表示ui元素的高度相对于报表的页面高度的百分比；
起点横向位置xn表示ui元素的起点横坐标相对于报表的页面宽度的百分比；
起点纵向位置yn表示ui元素的起点纵坐标相对于报表的页面宽度的百分比。
其中，所述尺寸比例包括高度比例和宽度比例；
所述根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置，包括：
根据所述样式报表的页面宽度、所述宽度比例和所述相对宽度wn计算各个ui元素在展示报表的宽度；
根据所述样式报表的页面高度、所述高度比例和所述相对高度hn计算各个ui元素在展示报表的高度；
根据所述样式报表的页面宽度、所述宽度比例和所述起点横向位置xn计算各个ui元素在展示报表的起点横坐标；
根据所述样式报表的页面高度、所述高度比例和所述起点纵向位置yn计算各个ui元素在展示报表的起点纵坐标；
所述展示报表的右上角为坐标原点，水平向右为x轴正向，竖直向下为y轴正向。
其中，所述根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表，包括：
根据所述样式报表的页面尺寸和所述尺寸比例计算展示报表的页面尺寸；
根据展示报表的页面尺寸、各个ui元素在展示报表的起点横坐标、各个ui元素在展示报表的起点纵坐标、各个ui元素在展示报表的宽度和各个ui元素在展示报表的高度绘制展示报表。
其中，所述计算样式报表的页面尺寸、样式报表中各个ui元素的大小和位置之前，还包括：
设计样式报表；
解析所述样式报表，获得样式报表中的各个ui元素。
第二方面一种报表ui元素自适应展示的系统，包括：
第一计算模块，用于计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置；
第二计算模块，用于根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例；
第三计算模块，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置；
绘制模块，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表；
展示模块，用于在移动终端显示屏展示所述展示报表。
其中，所述样式报表的页面尺寸包括样式报表的页面宽度和样式报表的页面高度；
以样式报表的右上角为原点，水平向右为x轴正向，竖直向下为y轴正向建立直角坐标系；
所述样式报表中各个ui元素的相对大小包括：各个ui元素的相对宽度wn和相对高度hn；
所述样式报表中各个ui元素的相对位置包括：各个ui元素的起点横向位置xn和起点纵向位置yn；
相对宽度wn表示ui元素的宽度相对于报表的页面宽度的百分比；
相对高度hn表示ui元素的高度相对于报表的页面高度的百分比；
起点横向位置xn表示ui元素的起点横坐标相对于报表的页面宽度的百分比；
起点纵向位置yn表示ui元素的起点纵坐标相对于报表的页面宽度的百分比。
其中，所述尺寸比例包括高度比例和宽度比例；
所述第三计算模块具体用于：
根据所述样式报表的页面宽度、所述宽度比例和所述相对宽度wn计算各个ui元素在展示报表的宽度；
根据所述样式报表的页面高度、所述高度比例和所述相对高度hn计算各个ui元素在展示报表的高度；
根据所述样式报表的页面宽度、所述宽度比例和所述起点横向位置xn计算各个ui元素在展示报表的起点横坐标；
根据所述样式报表的页面高度、所述高度比例和所述起点纵向位置yn计算各个ui元素在展示报表的起点纵坐标；
所述展示报表的右上角为坐标原点，水平向右为x轴正向，竖直向下为y轴正向。
其中，所述绘制模块具体用于：
根据所述样式报表的页面尺寸和所述尺寸比例计算展示报表的页面尺寸；
根据展示报表的页面尺寸、各个ui元素在展示报表的起点横坐标、各个ui元素在展示报表的起点纵坐标、各个ui元素在展示报表的宽度和各个ui元素在展示报表的高度绘制展示报表。
其中，所述系统还包括：
设计模块，用于设计样式报表；
解析模块，用于解析所述样式报表，获得样式报表中的各个ui元素。
本发明提供一种报表ui元素自适应展示的方法及系统，通过一份样式报表，根据移动终端分辨率的不同绘制与之相适应的展示报表，一份样式报表的各个ui元素在不同分辨率的移动终端能够自适应展示，不会变形。
附图说明
图1是本发明提供的一种报表ui元素自适应展示的方法第一实施例的方法流程图。
图2是本发明提供的一种报表ui元素自适应展示的方法第二实施例的方法流程图。
图3是本发明提供的一种报表ui元素自适应展示的系统第一实施例的结构方框图。
图4是本发明提供的一种报表ui元素自适应展示的系统第二实施例的结构方框图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
实施例一
如图1所示，一种报表ui元素自适应展示的方法，包括以下步骤：
s101、计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置。
当一套样式报表被设计出来之后，记录其页面尺寸、各个ui元素的相对大小、相对位置。
s102、根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例。
不同的移动终端其显示屏的分辨率不同，同样的样式报表必然不能与所有的移动终端显示屏的分辨率相适应，因此，当要在不同的移动终端展示这套样式报表时，需要对该样式报表做适应于移动终端显示屏的分辨率的调整，即需要修改样式报表的尺寸大小以满足移动终端显示屏的分辨率。本发明实施例以样式报表作为模板，根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例，根据该比例尺寸绘制一份与该模板中ui元素相同但尺寸不同的展示报表，以便展示，且ui元素不变形，同时提高样式报表的复用率。
s103、根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置。
要得到一份新的报表(展示报表)，需要计算出展示报表的页面尺寸，各个ui元素在展示报表的大小和位置。
展示报表的页面尺寸通过展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例以及样式报表的页面尺寸得出，展示报表的页面尺寸＝尺寸比例*样式报表的页面尺寸。
各个ui元素在展示报表的大小与其在样式报表的相对大小、展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例、以及展示报表的页面尺寸有关，因此，根据它们之间的关系可以计算出各个ui元素在展示报表的大小：ui元素在展示报表的大小＝样式报表的页面尺寸*样式报表中ui元素的相对大小*尺寸比例；同理可计算出各个ui元素在展示报表的位置。
ui元素的相对大小或相对位置采用ui元素的实际大小或实际位置相对于页面尺寸的百分比表示。
s104、根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表。
s105、在移动终端显示屏展示所述展示报表。
计算出展示报表的页面尺寸，各个ui元素在展示报表的大小和位置之后便可以根据这些参数绘制展示报表，展示报表绘制完成之后便可以展示在移动终端的屏幕上，其中的ui元素不变形。
本发明实施例提供的一种报表ui元素自适应展示的方法，通过一套样式报表，根据移动终端分辨率的不同绘制与之相适应的展示报表，一套样式报表的各个ui元素在不同分辨率的移动终端能够自适应展示，不会变形，同时提高样式报表的复用率。
实施例二
本实施例的一种报表ui元素自适应展示的方法，是在实施例一的基础上补充内容，本实施例尚未详尽的内容参考实施例一。
如图2所示，一种报表ui元素自适应展示的方法，包括以下步骤：
s201、设计样式报表。
s202、解析所述样式报表，获得样式报表中的各个ui元素。
s203、计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置。
报表设计器设计出一套报表样式，报表解析引擎负责解析报表类型和报表数据，得到样式报表中的各个ui元素，样式报表中的各个ui元素的相对大小和相对位置。
优选的，样式报表的页面尺寸包括样式报表的页面宽度和样式报表的页面高度。
样式报表中各个ui元素的相对大小包括：各个ui元素的相对宽度wn和相对高度hn。
相对宽度wn表示ui元素的宽度相对于报表的页面宽度的百分比；相对高度hn表示ui元素的高度相对于报表的页面高度的百分比。
所述样式报表中各个ui元素的相对位置包括：各个ui元素的起点横向位置xn和起点纵向位置yn。
以样式报表的右上角为原点，水平向右为x轴正向，竖直向下为y轴正向建立直角坐标系，起点横向位置xn表示ui元素的起点横坐标相对于报表的页面宽度的百分比，起点纵向位置yn表示ui元素的起点纵坐标相对于报表的页面宽度的百分比。
s204、根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例。
s205、根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置。
优选的，所述尺寸比例包括高度比例和宽度比例；
计算各个ui元素在展示报表的大小和位置的过程如下：
根据所述样式报表的页面宽度、所述宽度比例和所述相对宽度wn计算各个ui元素在展示报表的宽度：ui元素在展示报表的宽度＝样式报表的页面宽度*宽度比例*相对宽度wn。
根据所述样式报表的页面高度、所述高度比例和所述相对高度hn计算各个ui元素在展示报表的高度：ui元素在展示报表的高度＝样式报表的页面高度*高度比例*相对高度hn。
根据所述样式报表的页面宽度、所述宽度比例和所述起点横向位置xn计算各个ui元素在展示报表的起点横坐标：ui元素在展示报表的起点横坐标＝样式报表的页面宽度*宽度比例*起点横向位置xn。
根据所述样式报表的页面高度、所述高度比例和所述起点纵向位置yn计算各个ui元素在展示报表的起点纵坐标：ui元素在展示报表的起点纵坐标＝样式报表的页面高度*高度比例*起点纵向位置yn。
ui元素在展示报表的起点坐标所在的直角坐标系以所述展示报表的右上角为坐标原点，水平向右为x轴正向，竖直向下为y轴正向建立。
s206、根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表。
优选的，所述步骤s206包括：
根据所述样式报表的页面尺寸和所述尺寸比例计算展示报表的页面尺寸：展示报表的页面尺寸＝样式报表的页面尺寸*尺寸比例。
根据展示报表的页面尺寸、各个ui元素在展示报表的起点横坐标、各个ui元素在展示报表的起点纵坐标、各个ui元素在展示报表的宽度和各个ui元素在展示报表的高度绘制展示报表。
s207、在移动终端显示屏展示所述展示报表。
本发明实施例提供的一种报表ui元素自适应展示的方法，通过一套样式报表，根据移动终端分辨率的不同绘制与之相适应的展示报表，一套样式报表的各个ui元素在不同分辨率的移动终端能够自适应展示，不会变形。
实施例三
本实施例提供一种报表ui元素自适应展示的系统，与实施例一的方法相对应，本实施例尚未详尽的内容参考实施例一。
参考图3，一种报表ui元素自适应展示的系统，包括：
第一计算模块101，用于计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置；
第二计算模块102，用于根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例；
第三计算模块103，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置；
绘制模块104，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表；
展示模块105，用于在移动终端显示屏展示所述展示报表。
实施例四
本实施例提供一种报表ui元素自适应展示的系统，与实施例二的方法相对应，本实施例尚未详尽的内容参考实施例二。
参考图4，一种报表ui元素自适应展示的系统，包括：
设计模块201，用于设计样式报表；
解析模块202，用于解析所述样式报表，获得样式报表中的各个ui元素。
第一计算模块203，用于计算样式报表的页面尺寸、样式报表中各个ui元素的相对大小和相对位置；
第二计算模块204，用于根据移动终端显示屏的分辨率和所述样式报表的页面尺寸计算展示报表的页面尺寸与样式报表的页面尺寸的尺寸比例；
第三计算模块205，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述样式报表中各个ui元素的相对大小和相对位置计算各个ui元素在展示报表的大小和位置；
绘制模块206，用于根据所述样式报表的页面尺寸、所述尺寸比例、所述各个ui元素在展示报表的大小和位置绘制展示报表；
展示模块207，用于在移动终端显示屏展示所述展示报表。
优选的，所述样式报表的页面尺寸包括样式报表的页面宽度和样式报表的页面高度；
以样式报表的右上角为原点，水平向右为x轴正向，竖直向下为y轴正向建立直角坐标系；
所述样式报表中各个ui元素的相对大小包括：各个ui元素的相对宽度wn和相对高度hn；
所述样式报表中各个ui元素的相对位置包括：各个ui元素的起点横向位置xn和起点纵向位置yn；
相对宽度wn表示ui元素的宽度相对于报表的页面宽度的百分比；
相对高度hn表示ui元素的高度相对于报表的页面高度的百分比；
起点横向位置xn表示ui元素的起点横坐标相对于报表的页面宽度的百分比；
起点纵向位置yn表示ui元素的起点纵坐标相对于报表的页面宽度的百分比。
优选的，所述尺寸比例包括高度比例和宽度比例；
所述第三计算模块205具体用于：
根据所述样式报表的页面宽度、所述宽度比例和所述相对宽度wn计算各个ui元素在展示报表的宽度；
根据所述样式报表的页面高度、所述高度比例和所述相对高度hn计算各个ui元素在展示报表的高度；
根据所述样式报表的页面宽度、所述宽度比例和所述起点横向位置xn计算各个ui元素在展示报表的起点横坐标；
根据所述样式报表的页面高度、所述高度比例和所述起点纵向位置yn计算各个ui元素在展示报表的起点纵坐标；
所述展示报表的右上角为坐标原点，水平向右为x轴正向，竖直向下为y轴正向。
所述绘制模块206具体用于：
根据所述样式报表的页面尺寸和所述尺寸比例计算展示报表的页面尺寸；
根据展示报表的页面尺寸、各个ui元素在展示报表的起点横坐标、各个ui元素在展示报表的起点纵坐标、各个ui元素在展示报表的宽度和各个ui元素在展示报表的高度绘制展示报表。
本发明提供的一种报表ui元素自适应展示的系统，通过一套样式报表，根据移动终端分辨率的不同绘制与之相适应的展示报表，一套样式报表的各个ui元素在不同分辨率的移动终端能够自适应展示，不会变形。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。