浮木云---可视化大屏搭建

之前对浮木云的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,输入文字内容“学部申请转化科技成果统计(项)”,并调整字体大小和样式。六个标题内容填充完之后的效果是这样的,看起来还是挺美观滴。


② 统计数字内容填充

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


③ 动态内容填充

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


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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容