职场IT老手教你3步教你玩转可视化大屏设计，让领导眼前一亮！
本文由葡萄城技术团队于博客园原创并首发
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
我是制造企业的IT中心的研发人员，平常工作就是配合业务部门出出报表，选型一些商业软件，并在内部负责实施运维。最近领导出去参观了一些数字化转型比较领先的工厂和制造企业，回来就甩给我几张图，问能不能我们也做几个这样有科技感的、酷炫的大屏，重点是可以向上汇报的。
我深入理解了一下领导的需求：不要总是表格，朴素无华的报表了？希望可以是这样的，加上GIS地图的：
也可以是这样有3D立体的效果：
我非常理解当领导看到别人采访或者参观同行头部公司时，看到可视化大屏的那种震惊和惊喜，甚至是非常羡慕。
于是我开始深入研究这样的大屏究竟是如何制作的。
开始的时候总是不知道从何入手，怎样能设计出一个又能展示数据还能看着赏心悦目的大屏呢？不要慌，其实制作一个炫酷的可视化大屏往往没有那么难，只要掌握三步，就可以自己实现大屏开发。那今天我就将我毕生的研究分享给大家，让每一个人都玩转大屏。
制作大屏牢记三步：数据准备、整体布局、细节美化。
- 数据准备
制作大屏的第一步当然需要数据的支撑，那为了满足不同场景，多源分析必不可少。寻找了一款合适的BI 大屏工具，Wyn 商业智能，Wyn支持现在现在市面上的绝大部分通用的数据库。无论时我们常用的关系型数据库（Oracle、sql server、mysql等）、文件型数据库（Excel、Json等）、非关系型数据库（MongoDb、ElasticSearchDSL）或者oData数据源等等。
无论我们之前的业务系统是使用的什么，现在都可以统统包含进来。或许我们的数据没有在一个数据库中存放，因为业务的区分，可能存储在了不同的数据库中，但是进行数据分析时，又想他们一起展示怎么办？
当然有办法了。Wyn支持跨源的数据集和数据模型，根据每个不同数据源之间的关联关系进行关联字段进行连接，那么只要将关联字段连接，两个不同数据源的数据就可以整合在一起了。就比如下图，我使用了一个文件型的数据源和一个mysql的数据源，根据如下订单编号进行关联，就实现了跨源的数据分析。
除此之外，针对不同场景，我们也可以进行列的计算和汇总等等，如此丰富的功能，可以满足我们的不同业务场景。
2. 整体布局
准备完数据，当然就到了大屏的设计。如何设计一款视觉效果好的呢，最简单的方法就是把握“313布局”。什么是“313布局”，如下图所示：
上面两个模板整体看上去都是相当成功的大屏，原因很简单，它们清晰明了的整体布局给人眼前一新的感觉。大屏的左右两边都是对称的3条布局，内部不一定非要每一个只显示一个图表，但是清晰的布局不能缺少，并且准备对应的边框、背景和小图标，保证整体布局和色彩搭配清晰好看，然后制作对应的组件即可。
那除了左右的“33”，中间的“1”便是撑起整个大屏的关键。我们在大屏的中间可以放置相应的背景大图、3D模型、地图组件或者明细数据。不同的场景对应不同的展示风格，只需适当的切换就可以带来很大的反响。就比如上述第一个背景主要显示一些完成数据，并用图片撑起。而整个大屏展示的也是校内信息指标反应，这个结合就非常成功。
其次第二个仪表盘主要是校园内部管理，那展示校内的各区域信息就尤为重要。针对这种大屏，就非常符合放模型类的组件，将模型信息数据和字段绑定，就可以展示校园内各地区的实时情况。除了这两种模板，当我们想要分析不同省份之间信息关联时，当然也可以放置地图，。那么如果你精准掌握了“313”，其实一个大体的仪表板已经完成。
3. 细节美化
到这里，其实仪表板的搭建工作大概都完成了，但是最后一步也关键，毕竟没有点缀的仪表板，看起来也会很枯燥。美化的点其实也很多：例如可视化大屏增加的背景颜色、背景动画效果、可视化元素增加边框、增加背景图片等等。再比如添加一个炫酷的标题背景，也会提高整个仪表板的颜值。wyn支持全局背景设置和每一个仪表板的图标设计 ，那对应的，我们根据选定的主题，也可以调整每一个仪表板的背景图片。
现在，大屏主体已经完成了，那最后就是为它加一个新颖的标题，装上背景框，并添加一些美化的页面元素。至此，一款完美的大屏就设计完成了。
4.实际操作
示例: 智慧电机管理驾驶舱
（1）准备数据
这里我们就用最简单的Excel数据做示例，也是大众普遍的使用方法。
我们直接选择Excel数据，然后上传，就可以自动解析，之后根据数据源直接创建相应的数据模型，并应用于仪表板。
（2）整体布局
实现“313布局”，两边的图表设计完成：
图表Wyn支持很多图表插件，也支持自己开发插件并上传，轻松制作好看的图表。
在添加中间的图表时，这里我们选择一个3D地球效果，并将展示的信息附在上面：
（3）细节美化
其实这个时候整体效果已经出来了，剩下的就是添加标题、两边的样式，再加一些需要展示的信息和背景图片即可，那最后的展示效果就如下图：
5.总结
其实设计大屏并不难，只要掌握一定规律，其实每个人都可以设计出一款炫酷的大屏。而且Wyn产品的设计结果也可以支持图表之间的联动，图表自身的钻取过滤等功能，方便我们进行数据分析。
免费获取100张数据可视化大屏模板：
https://www.grapecity.com.cn/solutions/wyn/demo
嵌入式BI分析体验：http://wyn.grapecity.com.cn/playground/index.html
产品帮助文档: https://help.grapecity.com.cn/display/wyn600
