CN110275996B - 数据可视化开发为内容开发提供页面框架的装置及方法 - Google Patents

Abstract

数据可视化开发为内容开发提供页面框架的方法，涉及信息技术领域。本发明包括接口定义步骤，排版布局录入步骤，排版布局解析步骤；本发明极大简化了排版布局的工作的复杂度，同时也避免了多种互不相容的排版实现，这就让数据可视化页面的排版在一种模式下操作进行。在本发明的生产实践中，使用本发明开发数据可视化界面时候，开发过程中大大降低了排版布局的难度，绝大部分人在简单培训后就可以掌握本排版布局的方法，极大的提升了生产的效率。

Description

数据可视化开发为内容开发提供页面框架的装置及方法

技术领域

本发明涉及信息技术领域，尤其是软件开发领域中对数据可视化时页面开发和内容开发的衔接技术领域。

背景技术

随着大数据技术的日益普及，web系统的一个分支数据可视化系统得到了长足的发展。数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。

在web开发领域，早期的数据展示基本都是以table的形式进行。随着浏览器对于图形化技术的集成，大量的统计图表技术在web前端侧形成了相应的技术框架和技术产品，这就让浏览器展示数据的手段更加的多样化，使得以前靠文字展示内容的模式逐渐演变成图文结合的模式，甚至是纯图形化的表现模式。而随着大数据技术的发展，这个趋势要求web前端能够展示更加多样化的数据，同时也要求web前端能够通过图形化技术来以视觉容易接受的方式让数据在无形中进行了二次分析。

在可视化页面的生产实践中，会有两个相关方，它们分别是：生产方和应用方，生产方指的是数据可视化页面的制作组织，而应用方指的是数据可视化页面的使用人员以及使用的场景。在生产实践中，这两方都会碰到一些技术性的难题，这些难题具体如下：

1.应用方：应用方的技术难题主要体现在可视化页面展现的载体，展现的载体一般有投影仪，LED屏幕，个人电脑，甚至部分的可视化页面要求在移动端呈现，这些展现的载体落实到web前端技术领域，就是各个展现载体的分辨率不同，在开发实践中碰到的最大的分辨率有像影院的巨幕电影那么大的屏幕，最小的分辨率有大家日常使用的手机一般大小的屏幕，因此可视化大屏基本囊括了时下绝大部分的分辨率范畴。此外，可视化页面绝大部分的展示元素都是可视化图表，因此就算分辨率再小，具体的可视化图表元素也不能缩放过小超过了人眼能很舒适的识别的程度。

2.生产方：生产方所面对的可视化页面的开发最根本的问题就是每一张可视化页面个性化太强，换个角度来说明就是不同的可视化页面共用的元素太少。时下的web前端在工程领域都会使用相应的web前端框架，而web前端框架在可视化封装这块主要是封装页面开发中通用的部分，其主要内容就是页面可视化那些固定的展示样式，核心就是web前端在浏览器端的排版和布局。下面具体说明这个问题，在web开发领域的完整流程中都会存在一个页面排版布局的技术开发过程，早期web系统基本都是应用管理系统，因此往往会有一些固定的页面排版布局模式。在传统的web系统开发中，这些排版布局都是在web前端架构中统一写好，具体的功能页面只是统一复用这些排版即开发具体功能页面时候，研发人员不需要关心统一的布局模式，而只需要关心自己所开发的功能页面即可，因此排版布局往往是web前端框架在可视化部分的一个核心功能，但是在可视化大屏页面里，每个页面都会有各自独立的排版布局模式，因此传统的web前端框架布局方案往往会失效，在数据可视化开发中一套系统下的两个可视化页面拥有不同的排版布局模式。

一套系统下的多个可视化页面拥有不同的排版布局模式，这个问题就会导致如下的生产实践问题的出现：

