你必须掌握的可视化大屏开发模式

数无形时少直觉，形无数时难入微。——华罗庚

咱们都尝试去观察生活，可是有时却缺乏了总结生活；有时咱们太着眼细节，忽略了大局。数据和可视化彷佛是两个好兄弟，就像仰望星空与脚踏实地的两种状态。

可视化开发的知识框架

可视化目的

数据来源

1. 客户系统长期积累的数据；
2. 客户系统设备实时产生数据；
3. 从外界导入数据；
4. 为项目演示准备的相关数据

数据是可视化的第一步，这里和你们提一提数据处理。

用户使用软件，浏览网页、APP会不间断产生各类数据。若是咱们任由数据增加而不使用，那就是暴殄天物，但就算咱们有了使用数据的意识，却也不必定能发挥数据的价值，因此将数据进行分析是使数据发挥价值的第一步。 复杂的业务带来的后果是不一样产品间用户数据相互隔离，咱们称之为”数据孤岛“，让数据用起来的第一步即是将该孤岛链接，将凌乱数据归类为数据资产，这里面临的问题就是数据的来源太多，咱们必须针对多种数据源作适配处理，离线将数据经过预设算法宝进行处理，创建标签系统，根据业务不一样纬度生成处理数据，最终经过可视化手段、标签体系、已训练模型，支撑业务。同时业务又反过来提供源源不断的数据，造成闭环。

咱们可以感知到，可视化是数据处理的应用上层。至于对于数据的处理，其实底层是很复杂的，从__数据采集__到__数据存储__到__数据加工__变为数据资产，进而使用数据资产拓展上层应用，可视化是其中一种。

目的

1. 可视化使数据更直观，让用户更易感知
2. 经过大屏内容，辅助用户进行商业决策

对于不一样用户的价值

1. 使用人员：操做性更强、交互性更好
2. 视察领导：更实用、更可靠
3. 参观人员：更美观、更具趣味性

设计哲学

字体

通常优先选用系统内置字体，固然若是有定制字体则可选用定制字体，数据信息相关字号通常14px以上，这样大屏观看时，更清晰。

分辨率	html font-size
1366*768	12px
1920*1080(1080p)	16px
2560*1440(2k)	22px
3840*2160(4k)

配色

1. 较深色调：浅色投屏对视觉刺激较强，不利于长时间观看，而且深色调更具科技感，更有审美价值；深色调更紧凑，聚焦视觉焦点，结合暗色调更柔和舒服不刺眼；
2. 设计一致性：模块间设计保持风格色彩一致，若遇需凸显的内容，可提升对比度或延展色系；
3. 背景：背景可适当使用渐变、星空、条纹、渐变线、点缀等效果

布局方法

1. 总体感：尽量组件等高同列，不要让组件显得突兀或独立。相关数据合理组织，视觉上呈现一体化；
2. 组件间距与关系：分清组件信息主次，尽量将表现形式、表达目的、数据性质接近的组件布局在一块儿，使用户更好获取数据信息；
3. 主次分明：一般中间区域、大片区域放置主要信息，次要信息可环绕放置

基于以上考虑，咱们能够设计一种基于网格形式大屏开发方案。

动画与交互

适当动画可提高大屏趣味性，但必定要注意主次。更具实际须要肯定交互方式。

图表的选择

技术实现

大屏需求大多数可借助封装的组件库、工具库较快完成，部分需求须要使用偏底层技术实现，通常用到的技术点以下：

1. CSS3
2. SVG
3. Canvas
4. WebGL

咱们也可使用半成品进行定制，SVG相关：SVG.js、snap，Canvas 2D有：zrender、ocanvas、EaselJS 等。

GIS相关

基础

• 地图
• 珊格瓦片/矢量瓦片
• 投影与坐标系
• GeoJSON

地图库组件

• OpenLayers
• Leaflet
• Sinomap
• mapbox
• ArcGIS For JavaScript
• QGIS

地图开放平台

• 高德地图
• 百度地图
• 腾讯地图
• 天地图
• 谷歌地图

空间数据库

• PostGIS
• PostgreSQL
• Oracle Spatial

地理可视化

• supercluster
• turf
• geojs
• cesiumjs
• geohey

工具库

图表库	绘图库	动画库
ECharts	three	anime
HightCharts	D3	mo
Chart	SVG	Popmotion
Chartist	Snap	Bounce
AntV系列	Raphaël	Tween(补间动画)

部署方式

部署方式	特色	优点	劣势
私有部署	项目彻底部署在客户服务器上	数据更安全、架构易调整	扩容不易、初建成本高
云部署	项目彻底部署在云端	使用灵活、按需付费	数据有风险
混合部署	重要内容在客户服务器，部分在云端	使用更为灵活	提升程序复杂

网络环境

• 无网络链接：全部资源与数据存放在本地，数据更新依赖人工导入；
• 仅访问内网：资源与数据多数存储在本地，可从内网内其余服务器获取数据；
• 可访问互联网：不敏感资源可存放在 CDN 或云服务器，减小本地项目体积与维护成本。

设备参数

• 屏幕显示技术: LED、LCD、OLED、AMOLED（不一样显示技术大屏显示效果有差别，但影响不大）
• 屏幕分辨率：见分辨率适配
• 屏幕宽高比例：4:三、16:9(常见)、15:九、16:十、21:9（注意对可能使用的异型屏的适配）
• 客户端硬件性能: 内存、CPU、GPU、显卡（复杂的大屏对客户端配置要求较高，地图的大数据体量比较吃 CPU和内存，webgl 会调用GPU渲染，通常不是 webgl 的，动画多的大屏，容易吃 CPU，显卡也很重要，但不易量化）
• 客户端浏览器: 建议选用较新版本的 Chrome 或 FireFox 等现代浏览器