这波实操教程,拯救正在做可视化大屏的你!

2056
0

辰哥 管理员

发表于2019-3-27 14:01

楼主
微信图片_20190327112752.gif
上次小亿和大家一起探讨过大屏可视化设计思路——《大屏可视化重头戏!你不看我不看,怎么会做好看》整篇文章从抽取关键指标、确定排版布局、定义配色风格、动画效果设计四个方面教大家如何设计一张酷炫的大屏。

那么大屏设计好了之后,如何实现?
如何快速实现?
如何零脚本快速实现?
截图201903271131359419.png
截图201903271132259391.png
看到这张设计图,很赞很nice,对吧?

那这种可视化大屏,怎么能快速的应用在自己的业务场景下呢?不要慌,今天就用四步教你轻松用亿信BI制作酷炫可视化大屏。

当然在开车之前,我们前期还需要有一些准备工作:
  • 整理素材:UI基于原型图进行设计、切图
  • 部署环境:部署亿信BI环境(可至官网下载一键安装包)
  • 准备数据:准备需要展现的数据并在亿信BI中创建主题维度模型


这里我们假定需求已由业务部敲定,环境已由测试人员搭建完毕,效果切图已由UI设计完毕,数据也由IT部门整理妥当,接下来就一个字,干。
01
上传图片素材

将UI切图打包一键上传到资源管理器中,以备后面报表设计时直接调用。
截图201903271134104390.png
截图201903271135026297.png

截图201903271135418131.png
02
大屏布局设计

为什么要用布局?当然是因为方便排版
截图201903271136327953.png
小小炫耀一下,亿信BI的布局还能真正实现自适应分辨率,真正做到一表三屏,一张表可以自动自适应于PC端、手机端、大屏。

1、定义布局

基于大屏效果图规划出如下布局格式:
截图201903271137384611.png

按照规划的布局格式,从左侧资源树中拖入自定义布局,设置八行七列即可;
截图201903271138236459.png
然后按照每个布局块的宽高比例进行设置(小贴士:一般设计大屏时,建议针对单个大屏分辨率固定宽高,这样可减少服务器对自适应布局的解析渲染时间,让大屏展示效果更流畅)

本次实操演练,我们横向做自适应,纵向用固定高度来完成。
截图201903271139285828.png
2、配置背景

1)布局整体背景颜色

右侧打开组件列表,选中布局,属性中设置图片路径(也就是第一步我们上传图片资源的路径)
截图201903271140122357.png

2)各布局块背景颜色

截图201903271141188118.png
由于各布局块横向做了自适应设置,需要让布局块背景图片横向纵向铺满,我们可以在自定义样式中设置:
background-size:100% 100%;

3、设计标题

标题格式为小图标+文字,而布局块需要横向自适应,这个时候,我们的另一个神器——【容器】也派上用场了,布局+容器几乎可以完美解决所有自适应排版,不信,你看
截图201903271142553203.png

03
为图形连通数据

首先,拖拽表格组件。
截图201903271145153950.png

其次,拾取主题表数据,配置表格数据,点击小抓手,列出主题表,通过双击主题表指标即可写入表格内,中间无需任何代码输入,easy!
截图201903271146533404.png

04
设计美化图表
最后一步,统计图设计,首先需要按照效果图拖入相应的统计图组件,如下:
截图201903271148016305.png

然后将统计图与表格数据关联,并对统计图图例、坐标轴、填充色等各类属性进行配置,一比一还原效果图配色效果。

下图为线状图编辑界面,左侧为系列区,中间为系列数据配置区,右侧为统计图预览区,每一步配置都能在预览区直观的看到配置效果。

截图201903271148454245.png

其他统计图都按照如上配置步骤设计美化,这样一张酷炫的可视化大屏就完美的呈现在你眼前,有没有觉得自己很棒棒哒呢!!
截图201903271152006673.png
最后,你肯定会问,这种静态大屏已经用的很多了,而我们就是要酷炫,闪瞎眼球的那种,比如
111.gif
或者
222.gif
当然,没!问!题!酷炫动态大屏的教程下次再约。
如果对实操有疑问,还可以参加我们专门的线下课程培训【小亿公开课】,免费教学,多阶课程,小班上课,现场答疑,真题实操,随时关注公众号的开课通知哦~


更多可视化技能解析


传说中别人家的可视化大屏,你也值得拥有



26个BI实施工程师告诉你,这样的可视化大屏更懂你


截图201903271136447572.png 截图201903271149282889.png 截图201903271153267869.png 截图201903271154037736.png

最近看过此主题的会员

dora232

淑离

mengchenlong

0个回答

只看楼主

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号