可视化大屏

前言

 

夏天总是不由自主的燥热；正是在这样室内和室外温度几乎一样的下午，我正笑嘻嘻的抓着乳白色键盘疯狂的敲着BUG，享受着被BUG摩擦的快感，突然耳边传来声音：“待会儿开会，头脑风暴。”

哦豁，真是悦耳~，看来本灭霸（消灭BUG简称灭霸）可以暂时被BUG们暂时放过了。于是乎惊心的会议马上开始。

 

会议

 

“咱们的平台呢，现在仅仅是够用，但称不上美观。”，老大对它发出了最后通牒。现实也确实如此，第一次见到它时确实刷新了我对可视化大屏的认知。如今企业对于数据可视化的需求愈发强烈，发展至今它确实是一条前端可以深研的路子，效果没有最好，只有更好！基于种种需求提出，基本也就推翻整个页面了，那干脆。。。从0做起，开始动手改造

 

布局

 

首先考虑布局问题，因为在通常情况下，大屏都是由一个个模块组成的，模块中包裹着图表信息。这里放一张示例供参考；

 

首页信息选取

 

在布局的同时，作为前端工程师，我们理应是对项目最为熟悉的人，所以我们应当结合业务，考量要将什么信息放在首页的什么位置，达到什么样的效果，明白要达成的什么样的目的。图表或者其他形式的表达能否让人一看就懂，清晰明了。个人认为这一步应该是和上一步相辅相成或者说是同步进行的。

这里就要注意本文标题了，可视化大屏：颜值即是正义！在这一步完成后你应该已经在脑海里对页面有个大概的样子了，之后的每一个模块的开发就要有所把控了。

设计思维融入（细节）

 

如果页面中已经有了主视觉模块，那么就应该弱化其他模块的视觉效果，使其有张力。我平台的主视觉模块就是地图，且只有地图模块有交互行为，其余地方都只是静态的展示，加上以往就对地图有过升级，所以这里暂时不考虑改动。如果项目中有较多的交互行为，那就要在设计层面变换多种思路了；

 

数据可以得出主次数据，因为公司还在蓬勃发展期，数据量是对体量的最好体现，所以采用插件使数字滚动起来，每一次的加载都会把人的注意力吸引过去；

 

如果模块之间看起来并不协调那么就考虑到视觉平衡了，只有记住“你中有我，我中有你”就可以破解！它可以不限于任何方面，假设采用线条主题，那么在设计任何图表时候都可以尽可能把线条元素设置纤细，体现其关联性。

 

我公司与电力相关，提倡安全用电，所以在文字标题上采取的中规中矩的正楷颜色是纯白，目的就是在潜移默化间传递严肃的感觉。

 

模块化开发

 

因为是接手的老代码，有些代码从我的角度看起来不要也可以，而且页面布局要从横向变为纵向，牵扯的代码太多，防止大跨步走岔劈。所以选择先用新代码复原老页面，争取最小改动。所幸这份代码的作者是位全栈大佬，并没有给我带来多大难度。当我们复原这个页面的时候就可以一个个的逐个击破啦。

 

图表使用合理性

 

对于很重要又是单独存在的信息，建议直接展示数字；

 

得益于dataV的动态环形图，我可以无需标注的表达已存在的正常设备量和离线设备量。这个的好处在于不需要去找什么名字对应什么颜色又占了整个图的百分之多少。而且环形图的使用也使得页面更加丰富。

 

预警数和巡查数是有一定关系的存在，所以把他们放在一起展示，采用横向柱状图的好处在于省空间，可以把有限的空间留给更需要的模块；而且还可以再向后延申，有种拉满的感觉。

 

还有就是锥形柱状图的应用，它用来表示各地区的市场占有情况，本来这部分应该是由地图展示，但地图有更重要的用途所以采用纵向的锥形柱状图展示。由高到低依次排列地区名，还可以增添小火箭标志代表正在加速扩张。

 

南丁格尔图适合表示多数据占比情况，但注意不能太多，否则它看起来会很臃肿，影响观感。

大屏适配

 

为保证对原项目的最小侵入性，在开发本页面时并未引入其他布局方案，仍沿用百分比+calc()函数的方式。