虽然已经决定这个项目用Wyn来作了，可是，了解一下如何从头开始写一个数据大屏仍是挺有好玩的。html
-------------前端
为何要作数据大屏？
现现在的大数据逐渐发挥出了它的力量，并没有形的改变着咱们的生活。但大数据在不是从事技术开发的人来讲没有很明显的感觉，不少人对大数据的概念只是停留在每一年网易云音乐对我的听歌的汇总上、知乎2017年解锁的知识成就、微信新年的我的社交分析、支付宝的年终帐单等。其迫切的须要经过一些媒介展示数据的威力，而数据大屏做为大数据展现媒介的一种，普遍运用于各类展现厅、会展、发布会及各类狂欢节中，其中不乏一些通用的处理方案：阿里巴巴集团的DataV产品。其大屏有多种主题，提供多种模版，设计的很是的震撼，DataV也用于展示历年双十一的盛况。webpack
而公司的大数据工做组就须要经过数据大屏展现一些处理事后有价值的信息，所以需求孕育而生。下面的截图是产品迭代四次以后在公司大屏展现厅的照片，第五次迭代还在开发中。程序员
用Vue作基础的框架是否是合适？
绝对合适，就如今运用的状况来讲，Vue适合95%的网页应用开发，几乎任何的网页应用Vue都有对应的解决方案，并且开发效率极高，甚至因为它组件化的特性，尤为适合完成一些需求不明确、需求在应用开发的过程当中一直会发生变化、须要快速迭代出一个新版本的开发。而最终参与制做的产品就是一个在需求不明确的状况下慢慢变成一个产品的。web
程序员如何产生想法再落实到实际开发？
众所周知，程序员是码代码的，而设计产品不是程序员的强项，很不巧的是我就是那个码代码，不太会设计的程序员，但经过一些诀窍，仍是可以设计出一款不错的大屏应用的。下面就来介绍一下里面的一些技巧，这些技巧其实还适用于其余的产品设计。后端
数据大屏设计归根结底就是一个在极端宽阔的屏幕上作应用的开发，所以大屏设计每每强调的是大数据迸发的一瞬间大量的数据信息经过必定的可视化形式瞬间冲入脑海的惊艳感。让人感受数据距离你们不是这么的遥远，而给人一种触手可及的感受。api
数据大屏的设计实际上是有诀窍的，掌握了一些诀窍，在知道了公司大数据组大概须要展现哪些内容以后，不须要UI，程序员本身也能配合产品经理、企划部和DBA完成一个数据大屏产品的设计。微信
步骤分为
肯定基色->寻找灵感->思考实施->做出第一个原型->再次了解需求->屡次修改产品->优化细节
后面的步骤须要循环屡次，归根结底就是一个典型的需求不明确快速迭代的原型开发。数据结构
- 肯定基色和寻找灵感
肯定基色不是很难，因为是大屏，采用深色作背景，最重要的是要有灵感，初期的需求分析了解到了须要在大屏上存放的内容以下：
- 两块地图
- 三个大数据数值的统计
- 流程图展现
- 实时提单详细展现
- 收发报文统计展现
在肯定了初期的需求以后，接下来就是思考如何把这些需求落实到页面上。如何在页面上展现这些内容。而数据大屏的展现，数据大屏的核心就是数据的拼接，具体到展现层能够概括成数据块的拼接，因为公司大屏是8*4的32块屏，所以起初的寻找灵感就是从分块开始。框架
这样作的好处是每一个屏幕切分的很清晰，灵感也在切分中愈来愈清晰，到日后就是一个个模块的排列组合，和细节的优化，通过初期对需求的解读，初步划分以下图所示。
- 地图1
- 标题
- 实时提单展现
- 地图2
- 全链路
- 数据统计
7-11：报文详细
- 思考实施
在切分变的明显以后，就开始了细节的开发，前人的经验是要吸收的。所以能够在UI中国上寻找优秀的大屏设计，看看哪些内容能够被吸收到本身的产品内部。
UI中国 - 大数据监控运营平台
UI中国 - 人口、旅游 大数据可视化大屏展现
UI中国 - 数据可视化大屏
UI中国 - 可视化数据展现系统
UI中国 - 雅培活动数据分析Dashboard
在开发上，归功于Vue的组件化思想，当设计出一个模块框和些许组件以后，后面的内容就是按照内容划分进行填充，极其的快速，立刻，第一个原型孕育而生，并且出了图标采用开源解决方案，其余的内容都是本身从零开始开发的，维护效率也偏高，产品设计也更加统一。
- 第一个原型
下图展现了第一个原型的诞生，运用Vue进行开发，圆环和统计图采用ECharts进行绘制，上面的实时提单展现会一直滚动，而且实时能够查看单子的详细。
- 再次了解需求
下面开始就是快速迭代中比较重要的一点：快速了解进一步的需求，在第一个原型诞生以后，必然带来第二稿的修改，由于模糊的需求并不能精确命中用户的真实需求，而用户的正式需求每每是设计人员在设计出第一个原型以后诞生的。
此时用户在见到了一些内容以后会有更加近一步的想法，甚至有些设计由于需求不明确和真实需求并不相符，不是用户真正想要的内容，就好比上图那个全链路的圆环，在进一步了解需求以后发现，有可能一天有多个步骤同时发生，那运用圆环表示比率的作法就没有任何的意义，而这些只有在第一个原型出来以后才能发现的。
因而配合用户、业务部门和DBA，诞生了第二个原型，和第一个原型比更加的丰富，业务也发生了相应的变化。
- 屡次修改产品、优化细节
通过屡次和用户、企划、公司大数据组人员进行沟通后，变成了最终文章开始的展现模式，原型肯定以后的具体后端接口的开发了。
这其中最方便的一点是开发完原型后前端应用展现方面的内容无需修改分毫，所以运用假接口调用和后端肯定规范就变得很是必要，只须要编写后端数据，编写完以后直接修改HOST就能作到，因为原型开发面临这不断的修改，并且后端也不清楚最后可以提供什么样的数据，这样沟通成本就变得很大，如何下降沟通成本，制定一个规范，就是咱们必需要考虑的问题。
原先会经过原型变动后端的假接口也相应发生变化，让前端去调用，这样作很是低效，后端工程师的时间也浪费了，测试也要等到后端假接口写完以后，但得益于YAPI这个开源项目（这是由去哪儿的工程师开发的一套先后端开发规范管理系统）运用mockjs作假数据的生成，原型直接调用这套系统的接口。后端也无需考虑数据结构，前端把定义好的数据结构写成YAPI内部对应的一个个测试接口，当轮到后端开发的时候直接按照这套系统的API规范进行开发，下降了沟通成本，对于任何一个团队来讲都很是便捷。
代码结构设计
组件化拆分变的尤其重要，又是webpack打包的项目，所以模块也相对比较清晰，对于后期运维也相对好维护。
- data-block：数据模块框组件
- data-link：全链路组件
- data-map：地图组件
- data-marquee：实时滚动组件
- data-step：嵌套在data-link内部的步骤条详细
- data-title：标题组件
- svg-circle：原型内部链路圆环（已被需求淘汰）
图表全在utils内部的chart.js内部维护，图标采用SVG，和链路项的顺序单独维护在配置文件内部，便于需求变化后的修改。样式运用less进行开发，统一配色、样式。
PS：用户就是领导😂