前言

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

前端数据可视化系列：三大数据可视化工具（G2、Echarts、BizCharts）（前章）相关推荐

Python数据分析学习系列八数据规整：聚合、合并和重塑
Python数据分析学习系列八数据规整:聚合.合并和重塑资料转自(GitHub地址):https://github.com/wesm/pydata-book 有需要的朋友可以自行去github下 ...
hbase可视化工具_做数据可视化，三大热门BI工具试用总结
什么BI分析工具好用?今天通过3款BI产品Power BI.FineBI.亿信ABI为范例,进行对比分析. 一.产品背景 Power BI是微软的,14年15年开始初见苗头,之前主要是基于Excel的 ...
数据科学系列：plotly可视化入门介绍
导读在入道数据岗位之初,曾系列写过多个数据科学工具包的入门教程,包括Numpy.Pandas.Matplotlib.Seaborn.Sklearn等,这些也构成了自己当初的核心工具栈.在这5个工具包 ...
数据可视化系列-04数据大屏基础知识
文章目录 5.销售数据看板 5.1 了解数据大屏基础知识 1.数据大屏简介: 2.数据大屏使用场景 3.数据大屏分类 5.2 数据大屏的设计: 1.大屏前端设计流程 2.数据大屏设计尺寸解析 3.可视 ...
大数据毕设/课设 - 数据大屏监控可视化设计与实现
文章目录 0 前言 1 介绍 2 实现效果 3 部分关键代码 4 项目源码获取方式 0 前言 Hi,大家好,今天给大家介绍一个大数据可视化项目,大家可以用于自己的课设或毕设,可以灵活耦合任意数据,为自 ...
电信运营商的三大数据域——B域，O域，M域
O域(运营域).B域(业务域).M域(管理域)特指电信行业大数据领域的三大数据域. B域(业务域)= business support system的数据域, O域(运营域)= operation s ...
简述电信运营商的三大数据域B域，O域，M域
简述电信运营商的三大数据域B域,O域,M域 O域(运营域).B域(业务域).M域(管理域)特指电信行业大数据领域的三大数据域. B域(业务域)= business support system的数据域 ...
数据可视化系列-06数据分析工具QuickBI
文章目录数据可视化系列-06数据分析工具QuickBI 一文介绍QuickBI Quick BI 的基本对象快速入门 Quick BI产品架构界面说明菜单栏我的看板工作台首页通过仪表板分析 ...
大数据可视化系列一:可视化工具选择
在这个全民创业的火热年代,枯燥乏味的数据统计居然也靠"大数据"概念咸鱼翻身,突然变得炙手可热起来.既然大数据这么洋气,当然要好好钻研.梦想还是要有的,万一靠这发财了呢! 一,数据可 ...
数据可视化系列-01大数据可视化基础
文章目录 1.概述 2.大数据可视化基础 2.1 数据可视化基础知识 1.数据可视化简史: 2.数据可视化是什么: 3.数据可视化的分类: 4.数据可视化流程: 5.数据可视化的意义: 2.2 认识B ...

前端数据可视化系列：三大数据可视化工具（G2、Echarts、BizCharts）（前章）

前言