之前对浮木云的web端的静态页面和APP的页面搭建进行了简单的记录，虽然只是了解些皮毛，但足够支撑一些简单的页面的制作。最近我在浏览他们的公众号【武汉浮木科技有限公司】，意外发现他们对高校科技成果转化平台的模板进行了相关介绍，看了他们对这个平台的介绍，让我觉得他们对这个业务的理解非常透彻。当然，最吸引我的是他们这个可视化大屏页面做的很符合我的审美，所以我又从他们的模板中下了高校科技成果转化平台的模板，按照他们的格式继续制作一个简单的大屏页面，本次针对我搭建的可视化大屏页面做一个简单的记录。
说句实在话，他们这个可视化大屏确实惊艳到我了，想了解详情的小伙伴们可以去他们的官网浮木云-产品设计开发智能助手去试用一下，肯定会像我一样会有不一样的收获。
接下来我就按照我做的可视化大屏页面的步骤进行一个简单的记录，本次仿照的模板是高校科技成果转化平台的高校科技成果转化页面，这个页面包含了多种图表，还是有点难度的。
1、创建应用
老生常谈，建立可视化大屏的第一步依然是创建应用，应用类型选择“可视化大屏”，页面布局默认“无导航”。
创建过应用，系统自动创建一个新的空白的页面，先重新命名这个初始化页面，改为“高校科技成果转化页面”，更改页面名称的位置在页面名称右侧的设置按钮。
2、背景设置
按照他们制作的页面的结构，放置一个弹性容器，然后将模版的背景图片下载下来作为我的背景图片，这样大屏的背景设置就做好了。
不过他们的背景上传需要先从本地上传到他们设置好的资源分组，不知道这样做有什么意义，感觉这跟平常直接从本地上传文档有点不太一样，我猜想是便于用户管理自己的图片吧。
根据他们模版的设置，将弹性容器设置为自动换行，横向对齐和纵向对齐都设置为居中对齐，并在弹性容器的自定义样式中输入“flex-direction:column;”。
3、框架布局
在设置好的背景框架中，放置两个弹性容器，可以看到两个弹性容器纵向分布，并将第二个弹性容器的自定义样式中输入“flex:1;”，自动换行设置为“否”可视化大屏的基本框架就设置好了。
模板上层的弹性容器的样式是将做好的图片样式放置在弹性容器中，老样子我把上层的弹性容器的图片全部下载至本地，并上传至我的资源分组中，从资源分组中将图片样式上传至我设置好的上层弹性容器中。好了，基本框架样式已经出来了，效果还不错。上层弹性容器我命名为“导航”，下层弹性容器我命名为“主体”。
4、内容填充
4.1导航内容填充
（1）放置搜索框
在“导航”框架中放置一个弹性容器，命名为“搜索框”，作为搜索框的框架，在填充搜索内容的框架中分别放置两个布局容器，用来放置一个输入框和级联组件。此外，放置两个布局容器之前一定要将“搜索框”的弹性容器的自动换行设置为否，这样两个布局容器才会在同一行中。输入框填写大学名称，级联组件用来填充高校的学部、学院名称，级联组件要在属性配置中对其级联选择选项设置。
这里我只设置了两级，第一级表示学部，第二级表示学院，当然你也可以根据自己的需求设置更多的级别，我制作出来的效果是这样的。
感觉自己做原型设计越来越顺手了，哈哈哈哈~~~~~
（2）放置文字
在弹性容器正中央放置一个文字组件，用来填充“高校科技成果转化平台”几个显眼的文字。先把文字内容填充上，再来调整字体和文字容器的样式。
（3）放置日期
在“导航”右侧放置一个图片组件用来填充日期图片，将定位方式选择为绝对定位，顶部设置为30px,右侧设置为44px，看起来效果还不错。
4.2主体内容填充
“导航”框架内容已经填充好，接下来就是这个可视化大屏的重要内容了，在“主体”框架中你仍需要先将要填充内容的框架给搭建好，才能填充对应的图表。
（1）框架布局设置
按照模板放置三个弹性容器，分为左、中、右三块布局，观察模板发现，左右两侧的布局都是填充图表内容，中间布局分为两层。左边布局和右边布局的弹性容器的自定义样式中输入“flex-direction:column;”，再在这两个弹性容器分别放置三个弹性容器，自定义样式分别输入“flex-direction:column;flex:1;”。中间布局的弹性容器自定义样式输入“flex-direction:column;”，在该弹性容器中分别放置一个弹性容器（用来填充统计数字的内容）和一个二维地图，在二维地图的自定义样式设置中输入“flex:1;”。初步确定好的框架就这样设置好了，呈现的效果还是不错的。
（2）图表内容填充
图表内容有五部分，其实填充的形式都是一样的，在这里我就只记录一个图表内容填充，方便大家对图表的内容填充的掌握。这里就对左边布局的第一个图表内容进行填充。根据模板结构放置一个弹性容器用来填充标题和一个自定义图表。填充标题的弹性容器高度设置为35px，并将弹性容器的背景设置成模板中一样的标题背景（同样的方法，把他们的标题背景图片下载下来上传到自己的资源中心即可），在标题弹性容器下方放置自定义图表。他的自定义图表有一个初始化的图表，因此需要对这个初始化图表进行自定义图表设置，方可修改图表样式。
我将它们模板的图表样式直接复制过来，作为我自己的图表样式，得到的效果还是杠杠的，原来做原型的图表样式是如此简单。
这也太方便了，这以后配置图表样式只需要在echarts中直接下载代码进行相应的参数修改就可以了，这比自己绘制图表省事多了！
（3）文字内容填充
① 标题内容填充
仿照模板将左右布局的标题名称给填充上，填充方式是在每一个放置图表的标题弹性容器中方式一个文字组件，文字组件高度和宽度都设置为百分之一百，同时外间距设置为15px，输入文字内容“学部申请转化科技成果统计（项）”，并调整字体大小和样式。六个标题内容填充完之后的效果是这样的，看起来还是挺美观滴。
② 统计数字内容填充
统计数字内容填充跟之前做过得统计页面是一样的，放置弹性容器，并对弹性容器的宽度和高度设置对应的比例或者宽高，同时在弹性容器中放置两个文字组件，效果如图所示：
③ 动态内容填充
在右边布局中第一个填充“科技成果转化申请动态”内容的弹性容器中，按照模板放置三个小的弹性容器，并放置图片背景和文字组件。图片背景依然是借用模板的背景图片。文字填写对应的内容，并在样式配置中调整字体颜色和字体大小。就这样，一张复刻的大屏页面已经搞出来了，天啊，我只想说一个字：绝！
以上就是我制作整个可视化大屏的流程，看起来是很简单是吧，但其实我在这其中也遇到了很多问题，像会出现滚动条啊，有些自定义样式没有输入相应的语句，导致页面不规范等等问题。我相信大家在试用过程中也会遇到跟我一样的问题。我猜大家遇到自定义样式输入相应的值肯定也很懵逼，因为我也一样啊，英文单词我都认识，可是放在一起他是什么意思啊？他在这里到底起什么作用啊？虽然用起来很方便，但是我得知道他什么时候可以用？这些问题我也在研究中，实在不行回头准备咨询他们的技术支持。后续我也会把这些问题的答案一一分享给大家，敬请期待。
标签：容器,填充,弹性,---,浮木云,放置,大屏,图表,页面 From： https://www.cnblogs.com/shouqian/p/18007572