前言

前端可视化指的是在网页上渲染各种复杂的统计图表和流程图等表示数据的图，常用于对一些数据进行统计后图表化展示，常在大屏项目中使用。说白了其实也没什么高大上的，就是在网页上实现 ppt 类似的效果。

网页上绘制图形的方式主要有两种：svg 和 canvas。html + css 也可以实现简单的图形样式，但是这并不是一种专门绘图的技术，在很多复杂图形下也很有限制。而 svg 和 canvas 是专门的图形绘制技术。

现在的很多可视化工具，如果是 2d 图形，基本就是基于这两种技术。但如果是绘制 3d 图形，这两种技术就不能用了，需要用到 WebGL 技术，WebGL 基于 openGL 技术。WebGL 不仅可以绘制 3d ，也可以绘制 2d。

如果设计到具体的绘图实现，那还是很需要深度的，需要了解很多数学知识，计算很多值才能绘制出来想要的图形。但是一般情况下，我们提到前端可视化的时候，就是指使用各种可视化库进行图形的绘制。

常用工具库

echarts

echarts 是百度开发的可视化图表库，开源后捐献给 Apache 孵化和维护。
echarts 是很早的一个可视化库了。功能很强大。

D3

d3.js 是一个绘制 3d 图形的很强大的库。

G6

G6 是阿里开发的 antv 系列的产品之一。除了 G6 还有专门绘制流程图的 X6、G2 等等。