前言

大数据时代，数据对于个人和企业而言都是至关重要的。但是没有经过处理的数据我们是无法直接使用的，怎么把数据中重要的部分提前并展示出来是我们必须掌握的。对于前端开发而言，把数据展示到界面上是目前行业里必不可少的工作内容。下面介绍以下目前常用的数据可视化插件。主要会介绍（Echarts、BizCharts、G2）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、工具介绍

• 1）echarts
  ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

百度开源：如果react项目中使用，需要下载echarts-for-react
官网地址：echarts官网

• 2）G2
  G2 是一套数据驱动、高交互的数据可视化图形语法，专注于强大的数据能力、丰富的视觉表现力和灵动的交互性，致力于用视觉语言讲述最精彩的数据故事。使用G2不仅可以轻松生成目前开源社区上绝大部分的 2D 统计图表，更可以令各类图形元素像乐高积木一样自由插拔、组合，应对千变万化的可视化需求。

阿里开源（蚂蚁金服）
G2只是antV也就是阿里数据可视化解决方案的一种
antv官网：antv官网
AntV 3.0 已全新升级，主要包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验后方敢与君见。

• 3）bizcharts
  BizCharts 是一个基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表；并且集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。

基于react包安装G2的开源库
需要额外下载@antv/data-set

二、工具优缺点

1、Echarts

优点：

• 1、echarts.js容易使用
  echarts.js的官方文档比较详细，而且官网中提供大量的使用示例供大家使用
• 2、echarts.js支持按需求打包
  echarts.js官网提供了在线构建的工具，可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积
• 3、echarts.js开源
• 4、支持中国地图功能

缺点：

• 1、echarts.js的体积较大
  一个基础的echarts.js都要400K左右，相对于D3.js和hightcharts.js来说都是比较大的
• 2、echarts.js的可定制性差
  说到echarts.js的定制性差，其实不止是包括echarts.js，hightcharts.js也是如此，因为这一类型的数据可视化框架主要是高度的进行分装，所以你在使用的时候只需要设置一下配置就可以了，但是如果是出现了要绘制配置中不支持的图表怎么办，那么你就只能放弃，尝试着使用其他的框架了

2、G2

G2本身是一门图形语法，G2和传统的图表系统（HighCharts，ACharts等）不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形，让你在使用它时候不用关心绘图细节，只需要知道你想通过它怎么展示你关心的数据。echarts更多的是配置options来显示图片，出发点不同。（g2也同样支持配置项声明）

个人感觉使用起来和echarts差不多。

3、BizCharts

BizCharts 是一个基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表；并且集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。

特性

• 基于 G2、React
• 健壮
• 稳定
• 强大的扩展能力
• 高自定义能力

个人觉得：BizCharts相比与G2简单，相比与echarts而言更灵活。

总结

总体来说目前大部分vue项目会使用Echarts作为数据可视化工具。对于BizCharts而言他的组件化思想更符合React的开发理念，因此在React项目中会经常使用。BizCharts是基于G2进行封装的所有G2也适用于React项目，不过因为没有封装过，所有操作起来相比于Bizcharts而言要繁琐一些。（后期更新Echarts 和 Bizcharts的相关学习文档）