Antv蚂蚁金服提供的数据可视化解决方案是一系列解决方案的集合，包括G2、G6、F2、L7以及一套完整的图表使用和设计规范。由于有各大厂商的支持，AntV迭代稳定，文档和例子也很齐全。本次由于业务需要，使用了AntVG2数据可视化引擎，所以想记录下自己的使用和学习心得。G2是一套面向常规统计图表的数据驱动、交互性强的可视化图形语法，具有很强的可用性和可扩展性。有了G2，你就可以使用Canvas或者SVG一条语句构建多种交互式统计图表，而无需关注图表的各种繁琐实现细节。博文原文链接G2使用npm安装npminstall@antv/g2--save下面以示例代码（G2@4.0版本）分析G2基本折线图：import{Chart}from'@蚂蚁/g2';constdata=[{year:'1991',value:3},{year:'1992',value:4},{year:'1993',value:3.5},{year:'1994',value:5},{year:'1995',value:4.9},{year:'1996',value:6},{year:'1997',value:7},{year:'1998',value:9},{year:'1999',value:13},];//初始化，指定容器DOMid,heightconstchart=newChart({container:'container',autoFit:true,height:500,});//datadatachart.data(data);//刻度测量配置，生成坐标轴刻度值chart.scale({year:{range:[0,1],},value:{min:0,nice:true,},});//Tooltip提示信息是指当鼠标悬停在图形上时，以提示框的形式显示该点的数据。chart.tooltip({showCrosshairs:true,//显示Tooltip辅助线shared:true,});//Geometry;//使用line绘制折线图//使用position通道将对应的变量映射到x和ypositionspace;//使用label显示value值；chart.line().position('year*value').label('value');//使用point绘制点//使用position将对应变量映射到x和y位置空间；chart.point().position('year*value');//渲染图表.render();以上代码摘自官方示例代码，安视G2基础折线图会发现G2图表调用是通过函数链调用完成的。和Echart相比，我个人觉得G2的开发过程比较顺畅，用起来也比较舒服。（不管什么前端框架，用起来都很香）。以上只是以折线图为例，大致说明了创建G2图表的一般调用流程。当然，G2也支持其他类型的图表。下面以我之前用过的饼图和直方图为例，梳理一下G2的大概脉络。数据变量不会出现在下面的G2饼图/直方图示例中。相关实际图表请参考完整示例代码##饼图。完整的例子可以参考：https://g2.antv.vision/zh/examples/pie/basic#labellineconstchart=newwindow.G2.Chart({container:domID,forceFit:true,height:210,宽度：230}）；图表数据（数据）；//coordinate坐标系//theta：一种特殊的极坐标系，具有固定的半径，仅将数据映射到角度，常用于饼图绘制；chart.coordinate('theta');//工具提示提示//不显示提示标题；chart.tooltip({showTitle:false});//Geometry几何//使用区间绘制饼图；//使用position通道将对应的变量映射到percent；//使用颜色通道，根据item字段的数据值映射颜色；//使用adjust调整数据，将同一类别的数据值相加；chart.interval().position('percent').color('item').adjust('stack');//legend图例//不显示Legend;chart.legend(false);chart.render();几何图形GeometryAPI——区间用于绘制柱状图、直方图、夜莺玫瑰图、饼图、条形环图（玉雀图charts),Funneldiagram等，position和color是Geometry的通道映射规则。图例legend、prompttooltip、坐标系坐标、data数据都是独立的控制图。##直方图，完整示例参考：https://g2.antv.vision/zh/examples/column/basic#basicconstchart=newwindow.G2.Chart({container:domID,autoFit:true,height:200,width:400});chart.data(data1);//scalemeasurement//num是y轴的值，nice=true是自动调整y轴的scalechart.scale('num',{nice:true});chart.tooltip({showMarkers:false});//interaction交互//当鼠标在画布上移动时，相应区域出现背景框chart.interaction('active-region');//Geometry//使用interval绘制直方图；chart.interval().position('gydw_mc*num');chart.render();G2基类上出现了一个新的方法interaction，用于调整图表与用户的交互显示。Geometry—line,point,interval,area（画线，点，饼/柱，面积图）等数据data测量scalelegendlegendprompttooltipinteractioncoordinatesystemcoordinate这些是例子中出现的方法，如果按照官方介绍，上面是G2图中的基类。当然上面只包含了一部分，还有其他的基类，比如坐标轴Axis，滚动条Scrollbar...等。window.G2.Chart创建图表后，可以通过图表实例调用相关基类方法自定义图表，最后进行渲染。对于不同的配置，只需要找到相关的基类属性方法即可。只要了解了相关的基类配置，就会对图表的使用相当得心应手。让chart=window.G2.Chart({container:domID});chart.data(data);chart.scale({x:{nice:true},x:{nice:true}});chart.interval().position('gydw_mc*num');chart.line().position('year*value').label('value');chart.point().position('year*value');图表。tooltip({showMarkers:false});chart.legend(false)chart.render();希望以上内容对您使用antvG2有所帮助，希望对您的转机有所帮助。参考：AntdG2官方文档书尊网：G24.x官方教程
