前端可视化图表选型

Echats

参考地址：https://echarts.apache.org/examples/zh/index.html

Echarts的设计出发点是图表。基于每一个图表类型，提供图表中数据相关的图形映射配置以及一些图表间通用的基本组件配置(如axis, legend, tooltip等)。2012年发布至今，现在已经更新到5.0.2版本。

UI设计风格：
3d图表支持：
更详细的api文档：

更完善社区作品：

Antv

参考地址：https://antv.vision/zh

Antv是蚂蚁集团数据可视化团队近几年研发的可视化解决方案。拥有更好看的UI风格和移动端适配解决方案。AntV(G2)的设计出发点是图形。提供图形基本元素不同特征到数据的映射方法。G2对可视化的理解是微观的、拆解的。这使得G2在数据对图形的控制上要更自由，更抽象通用。你会关心颜色要怎么映射到数据大小上，但是你不需要关心这种类型的图表是否允许你这样去做，这意味着你可能会写出各种非常见的图表类型。

更清晰的分类：

api文档：

UI设计风格：

Echarts和Antv对比：

1. UI风格上：配色上antv相对百搭一点，比echarts好看得多，直接拿来用不换配色也是可以的。echarts默认颜色虽然丑，但它是可以自己改颜色的。
2. 动效方面：数据变动时的转场动效，3D等方面Echarts要更出色一些。
3. 3d立体类型图表：antv没有，echarts完胜。
4. 地图功能上：echarts更优，自由度更高，有普通模式的地图模式，有geo模式可以使用经纬定点的地图两种，前段时间又解决了我一个issues使得两种地图可以合并联动。
5. 数据处理：antv附带有一系列的数据处理API，比如一些csv数据处理之类的。echarts没有，用echarts的可能要自己撸一套。
6. 对比antv的g2和echarts,文字的处理上echarts表现更加优秀。
7. 文档上echarts是碾压的。生态上echarts由于接口更加简单易用，使得与其他前端框架的融合都是很轻的一层，用户仍可以参考原有的文档。g2的话比较诟病的是bizcharts/viser等对框架的封装使得不熟悉的新手必须要两边文档都去看，然后两边文档又都不成熟。
8. 性能与体验方面，echarts目前还是领先于G2。Echarts的使用体验智能用丝滑来描述，性能非常好，毕竟是国内可视化的老大哥。
9. 移动端适配方面antv优于echarts

D3

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.

参考地址：https://d3js.org/

UI风格:

类似jquery的api文档：

D3和Echarts对比：

D3：

1. 更强大的自由操作
2. 兼容到IE9以上以及所有的主流浏览器
3. D3通过svg来绘制图形
4. 可以自定义事件
5. 更底层，基本所有功能图表都要自己手动绘图实现
6. 封装度低，开发成本比较高

Svg：

1. 不依赖分辨率
2. 基于xml绘制图形，可以操作dom
3. 支持事件处理器
4. 复杂度高，会减慢页面的渲染速度

Echarts：

1. 封装好的方法直接调用
2. 兼容到ie6以及以上的所有主流浏览器
3. echarts通过canvas来绘制图形
4. 封装好的，直接用，不能修改

Canvas：

1. 依赖分辨率
2. 基于js绘制图形
3. 不支持事件处理器
4. 能以png或者jpg的格式保存图片

Highcharts

参考地址：https://www.highcharts.com.cn/demo/highcharts

Highcharts是挪威的一家公司开发，用纯 JavaScript 编写的一个图表库。功能强大，但是分版本付费。前几年很多公司在使用，但是随着Echarts的逐步完善，Highcharts的优势不再。

UI设计风格：

详细的api：

Chart.js

参考地址：https://www.chartjs.org/docs/latest/

Chart.js 是一个基于 HTML5 的简单的面向对象的图表库，支持包括 IE7/8 和所有现代浏览器。支持六种图标：曲线图（Linecharts）、柱状图（Barcharts）、雷达图（Radarcharts）、饼状图（Piecharts）、极坐标区域图（Polararea charts）以及圆环图（Doughnutcharts）。并且带有动画效果（animated），支持 retina 屏。界面小清新很漂亮。缺点就是支持的图表不够全面，很难满足多样化的产品图表绘制需求。

UI设计风格：

另外还有一些非主流的可视化图表库，例如c3、zrender、sketch.js就不一一赘述，感兴趣可以点击链接访问。