antv是蚂蚁金服所提供的一套全新的视图可视化图表库, 与echart虽然都为图表库, 但是从实质出发还是存在一定的差异性, echarts是以图表为主, 而antv则是以图形出发。echarts相对于antv来说是比较成熟的一套图表库, 使用方便、图表种类多， 也是比较容易上手的, 遇到问题网上的解决方式也有很多，而antv是以数据可视化底层引擎，以数据驱动， 相对于echart更具有拓展性和灵活性。

antv针对移动端和PC端有两套不同的图表库， PC端是G2， 移动端是F2。echarts虽然没有区分PC端和移动端，一套代码也可以完成PC端和移动端，但是需要自己手动处理一些兼容性问题。

echart图表部分是固定死的， 如果要制作综合性的图表会比较麻烦，而antv将所有数据改动和配置综合在一个方法内， 制作综合性图表会相对于echarts更加灵活。antv将交互任务分为了三个层次: "数据获取"、“信息加工”、“知识转换”，更加注重了图表的交互性，并且提供了很丰富的API， 在处理交互时比echarts更有优势。

image

antv视图可视化设计是基于Ant Design设计体系所衍生的, 个人觉得antv的图表界面也是略胜一筹的

image

antv G2认识

G2 是基于<The Grammar of Graphics>这套用来描述所有统计图层深层特性的语法规则一书所制作的数据可视化底层引擎，以数据驱动， 自底向上组织最基本的元素形成更高级的元素。提供了图形语法、交互语法、view视图、图表组成等方法，具有高度的易用性和扩展性。

antv ****G2****快速上手

安装

npm安装

npm 安装命令

npm install @antv/g2 --save

安装后可用过import 或者require进行引入

//import 引入
import G2 from '@antv/g2';
//require引入
const G2 = require('@antv/g2');

浏览器引入

在线资源引入

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>

或者

通过 <u style="background-position: center center; background-repeat: no-repeat; margin: 0px; padding: 0px;">https://unpkg.com/@antv/g2@4.0.15/dist/g2.min.js</u> 此链接将js代码复制到本地引入.

使用

• 需要为图表准备一个容器

<div id="c1"></div>

• 创建图表基本信息

const chart = new G2.Chart({
//图表容器ID
container:"c1",
//图表宽度: 数字类型
width:800,
//图表高度: 数字类型
height:500
//或者使用autoFit, 图表自适应容器高度, 默认为fasle
//如果用户已设置高度, 则以设置的高度为准
autoFit: true
})

• 设置图表信息

const list = const data = [
{ name: '张三', score: 50 },
{ name: '李四', score: 90 },
{ name: '王五', score: 85 },
{ name: '赵六', score: 30 }
];

• 载入图表

chart.data(list);

• 绘制图形

//折线图
chart.interval().position('name*score');

• 渲染图层

chart.render();

成果图如下:

image