在学会怎么配置坐标轴之前，我们需要了解G2中坐标轴的组成。

坐标轴的组成

G2中坐标轴一共由5部分组成，其中各组成部分及其对应配置参数如下图所示：

组成部分 对应配置参数
标题 title
坐标轴线 line
文本 label
刻度线 tickLine
网格 grid

坐标轴各部分代表的含义如下图所示：
Day9 Axis用法解析 - 图1

坐标轴的配置

同其他属性一样，坐标轴的配置也有两种方式：

  • 属性式配置

    1. options:{
    2.  axes: {
    3.              field: {
    4.                   title:{},
    5.                   line:{},
    6.                   label:{},
    7.                   tickLine:{},
    8.                   grid:{}
    9.               }
    10.           }
    11. }

  • 函数式配置

  1.     chart.axis("field",{
  2.         title:{},
  3.         line:{},
  4.         label:{},
  5.         tickLine:{},
  6.         grid:{}
  7.     });

说完坐标轴的总体配置方式，下面给大家介绍坐标轴各部分的具体配置。

标题 title

title的可配置参数如下：

  1. title: {
  2.   autoRotate: {boolean}, // 是否需要自动旋转，默认为 true
  3.   offset: {number}, // 数值，设置坐标轴标题距离坐标轴线的距离
  4.   // 设置标题的文本样式
  5.   textStyle: {
  6.     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  7.     fill: '#404040', // 文本的颜色
  8.     fontSize: '12', // 文本大小
  9.     fontWeight: 'bold', // 文本粗细
  10.     rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
  11.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  12.   },
  13.   position: 'start' | 'center' | 'end' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
  14. }

注意：在G2默认主题中，坐标轴标题是默认不显示的。

  1. //name代表下图中x轴的变量，value表示y轴的变量 
  2. axes: {
  3.                 name: {
  4.                 }
  5. }

image.png
我们发现当未设置name即X轴中的title时，默认是不显示的，如果想要显示坐标轴标题，则必须将title属性设置为真值（备注：在JS中除了null、undefined、0、false、””这5个假值，其他都为真值），如果需要修改title的样式位置等属性时，只要对title内部进行属性设置就可以。

  1. axes: {
  2.                 name: {
  3.                   title:{
  4.                      textStyle: {                    //标题样式设置
  5.                             fontSize:20, 
  6.                             fill:"red"
  7.                         }
  8.                   }    
  9.                 }
  10. }

image.png
从上图可以看出，当我们将name中的title设置为真值时，坐标轴默认的标题是该数字字段对应的属性名（这里X轴对应的属性名为name），如果要更改坐标轴的标题，需要到度量scales中的alias属性修改，修改方式如下：

  1. scales: {
  2.                 name: {
  3.                     type: "cat",
  4.                     alias: "水果名"    //坐标轴标题名修改
  5.                 }
  6.             }
  7.  axes: {
  8.                 name: {
  9.                       title:{
  10.                      textStyle: {                    //标题样式设置
  11.                             fontSize:20, 
  12.                             fill:"red"
  13.                         }
  14.                   }    
  15.                 }
  16.             }

image.png
总结：坐标轴的title属性主要是对标题样式的一些配置，而如果要修改坐标轴标题的名字，则需要到度量scales中的alias属性中设置。
**

坐标轴线 line

line可配置参数如下：

  1. line: {
  2.   stroke: {string}, // 坐标轴线的颜色
  3.   strokeOpacity: {number}, // 坐标轴线的透明度，数值范围为 0 - 1
  4.   lineDash: {array}, // 设置虚线的样式，如 [2, 3]第一个用来表示实线的像素，第二个用来表示空白的像素。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值
  5.   lineWidth: {number} // 设置坐标轴线的粗细
  6. }

这一块参数设置比较简单，自行实验调参即可，这里不再详述，放一个虚线坐标轴的配置和效果图：

  1.  line:{
  2.                         stroke:"red",
  3.                         lineDash:[2,3],
  4.                         lineWidth:2
  5.        }

image.png
注意：G2默认主题中，y轴坐标线默认不显示，如果想让它显示，可将line属性设置为真值，如想进一步设置y轴样式，可对y轴对应的字段名的line参数进行配置。
**

文本 label

label可配置参数如下：

  1. label: {
  2.   offset: {number}, // 数值，设置坐标轴文本 label 距离坐标轴线的距离，图例legend也会移动
  3.   offsetX: {number}, // 在 offset 的基础上 x 方向的偏移量
  4.   offsetY: {number}, // 在 offset 的基础上 y 方向的偏移量
  5.   // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
  6.   rotate: 30, // 注意，旋转角度的配置不再在 textStyle 里配置
  7.   textStyle: {
  8.     rotate:30,//label沿顺时针方向的旋转度数
  9.     textAlign: 'center', // 文本对齐方向，可取值为： start center end
  10.     fill: '#404040', // 文本的颜色
  11.     fontSize: '12', // 文本大小
  12.     fontWeight: 'bold', // 文本粗细
  13.     textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  14.   } | (text) => {
  15.     // text: 坐标轴对应字段的数值
  16.   },
  17.   autoRotate: {boolean}, // 文本是否需要自动旋转，默认为 true

注意：目前的3.4版本的G2对于label还存在一个bug，就是在label的textStyle中设置rotate只有首个label生效，但是在textStyle外部设置label全部有效。
**

刻度线 tickLine

tickLine可配置参数如下：

  1. tickLine: {
  2.   lineWidth: 1, // 刻度线宽
  3.   stroke: '#ccc', // 刻度线的颜色
  4.   strokeOpacity: 0.5, // 刻度线颜色的透明度
  5.   length: 5, // 刻度线的长度，可以为负值（表示反方向渲染）
  6.   alignWithLabel:true//设为负值则显示为category数据类型特有的样式
  7. }

示例：

  1.   tickLine:{
  2.                         stroke:'black',
  3.                         length:5,    //注意正方向是x轴反方向
  4.                         lineWidth:2
  5.                     }

image.png
注意：X轴的tickLine是默认存在的，Y轴的axis配置信息都是默认不存在的，包括tickLine。

网格 grid

网格可配置参数如下：

  1. grid: {
  2.   align: 'center', // 声明网格顶点从两个刻度中间开始，默认从刻度点开始
  3.   type: 'line' | 'polygon', // 声明网格的类型，line 表示线，polygon 表示矩形框
  4.   // 当网格类型 type 为 line 时，使用 lineStyle 设置样式
  5.   lineStyle: {
  6.     stroke: '#d9d9d9', // 网格线的颜色
  7.     lineWidth: 1, // 网格线的粗细
  8.     lineDash: [4, 4 ] // 网格线的虚线配置，第一个参数描述虚线的实部占多少像素，第二个参数描述虚线的虚部占多少像素
  9.   },
  10.   hightLightZero: true, // 默认不高亮0轴
  11.   zeroLineStyle: { // 当且仅当 highLightZero 为 true 时生效
  12.     stroke: '#595959',
  13.     lineDash: [ 0, 0 ]
  14.   },
  15.   alternateColor: '#ccc' | [ '#f80', '#ccc' ], // 当网格类型 type 为 polygon 时，使用 alternateColor 为网格设置交替的颜色，指定一个值则先渲染奇数层，两个值则交替渲染
  16.   hideFirstLine: true | false, // 是否隐藏第一条网格线，默认为 false
  17.   hideLastLine: true | false // 是否隐藏最后一条网格线，默认为 false
  18. }

常用的grid属性配置如下：

  1. grid:{
  2.                         type: 'line',
  3.                         lineStyle: {
  4.                             stroke: 'blue',
  5.                             lineWidth: 1,
  6.                             lineDash: [ 4, 4 ]
  7.                         },
  8.                     }

image.png
注意:G2默认主题下，Y轴默认会生成虚线网格线，X轴默认不会生成网格线。
**

Scale度量和Axis的区别

我们知道Scale和Axis都能对坐标系进行设置，所以在这里比较一下两者的区别：
Scale：度量可以设置坐标轴的刻度点个数，间距等，更多的是对刻度的设置。
Axis：坐标轴更多的是坐标轴刻度和坐标轴的样式设置，但是无法设置刻度。