情况1：如果用户需求的数据可视化页面较少，该系统的可视化页面往往会独立设计与开发即开发者不复用原来的web架构，而是脱离原web前端架构独立开发这些可视化页面。这种情况会使得可视化页面开发工作量比传统页面有所增加，同时页面的排版技术在web前端属于难度和技巧较高的技术范畴，因此需要开发可视化页面的研发人员对于web前端排版技术的掌控较高，使得页面研发技术门槛提升，变相的也提升了可视化页面的研发成本。

情况2：当一个系统里需要大量的可视化页面甚至整个系统都要求使用可视化页面，那么单个页面独立开发的模式就会导致项目无法工程化，这样就会导致系统页面开发的工作量倍增，同时开发出来的系统因为缺少web前端框架管理，让系统后期的运维和维护的难度大大的增加，这对于生产效率和生产质量产生了及其不利的影响。

情况3：可视化页面在生产实践中往往受使用方的个人需求影响比较大，具体就是，可视化页面在实际应用场景一般都是会给重要的人员进行展示或者是一个组织对外展示自身工作成果的手段，因此很多可视化页面研发过程中使用方会深入参加页面设计和开发的全流程，这就导致可视化页面会被经常修改和优化，这样的情况就会导致可视化页面的研发周期很长，设计和研发的工作重构性很高，如何能简化或者优化可视化页面的研发流程提高生产效率和快速响应客户需求的能力对于生产企业以及研发的个体都是十分重要的。

此外，应用方所面对的技术问题最终也会落实到生产方来解决，这个问题对于生产方而言就是如何让可视化页面能适应各种不同的分辨率展示，最好是一次研发就能在投影仪，巨幕，LED屏幕以及个人电脑，甚至移动端屏幕上都能显示出最佳效果。

背景技术，具体总结一下页面排版技术在数据可视化页面里的运用以及现有的排版技术存在那些相关的问题：

目前业界在开发可视化页面所使用的的页面排版技术主流的方案有如下三种：

方案1：使用盒子模型的布局，盒子模型的布局是CSS领域最古老的的布局方案，已经流行了近20年，盒子模型主要依靠CSS的position，display，float，margin，border，padding等属性完成，由于可视化页面对于分辨率的自适应要求较高，所以可视化页面往往会使用绝对定位排版矩形框的方式进行排版，这些绝对定位的矩形框的参考父元素往往都是body元素即浏览器的可视化区间，通过布局矩形框在浏览器可视化区间上的偏移位置来定位矩形框的展示位置。阿里云的datav就是采用这种方式进行布局，这种布局的好处是可以很容易制作一套以拖拽的方式快速构建页面的工具系统。弊端是它很难作为一套web前端框架级别的布局方案，因为绝对定位布局虽然将页面布局的方法简单化，但是它本身增加了排版的人工工作量，所以它很难总结出有效的通用代码。

方案2：使用CSS的Flex弹性布局模式，关于CSS的弹性布局：

CSS3引入了一种新的布局模式——Flex布局，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，简称为Flex。Flex布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，打破了之前用浮动的布局，更加灵活。

Flex弹性布局自身就带有屏幕自适应的功能，因此它比传统的盒子模型更加的强大和灵活。但是Flex布局学习成本比较高，在生产实践中会碰到很多跟自适应相关的技术问题，这套技术在生产实践中发现能掌握好的研发人员基本都是专职的web前端开发人员，而一般的web工程师都很难很好的掌控Flex布局。

方案3：使用栅格系统进行页面的排版布局，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。栅格系统一般都是基于行来进行排版，一般栅格系统会把行分成12列，或者是24列，使用的用户根据列的偏移，跨列等手段进行页面排版。

以上是web前端所提供的的通用的页面排版方案，除了以上方案为了满足页面自适应，往往还需要使用JavaScript技术嗅探浏览器的分辨率，根据不同的分辨率做页面排版布局的自适应的处理。

下面本文将详细论述下传统排版布局技术在使用中的问题，具体内容如下：

实现浏览器的排版技术手段很多，但是本发明人认为不管使用那种技术进行页面排版布局，这些技术的排版布局的核心思想是一致的，这个思想就是通过行列布局方式进行页面排版布局。

