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

94
0

辰哥 管理员

发表于2019-3-27 14:01

楼主

上次小亿和大家一起探讨过大屏可视化设计思路——《》整篇文章从抽取关键指标、确定排版布局、定义配色风格、动画效果设计四个方面教大家如何设计一张酷炫的大屏。

那么大屏设计好了之后,如何实现?
如何快速实现?
如何零脚本快速实现?


看到这张设计图,很赞很nice,对吧?

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

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


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

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




02
大屏布局设计

为什么要用布局?当然是因为方便排版

小小炫耀一下,亿信BI的布局还能真正实现自适应分辨率,真正做到一表三屏,一张表可以自动自适应于PC端、手机端、大屏。

1、定义布局

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


按照规划的布局格式,从左侧资源树中拖入自定义布局,设置八行七列即可;

然后按照每个布局块的宽高比例进行设置(小贴士:一般设计大屏时,建议针对单个大屏分辨率固定宽高,这样可减少服务器对自适应布局的解析渲染时间,让大屏展示效果更流畅)

本次实操演练,我们横向做自适应,纵向用固定高度来完成。

2、配置背景

1)布局整体背景颜色

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


2)各布局块背景颜色


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

3、设计标题

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


03
为图形连通数据

首先,拖拽表格组件。


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


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


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

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



其他统计图都按照如上配置步骤设计美化,这样一张酷炫的可视化大屏就完美的呈现在你眼前,有没有觉得自己很棒棒哒呢!!

最后,你肯定会问,这种静态大屏已经用的很多了,而我们就是要酷炫,闪瞎眼球的那种,比如

或者

当然,没!问!题!酷炫动态大屏的教程下次再约。
如果对实操有疑问,还可以参加我们专门的线下课程培训【小亿公开课】,免费教学,多阶课程,小班上课,现场答疑,真题实操,随时关注公众号的开课通知哦~


更多可视化技能解析


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



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


最近看过此主题的会员

chenxing

taozi

admin

TL_

挨踢妹

小亿

0个回答

只看楼主

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

和辰哥,话技术!
我要发帖
16603总贴
330本月
2395主题
回帖消息提醒
快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

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

渠道咨询电话:137-0120-6790直销咨询电话:137-0121-6791

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

产品建议邮箱service@

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2019ESENSOFT北京亿信华辰软件有限责任公司版权所有: