Axes 坐标轴

图表中的坐标轴，是用来表示数据之间关系的基本元素，它可以助我们更好地理解数据，并指导我们阅读和分析图表。本教程主要讲解坐标轴的相关概念以及组成，关于坐标轴更加详细的配置及示例，详见配置项文档及示例页面。

坐标轴的组成

根据不同的坐标系（目前 VChart 支持笛卡尔坐标系和极坐标系两种），我们可以将坐标轴分为：

笛卡尔坐标系下的 x 轴和 y 轴

极坐标系下的半径轴和圆弧轴

虽然在不同的坐标系下坐标轴有不同的表现形式，但是坐标轴组件的组成是一致的，均由以下部件组成：

轴标题 title
轴线 domainLine
轴刻度（包含子刻度线）tick & subTick
轴标签 label
网格线（包含子网格线） grid & subGrid

坐标轴的类型

VChart 中目前支持五种类型的坐标轴：

线性轴（type: 'linear'），适用于数值类型数据；
离散轴（type: 'band'），适用于离散数据；
时间轴（type: 'time'），适用于表示时间序列数据，具体的使用可以查看 SequenceChart 时序图 demo；需要注意的是，直方图不支持离散轴，因为直方图用于统计数据间内的频率分布，主轴必须以值区间的形式传入，离散轴不支持该功能。
log 轴（type: 'log'），log 轴的特点是刻度之间的间隔是根据对数函数（通常是以 10 为底）计算的。这意味着数据的每个对数单位（大小单位）具有相同的物理长度，例如从 1 到 10、10 到 100、100 到 1000 等。对于数据的指数增长或指数下降情况，log 轴能够更好地显示数据的相对变化，具体的使用可以查看 log 轴 demo
symlog 轴（type: 'symlog'）, 与 log 轴不同的是，symlog 可以支持负数的情况，具体的使用可以查看 symlog 轴 demo

直角坐标系下的坐标轴配置

在直角坐标系下，X 轴默认为 'band' 类型，Y 轴为 'linear' 类型。当 direction 为 'horizontal' 时，X 默认为 'linear' 类型，Y 轴默认为 'band' 类型。

例如：

普通直角坐标系下，X 轴为离散轴，轴为线性轴：

axes: [
  {
    type: 'band',
    orient: 'bottom' // 声明显示的位置
  },
  {
    type: 'linear',
    orient: 'left' // 声明显示的位置
  }
];

极坐标系下的坐标轴配置

在极坐标系下，半径轴默认为 'linear' 类型，角度轴默认为 'band' 类型。

axes: [
  {
    type: 'band',
    orient: 'angle' // 声明为圆弧轴
  },
  {
    type: 'linear',
    orient: 'radius' // 声明为半径轴
  }
];

轴范围配置

对于线性轴（type: 'linear'/'time'/'log'/'symlog'），我们提供了如下属性用于配置轴的数据范围：

min: 配置数值轴的最小值，优先级高于 zero，nice。
max: 配置数值轴的最大值，优先级高于 zero，nice。
nice: 是否根据数据将轴范围调整到相对规整的数值，比如当配置了 max = 999, nice 并不会将轴范围优化，当配置了 min 和 max，该配置项失效。到 1000。
niceType: 配置 nice 效果的类型，是精度优先还是 tickCount 优先（比如 tickCount 为 2 那 nice 出来的精度就很低）。不配置就默认是 tickCountFirst。
zero: 是否包含 0 值。当配置了 min 和 max，该配置项失效。
expand: 轴范围按比例扩展，如 expand: { min: 0.1, max: 0.1 }当配置了 min 和 max，该配置项失效。

axes: [
  {
    orient: 'left',
    min: 100,
    max: 400
  }
];

对于离散轴（type: 'band'），我们提供了如下属性用于配置轴的数据范围：

domain: 配置离散轴的数值范围。

axes: [
  {
    orient: 'bottom',
    domain: ['x', 'y', 'z']
  }
];

轴 tick 配置

轴 tick 属性上提供了如下配置用于控制 tick 的显示间距、个数等。

tickStep tick 步长。
tickCount 建议的 tick 数量，并不保证结果一定是配置值。
forceTickCount 强制设置的 tick 数量，可以保证 tick 的数量于设置的数值匹配，但是可能由于数据范围导致 tick 值为小数。
tickMode 连续轴 tick 生成算法，自 1.3.0版本开始支持，仅当轴为线性轴时生效。
noDecimals 是否避免小数 tick，自 1.3.0 版本开始支持，仅当轴为线性轴时生效。

axes: [
  {
    orient: 'left',
    tick: {
      tickCount: 5
    }
  }
];

轴标签布局配置

轴采样

坐标轴标签默认开启了防重叠的标签采样能力，通过 axes 属性上对应方向的轴的 label.sampling 属性进行控制，下图为文本过多时默认的展示结果：

我们可以通过 label.minGap 来配置标签之间的间距。

轴组件的标签布局

坐标轴组件本身也提供了轴标签的一些布局策略，包括：

autoHide 自动隐藏
autoRotate 自动旋转
autoLimit 自动省略

这些默认都是关闭的，默认我们采用的是轴采样布局策略来进行轴标签的防重叠，因为轴采样算法时在数据层面进行抽样，然后再绘制坐标轴组件，相比来说性能更好，所以当你需要使用轴组件的标签布局策略时，需要手动开启。

下图展示了在关闭轴采样后，x 轴标签配置了 autoHide、 autoRotate 的效果：

我们也提供了其他关于轴标签布局的 demo：

绘制多个坐标轴

在某些情况下，图表中可能需要绘制多坐标轴，我们只需要按需往 axes 属性中添加坐标轴配置即可。

例如下面的例子，在直角坐标系下，我们绘制双 Y 轴，我们只需要进行如下声明即可：

axes: [
  {
    type: 'linear', // 声明轴类型
    orient: 'left' // 声明轴的显示位置
  },
  {
    type: 'linear', // 声明轴类型
    orient: 'right' // 声明轴的显示位置
  }
];

轴与系列绑定

在多系列的场景下，我们常常期望将轴与不同的系列进行绑定，比如双轴图中，会期望将左右轴分别对应不同的系列。

在 VChart 中，可以给轴配置图表系列的 ID 或者系列的序号，进行绑定。

{
  series: [
    {
      type: 'bar',
      id: 'bar0',
    },{
      type: 'line',
      id: 'line0',
    },
  ],
  axes: [
    {
      type: 'linear', // 声明轴类型
      orient: 'left', // 声明轴的显示位置
      seriesId: ['bar0'] // 声明轴绑定的系列
    },
    {
      type: 'linear', // 声明轴类型
      orient: 'right', // 声明轴的显示位置
      seriesIndex: [1, 2] // 声明轴绑定的系列
    }
  ]
}

多轴同步

我们为多轴提供了 sync 配置，可以用来配置多轴的 0 值对齐，或者 tick 比例对齐。

export interface ILinearAxisSync {
  /**
   * 配置参照的轴 id
   */
  axisId: StringOrNumber;
  /**
   * 是否保持 2 个轴的 0 值对齐
   * @default false
   */
  zeroAlign?: boolean;
  /**
   * 是否使这个轴的 tick 与目标轴保持比例对齐
   * @default false
   */
  tickAlign?: boolean;
}