行列布局方式就是将浏览器的可视化区间当成一个画布，然后先将画布分成多少行，然后在行里分成多少列，行和列的交集就产生了矩形框布局容器，而矩形框布局容器内放置需要展示的内容，下面本文将一步步说明此原理。

在讲解行列布局模式技术前，本文定义一个概念就是根容器，例如我们要开发一个页面，那么我们最开始的排版的父容器就是html的body元素，这时候body元素就是所谓的根容器，根容器是浏览器我们每一次行列排版布局的基础，所有的排版都是以根容器的区域进行的。

图2所示：这是在根容器下做了第一次行列排版布局，我们首先只是将页面分成了两行，每行里没有列或者说每行只有一列，这种布局很简单很基本，但是也很常用，例如传统页面里的查询页面就是这种布局；如图3所示：这里我们在根容器里分成了3行，第1行分为2列，第2行分为4列，第三行分为3列。由此可见在根容器里进行一次行布局，在进行一次列布局，这就做完了一次行列排版布局操作。

图4所示，这个布局粗看在根容器做了3行布局，但是细看下，我们会发现第1行和第2行的第2列有跨行，碰到这种情况，本发明会把跨行的列合并为1行，也就是上面的页面排版应该是在最外层的根容器里做了两行布局，第2行布局相对简单，直接就是分成了4列，第一行布局因为我们以跨行列来合并行的个数，因此第一行首先分成了3列，然后以第1行的第1列为根容器再次做了两行布局，同理第1行第3列也是以第1行的第3列为根容器再次做了两行布局。这个页面也就进行了两次的行列排版布局操作。

图5所示，这个布局粗看之下按行分会有3行，但是实际操作里由于第1列和第3列没有和第2列对齐，因此这个页面布局难度就比较大了。如果我们以body的根容器角度考虑第一行列布局，这个页面不管怎么排版都只能作为一行来理解，因此第一次行列排版就是1行3列，第二次排版是针对列进行的，第一列是两行的排版，第二列是3行的排版，第3列是两行排版，然后第二列内部再做一次行列排版，也就是最多三层行列排版操作。

web前端日常开发中排布布局难点在没有方法约束情况下，使用行列布局模式多样化会导致每一次排版的内部的排版次数也增加不少。过多的排版次数和排版操作就导致排版的复杂度增加，这也是CSS排版技术在实际生产中的难度很高的重要原因之一。

行列排版是浏览器的最核心的排版思想，但是很少有人能贯彻执行它，根容器参考系也是源自于浏览器的排版思想，但是在生产实践中，大家往往很难合理的控制好这种排版，例如margin元素和padding元素就可以打破这种排版：我们可以不使用任何浏览器给出的行列排版方案，只是通过marign-left偏移，也可以达到同样的目的，这样的情况在行列排版不断嵌套下尤为明显，具体就是一个矩形框的位置我们既可以通过行列布局方法定位它在页面的位置，也可以设定矩形框自身的margin属性来确定自身的位置，这就导致页面排版的手段在一种思路下有出现的分支排版方案，即可以打破统一行列排版布局的思路，最终让页面的排版更加的复杂了。

因此如何有效的控制页面排版的方法是本发明核心解决的一个问题。

下面我们将重点讲解下浏览器排版里margin和padding元素的使用，这两个元素也可以实现页面的排版功能，但是这两个元素作用是有区别的，margin是子元素定位自身的位置，padding是父元素确定子元素的位置，这就导致排版的参考系发生了变更。

此外，特别是margin元素还会使得排版出现不对齐的状况，当碰到这样的问题时候使用方常常会说页面排版出问题，需要调整，而这些调整在实际开发中有时往往没有想象中那么简单，主要原因是它跟多次行列排版布局以及不合理的padding和margin的使用相关，因此某些场景下为了修改这个布局，甚至需要页面这个排版布局模式做很大的调整，修改成本是极高的。

