浮木云随笔小记（6）---可视化大屏搭建

之前对浮木云的web端的静态页面和APP的页面搭建进行了简单的记录，虽然只是了解些皮毛，但足够支撑一些简单的页面的制作。我发现他们这个平台能够搭建可视化大屏，正在发愁如何搭建可视化大屏，意外发现他们公司推出一些模板介绍，他们对模板的细致介绍，让我觉得他们对这个业务的理解非常透彻。当然，吸引我的还是他们做的可视化大屏页面做的很符合我的审美，所以我又从他们的模板中下了一个高校科技成果转化平台的模板，按照他们的格式继续制作一个简单的大屏页面，本次针对我搭建的可视化大屏页面做一个简单的记录。接下来我就按照我做的可视化大屏页面的步骤进行一个简单的记录，本次仿照的模板是高校科技成果转化平台的高校科技成果转化页面，这个页面包含了多种图表，还是有点难度的。1、创建应用老生常谈，建立可视化大屏页面的前提依然是创建应用，应用类型选择“可视化大屏”，页面布局默认“无导航”。

创建过应用，系统自动创建一个新的空白的页面，先重新命名这个初始化页面，改为“高校科技成果转化页面”，更改页面名称的位置在页面名称右侧的设置按钮。

2、背景设置按照他们制作的页面的结构，放置一个弹性容器，然后将模版的背景图片下载下来作为我的背景图片，这样大屏的背景设置就做好了。

不过他们的背景上传需要先从本地上传到他们设置好的资源分组，不知道这样做有什么意义，感觉这跟平常直接从本地上传文档有点不太一样，我猜想是便于用户管理自己的图片吧。

根据他们模版的设置，将弹性容器设置为自动换行，横向对齐和纵向对齐都设置为居中对齐，并在弹性容器的自定义样式中输入“flex-direction:column;”。

3、框架布局在设置好的背景框架中，放置两个弹性容器，可以看到两个弹性容器纵向分布，并将第二个弹性容器的自定义样式中输入“flex:1;”，自动换行设置为“否”可视化大屏的基本框架就设置好了。

模板上层的弹性容器的样式是将做好的图片样式放置在弹性容器中，老样子我把上层的弹性容器的图片全部下载至本地，并上传至我的资源分组中，从资源分组中将图片样式上传至我设置好的上层弹性容器中。好了，基本框架样式已经出来了，效果还不错。上层弹性容器我命名为“导航”，下层弹性容器我命名为“主体”。

4、内容填充4.2、导航内容填充（1）放置搜索框在“导航”框架中放置一个弹性容器，命名为“搜索框”，作为搜索框的框架，在填充搜索内容的框架中分别放置两个布局容器，用来放置一个输入框和级联组件。此外，放置两个布局容器之前一定要将“搜索框”的弹性容器的自动换行设置为否，这样两个布局容器才会在同一行中。输入框填写大学名称，级联组件用来填充高校的学部、学院名称，级联组件要在属性配置中对其级联选择选项设置。

这里我只设置了两级，分别是学部和学院，当然你也可以根据自己的需求设置更多的级别，我制作出来的效果是这样的。

感觉自己做原型设计越来越顺手了，哈哈哈哈~（2）放置文字在弹性容器正中央放置一个文字组件，用来填充“高校科技成果转化平台”几个显眼的文字。先把文字内容填充上，再来调整字体和文字容器的样式。

（3）放置日期在“导航”右侧放置一个图片组件用来填充日期图片，将定位方式选择为绝·对定位，顶部设置为30px,右侧设置为44px，看起来

4.2. 主体内容填充“导航”框架内容已经填充好，接下来就是这个可视化大屏的重要内容了，在“主体”框架中你仍需要先将要填充内容的框架给搭建好，才能填充对应的图表。（2）框架布局设置按照模板放置三个弹性容器，分为左、中、右三块布局，观察模板发现，左右两侧的布局都是填充图表内容，中间布局分为两层。左边布局和右边布局的弹性容器的自定义样式中输入“flex-direction:column;”，再在这两个弹性容器分别放置三个弹性容器，自定义样式分别输入“flex-direction:column;flex:1;”。中间布局的弹性容器自定义样式输入“flex-direction:column;”，在该弹性容器中分别放置一个弹性容器（用来填充统计数字的内容）和一个二维地图，在二维地图的自定义样式设置中输入“flex:1;”。初步确定好的框架就这样设置好了，呈现的效果还是不错的。

（2）图表内容填充图表内容有五部分，其实填充的形式都是一样的，在这里我就只记录一个图表内容填充，方便大家对图表的内容填充的掌握。根据模板结构放置一个弹性容器用来填充标题和一个自定义图表。填充标题的弹性容器高度设置为35px，并将弹性容器的背景设置成模板中一样的标题背景（同样的方法，把他们的标题背景图片下载下来上传到自己的资源中心即可），在标题弹性容器下方放置自定义图表。他的自定义图表有一个初始化的图表，因此需要对这个初始化图表进行自定义图表设置，方可修改图表样式。

我将它们模板的图表样式直接复制过来，作为我自己的图表样式，得到的效果还是杠杠的，原来做原型的图表样式是如此简单。

这也太方便了，这以后配置图表样式只需要在echarts中直接下载代码进行相应的参数修改就可以了，这比自己绘制图表省事多了！（3）文字内容填充① 标题内容填充仿照模板将左右布局的标题名称给填充上，填充方式是在每一个放置图表的标题弹性容器中方式一个文字组件，文字组件高度和宽度都设置为百分之一百，同时外间距设置为15px，输入文字内容“学部申请转化科技成果统计（项）”，并调整字体大小和样式。六个标题内容填充完之后的效果是这样的，看起来还是挺美观滴。

② 统计数字内容填充统计数字内容填充跟之前做过得统计页面是一样的，放置弹性容器，并对弹性容器的宽度和高度设置对应的比例或者宽高，同时在弹性容器中放置两个文字组件，效果如图所示：

③ 动态内容填充在右边布局中标题名称为“科技成果转化申请动态”内容的弹性容器中，按照模板放置三个小的弹性容器，并放置图片背景和文字组件。图片背景依然是借用模板的背景图片。文字填写对应的内容，并在样式配置中调整字体颜色和字体大小。就这样，一张复刻的大屏页面已经搞出来了，天啊，我只想说一个字：绝！

以上就是我制作整个可视化大屏的流程，看起来是很简单是吧，但其实我在这其中也遇到了很多问题，像会出现滚动条啊，有些自定义样式没有输入相应的语句，导致页面不规范等等问题。我猜大家遇到自定义样式输入相应的值肯定也很懵逼，因为我也一样啊，英文单词我都认识，可是放在一起他是什么意思啊？他在这里到底起什么作用啊？虽然用起来很方便，但是我得知道他什么时候可以用？这些问题我也在研究中，实在不行回头准备询问一下他们的技术支持。后续我也会把这些问题的答案一一分享给大家，敬请期待。