一、基本概念
1.1 什么是？
数据可视化，是关于数据视觉表现形式的科学技术研究。
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。
1.2 应用场景
各行各业都可以应用数据可视化，包括：银行、证券、保险等金融领域，传统行业、互联网行业都可以将数据可视化分析；
宏观形势可视化
态势可视化是对特定环境中一段时间内的持续动作和改变的目标实体的感知、认知、理解，最后显示出总体状态。使非专业人员能迅速掌握某一领域的总体态势和特点。
- 全球可视化航班运营
- 卫星的分布运行可视化
设备仿真运行可视化
将图像、三维动画、计算机程控技术融合到实体模型中，实现设备的可视化表达。使管理人员对所管理的设备有一个形象、具体的概念，并能对设备的位置、外形和所有参数进行直观的了解。从而大大减少管理者的劳动强度，提高管理效率和管理水平。
- 工业设备的可视化操作
- 军事领域的战场装备可视化
- 人造卫星的可视化操作
数据的可视化和统计分析
这一方面的可视化应该是我们接触最多的，常应用于商业智能、政府决策、公共服务、市场营销等。
- 商业智能可视化
- 营销可视化
- 智能硬件数据可视化
二、解决方案
| 图表类 | 工具类 | 原生开发 | 第三方服务 |
|---|---|---|---|
| ECharts | D3(质量图绘制) | Canvas | 阿里DataV |
| Highcharts | three.js、BabylonJS、SceneJS、Cesium、ThingJS | Svg | 腾讯云图 |
| AntV | raphaeljs | WebGl | FineReport |
| MapV | Snap.svg.js | HTML CSS JS | 百度Sugar |
2.1 图表类
2.1.1 ECharts
底层：canvas
一个基于 JavaScript 的开源可视化图表库，，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
优点：
- 不收费
- Echarts提供多种图表类型和交互方式，可以完美地满足不同场景下的可视化需求；
- Echarts支持多种数据格式和数据源，可以轻松地与其他技术或平台集成；
- Echarts的性能较高，支持大量数据的快速渲染。
缺点：
- Echarts的缺省主题较为简单，需要进行额外的设计和调整；
- Echarts的配置较为繁琐，需要花费一定的时间和精力进行配置和调整；
- Echarts的API文档较为庞大，需要阅读和掌握较多的内容。
- 对IE8及IE8（甚至IE9）及以下的兼容性非常差，经常报一大堆错误
2.1.2 Highcharts
底层：svg
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
Highcharts系列包含Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯JavaScript 编写的HTML5图表库。
优点
- 轻量级，移动端使用比较流畅。
- 基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图。
- 图表展现美观简约大气。
- 稳定的性能。
- 兼容性好，官方说兼容到IE6，实际我们只要兼容到IE8就基本满足。
- 完整的实例演示，功能介绍和详细的api文档。
缺点
- 中文文档欠缺。
- 商业收费，外国。
2.1.3 AntV
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。 AntV 包括以下解决方案：
- G2：可视化引擎
- G2Plot：图表库
- G6：图可视化引擎
- Graphin：基于G6的图分析组件
- F2：移动可视化方案
- ChartCube：AntV 图表在线制作
- L7：地理空间数据可视化
优点：
- AntV 文档阅读体验更符合互联网产品使用习惯。
缺点：
- AntV 产品体系拆分更加清晰，但一定程度上提升了学习成本。
2.1.4 MapV
Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。
优点
- 功能强大
缺点
- 只能基于百度地图来实现，可能换个其他底层数据就存在很大的限制了
2.1.5 总结
目前国内比较常用的是ECharts，AntV
2.2 工具类
2.2.1 d3
D3（Data-Driven Documents 或 D3.js）是一个 JavaScript 库，用于使用 Web 标准将数据可视化。D3 帮助你使用 SVG、 Canvas 和 HTML 将数据变为现实。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法相结合，让你拥有现代浏览器的全部功能，并可以自由地为您的数据设计合适的可视化界面。
优点
- 功能强大，提供了极高的灵活性和定制性，支持多种图表类型，如柱状图、饼图、散点图、树图、网络图等。
- 可以实现比较复杂的图形，如动画、交互和数据绑定等。
- 可以与其他 JavaScript 库结合使用，如 Vue、React、Angular 等。
缺点
- 学习曲线较陡峭，学习难度较大，需要对 HTML、CSS、JavaScript 等知识有扎实的基础。
- 需要自己编写代码实现图表，可能需要花费更多的时间和精力。
总结
经常与Echarts比较，如果需要定制图表或有非常精确的需求，则应考虑 D3。 如果需要快速构建图表，或者不需要实现复杂的图形，那么 ECharts 更适合你。
2.2.2 3D绘图
- three.js 是一个基于 WebGL 的 Javascript 3D 图形库
- BabylonJS：是一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验
- SceneJS：是一个基于 JavaScript 时间轴的动画库，用于创建动画网站，作为一个动画时间轴库，它允许你创建对象的移动和位置的时间顺序。
- Cesium：是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile
- ThingJS： 基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
之后又专门的篇章对部分进行详细的解析
2.2.3 raphaeljs
Raphael是一个适量绘图包，用于在浏览器上绘制图形。几乎所有的浏览器都支持。Raphael绘制出的内容是真实的DOM节点。不仅可以动态的修改它的大小、颜色等等操作来创建你想要的内容，而且可以为你创建的内容赋予点击，悬停，动画等操作。
2.2.4 Snap.svg.js
Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现 SVG 功能。
2.2.5 总结
这些工具类中，我们重点关注d3和3d可视化工具即可
2.3 原生开发
2.3.1 Canvas
canvas是HTML5的新特性，可以通过JavaScript在canvas元素上绘制图案。
- 编写canvas标签并指定宽高
- 获取canvas DOM对象
- 获取Canvas对象
- 设置绘图属性
- 调用API
2.3.2 Svg
SVG 是一种基于XML的图像文件格式，可以用于绘制矢量图形。
- 编写svg标签并指定宽高
- 编写sbg绘图标签
- 编写绘图属性和样式
2.3.3 WebGL
WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。
2.4 第三方服务
DataV
组件库基于Vue （React版 (opens new window)） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用
三、总结
人类是视觉动物，一张简单的数据可视化图表在传递大量信息的同时，能更加直观地阐述观点，为浏览者带来更深刻的印象。
- 数据可视化让数据易于消化
- 数据可视化有助于识别给定集合中的模式
- 数据可视化有助于讲述更广泛的故事
- 数据可视化使数据更容易记住
「真诚赞赏，手留余香」