在生产实践中页面的排版会更加没有章法，会出现根据根容器做了2次行列布局定位好了它展示内容的位置，但是内容本身还存在3到4次行列布局排版的情况，最终呈现的结果纷乱而复杂，因此在具体开发中，我们如果没有预先统筹布局的开发方式，这就会导致页面每一个可视化内容的排版都是独立的一套体系，这就让页面的排版情况更加的复杂。因此我们需要一个边界，边界的一方是不与内容相关的排版开发，边界另一方是具体的内容开发，哪怕内容里还有排版布局操作也将其归类到内容开发中。

在浏览器技术中一个排版容器的大小除了我们预先设定宽高外，还能有一种模式，这个模式是容器的内容大小动态的改变容器自身的大小，例如：页面左右两侧的table所在的布局容器，设定了固定的宽度和高度，并设定容器当内容超出设定的宽高之后出现相应的滚动条。布局容器大小随着内容变化而变化，就会导致内容对于页面排版布局有影响，这也是增加页面排版布局复杂度的一个重要因素。

因此我们需要一个边界，边界的一方是不与内容相关的排版开发，边界另一方是具体的内容开发，哪怕内容里还有排版布局操作也将其归类到内容开发中。

JSON 数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

JSON建构于两种结构：

1. “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），记录（record），结构（struct），字典（dictionary），哈希表（hashtable），有键列表（keyed list），或者关联数组 （associative array）。2. 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

基础示例

简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是 JavaScript 很容易解释它，而且 JSON 可以表示比”名称/值”对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。

表示名称 / 值对

按照最简单的形式，可以用下面这样的 JSON 表示 “名称/值”对 ：{ "firstName": "Brett" }

这个示例非常基本，而且实际上比等效的纯文本 “名称/值”对 占用更多的空间：firstName=Brett

但是，当将多个”名称/值”对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个”名称/值”对的 记录，比如：

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

从语法方面来看，这与“名称/值”对相比并没有很大的优势，但是在这种情况下JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。

表示数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的“名称/值”对，那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName这样的形式。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

{ "people": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},

{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }

]}。

鉴于现有技术的不足，可以在页面开发的浏览器端预先进行布局操作，然后再放置展示内容，把整个页面开发分成页面框架开发和内容开发两大串行步骤。由于内容本身可能也是一个小型的布局组件，如何能清晰的划分内容和布局的范畴也是非常重要的一个问题。时下的web前端技术发展都在向组件化发展，下面是关于web组件化的相关介绍，具体内容如下：

WEB 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。页面就是由一个个类似这样的部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

WEB组件是web前端中可以复用的部件，它往往都是根据具体的功能进行封装，在可视化页面里有饼状图，折线图等等本身都会编写成web组件，在不同页面中进行复用。因此在页面排版布局这里我们可以采取排版布局和web组件的角度进行划分，页面框架的开发和内容开发的两大步骤中，WEB组件的开发和复用划分到内容开发的范畴。

发明内容

在现有技术中当我们把数据可视化的页面开发分为页面框架开发和内容开发两个范畴时，也是框架开发和内容开发两个串行步骤时，缺乏框架开发者和内容开发者之间的衔接细节，即内容如何定位到页面框架中的具体位置。本发明的数据可视化开发为内容开发提供页面框架的装置及方法可以解决页面框架开发向内容开发提供必要定位数据的问题，极大的提高了数据可视化页面开发的整体效率。

数据可视化开发为内容开发提供页面框架的方法包括接口定义步骤，排版布局录入步骤，排版布局解析步骤完成；

1）接口定义步骤

由排版布局接口定义器定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41，21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，Layouts中规定的排版布局规范所定义的具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，columnRatio ：[x, y, z]，说明第一次排版布局页面分成3列，第一列占宽度的x/(x+y+z)，第二列占宽度y/(x+y+z)，第三列占宽度的z/(x+y+z)；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，当columnRatio定义分成k列，columns数组的长度就是k组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

矩形框boxes作为页面开发中放置内容开发所开发的内容的基本单位，称为容器；

2）排版布局录入步骤

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；

3）排版布局解析步骤

