-
-
辰哥 管理员
发表于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实施工程师告诉你，这样的可视化大屏更懂你
