Day3 AntV/G2图表的组成
简介
为了更好的使用G2进行数据可视化，我们需要先了解G2图表的组成及其相关概念。
完整的G2图表组成如下图所示：可以看出图表主要由axes(坐标轴axis的复数),tooltip(提示信息),guide(辅助元素),legend(图例),geom(几何标记 即用何种图形来展示数据，此处为点图)组成的，理解了基本组成，接下来看一下代码的编写。
const chart = new G2.Chart({ width: 1000, height: 500, data: data, padding: [ 20, 80, 60, 80 ] options: { // 在这里声明所有的配置属性 } });
// 以上为配置图表所有信息 chart.render();//配置完成后的渲染命令
以上代码是G2绘制图表的基本代码框架，axes,tooltip,guide,legend,geom这五块的配置信息既可以在options中设置，也可以单独设置，具体每一种属性的设置会在之后章节进行解析。
1.图例 LEGEND
图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。
legend配置方式：
- 直接在实例化chart时的options中定义legends属性(注意这里是复数,其他几个组成部分也是这个情况)
- 调用chart.legend()方法定义
options:{ legends:false } //chart.legend(false);
以上两种配置方式对tooltip的设置效果是一样的,都会让图例不显示，若同时设置，则只会chart.legend方法设置生效。
注意：legend图例功能仅在chart上支持配置，在view（关于view后续会提到，现在可以把当成chart的一个子图）上不支持。
2.坐标轴AXES
坐标轴分为两种：
- 直角坐标系：直角坐标系中分为X轴和Y轴
- 极坐标系：极坐标系由极轴和极径组成。
每个坐标轴又由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（grid）组成。
axes配置方式：同legend
3.集合标记 GEOM
几何标记（Geometry），即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属性。
geoms配置方式：同legend
4.提示信息 TOOLTIP
当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。
tooltip配置方式：同legend
注意：tooltip图例功能仅在chart上支持配置，在view（关于view后续会提到，现在可以把当成chart的一个子图）上不支持。
5.辅助标记 GUIDE
当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 guide。
tooltip配置方式：同legend
6.总结
图标组成五大块：
- axes(坐标轴)
- tooltip(提示信息)
- guide(辅助元素)
- legend(图例)
- geom(几何标记）
其中每一块都有两种配置方式：
- options属性配置
- chart方法配置
两者效果一样，若同时设置，则只会chart方法设置生效。
注意点：Tooltip（提示信息）和 Legend（图例）仅在 Chart 上支持设置，在view上不支持，view相关知识会在之后的章节进行讲解。