由布局解析引擎读取排版布局定义器中当前应用的页面框架的排版布局参数，包括mode，minHeight、minWidth、Layouts；由布局解析引擎自动计算容器的名称，并将容器的名称输出给内容开发者；由布局解析引擎按照排版布局参数自动生成无内容的页面框架，并将无内容的页面框架输出给内容开发者；

布局解析引擎自动计算容器名称使用的代码是：

created() {

this.getSlotNames(this.layouts.rows)

};布局解析引擎自动计算容器名称是基于Layouts中内容自动执行的，自动生成的名称中的r代表行，c代表列，r后的数字代表第几行，c后的数字代表第几列；

布局解析引擎生成无内容的页面框架等同于Layouts所记录的内容。

有益效果

页面排版布局技术是一个使用起来相对比较复杂的技术，是专职的web前端工程师和非专职web前端工程师的重要区别之一，而实现页面排版布局手段比较多，同样布局页面会有很多种能达到同样效果的布局方式，就算是不同的资深web前端工程师，同一个布局也很难会有相同的排版布局实现。这样的技术往往个性化太强，如果一个系统页面需要大量的排版布局工作，这就必然导致了这个系统前端代码的健壮性和可维护性。

本发明通过总结页面排版布局的一般规律，结合平面设计的手段统一在数据可视化页面里的排版布局的手段，屏蔽了底层实现细节，让使用者按照本发明设定的思路进行页面的排版布局操作，这极大简化了排版布局的工作的复杂度，同时也避免了多种互不相容的排版实现，这就让数据可视化页面的排版在一种模式下操作进行。

这样任何人使用本发明进行排版布局，其布局代码实现都是一致的，这就可以统一页面排版技术，这就为数据可视化项目能被工程化做好了技术支持，数据可视化的项目难以工程化的根本原因在于页面排版的个性化，更深层次的原因是页面排版技术和排版手段种类繁多，极难统一，本发明通过生产实践的总结，上层封装了一套统一的排版布局手段和模式，这就让排版技术在上层开发里进行了统一，因此web前端框架可以使用单一的排版布局公用组件，这样就会有利于数据可视化项目的工程化的构建。

在本发明的生产实践中，使用本发明开发数据可视化界面时候，开发过程中大大降低了排版布局的难度，绝大部分人在简单培训后就可以掌握本排版布局的方法，极大的提升了生产的效率。

附图说明

图1是本发明的系统流程图；

图2是背景技术示例图2；

图3是背景技术示例图3；

图4是背景技术示例图4；

图5是背景技术示例图5；

图6是本发明的排版布局的接口标准的示例；

图7是本发明的主要步骤流程图。

具体实施方式

参看图1，图6和图7，实现本发明的数据可视化开发为内容开发提供页面框架的方法包括接口定义步骤S01，排版布局录入步骤S02，排版布局解析步骤完成S03；

1）接口定义步骤S01

由排版布局接口定义器定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41，21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，Layouts中规定的排版布局规范所定义的具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，columnRatio ：[x, y, z]，说明第一次排版布局页面分成3列，第一列占宽度的x/(x+y+z)，第二列占宽度y/(x+y+z)，第三列占宽度的z/(x+y+z)；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，当columnRatio定义分成k列，columns数组的长度就是k组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

矩形框boxes作为页面开发中放置内容开发所开发的内容的基本单位，称为容器；

2）排版布局录入步骤S02

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；

3）排版布局解析步骤S03

由布局解析引擎读取排版布局定义器中当前应用的页面框架的排版布局参数，包括mode，minHeight、minWidth、Layouts；由布局解析引擎自动计算容器的名称，并将容器的名称输出给内容开发者；由布局解析引擎按照排版布局参数自动生成无内容的页面框架，并将无内容的页面框架输出给内容开发者；

布局解析引擎自动计算容器名称使用的代码是：

created() {

this.getSlotNames(this.layouts.rows)

};布局解析引擎自动计算容器名称是基于Layouts中内容自动执行的，自动生成的名称中的r代表行，c代表列，r后的数字代表第几行，c后的数字代表第几列；

布局解析引擎生成无内容的页面框架等同于Layouts所记录的内容。

Claims (1)

1.数据可视化开发为内容开发提供页面框架的方法，其特征在于由接口定义步骤，排版布局录入步骤，排版布局解析步骤完成；

1）接口定义步骤

由排版布局接口定义器定义排版布局的接口标准为：

按照JSON的数据格式定义，mode、minHeight、minWidth、Layouts；

mode指的是以页面宽高比率作为代表的页面排版格式，mode的取值范围包括：41， 21，11，12， 14共5种模式，41代表宽高比为4比1，21代表宽高比为2比1，11代表宽高比为1比1，12代表宽高比为1比2，14代表宽高比为1比4；

minHeight及其值代表内容展示所需要的最小的高度；

minWidth及其值代表内容展示所需要的最小的宽度；

Layouts中规定排版布局规范，Layouts中规定的排版布局规范所定义的具体内容如下：

用rowMargin及其值定义行与行之间的间距，用columnMargin及其值定义列与列之间的间距，rowMargin及其值与columnMargin及其值会作用于整个排版布局过程，使用单一的行与列的间隔，主要目的是保证被布局的元素不会因为padding和margin元素的滥用或者无规律使用所导致的行列间距不对齐的问题；

columnRatio及其值指的是第一次行列布局时候需要多少列，并且列所占的宽度的比率，columnRatio ：[x, y, z]，说明第一次排版布局页面分成3列，第一列占宽度的x/(x+y+z)，第二列占宽度y/(x+y+z)，第三列占宽度的z/(x+y+z)；

用rows表示对第一次排版的行进行排版，rows下的ratio及其值是指行在高度上所占的比率，ratio及其值有数字和百分比两种，数字则是使用Flex布局进行高度计算，而百分比则是按照盒子模型的排版布局进行高度计算；rows下的columns的值是一系列数组，columns是第一次布局的列的定义，当columnRatio定义分成k列，columns数组的长度就是k组数组；rows下的columns的值中的数组的格式为以type来定义第二次行列布局中的列的再排版方式，type的值包括row和column；当type的值为row时表示相应的行列布局中的列在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示相应的行列布局中的列在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

当boxes需要嵌套时，同样以type来定义被嵌套的矩形框boxes的再排版方式，type的值包括row和column；当type的值为row时表示被嵌套的矩形框boxes在再排版时以行进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示高度；当type的值为column时表示被嵌套的矩形框boxes在再排版时以列进行划分所产生的矩形框定义为boxes，boxes后面的ratio的值表示宽度；

矩形框boxes作为页面开发中放置内容开发所开发的内容的基本单位，称为容器；

2）排版布局录入步骤

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在41即可视化范围的宽高比为4比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在21即可视化范围的宽高比为2比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在11即可视化范围的宽高比为1比1时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在12即可视化范围的宽高比为1比2时的minHeight、minWidth、Layouts录入排版布局定义器；

由排版布局定义器根据数据可视化应用方的要求，以排版布局接口定义器定义排版布局的接口标准，将mode的取值范围在14即可视化范围的宽高比为1比4时的minHeight、minWidth、Layouts录入排版布局定义器；

3）排版布局解析步骤

由布局解析引擎读取排版布局定义器中当前应用的页面框架的排版布局参数，包括mode，minHeight、minWidth、Layouts；由布局解析引擎自动计算容器的名称，并将容器的名称输出给内容开发者；由布局解析引擎按照排版布局参数自动生成无内容的页面框架，并将无内容的页面框架输出给内容开发者；

布局解析引擎自动计算容器名称使用的代码是：

created() {

this.getSlotNames(this.layouts.rows)

};布局解析引擎自动计算容器名称是基于Layouts中内容自动执行的，自动生成的名称中的r代表行，c代表列，r后的数字代表第几行，c后的数字代表第几列；

布局解析引擎生成无内容的页面框架等同于Layouts所记录的内容。

Images