Axis
坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件
引入
import { Linear, Arc, Helix } from '@antv/gui';基本配置
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title | false | AxisTitleCfg | 标题 | |
| line | false | AxisLineCfg | 轴线 | |
| ticks | TickDatum[] | 刻度数据 | |
| ticksThreshold | false | number | 刻度数量阈值 | |
| tickLine | false | AxisTickCfg | 刻度线配置 | |
| label | false | AxisLabelCfg | 标签文本配置 | |
| subTickLine | false | AxisSubTickCfg | 子刻度线配置 | |
| verticalFactor | -1 | 1 | 刻度与标签相对于轴线向量的位置。轴线为纵向时,-1 代表在向量左侧, 1 代表在向量右侧; 当轴线为横向时,-1 代表在轴线的上方,1 代表在轴线的下方; 当轴线为弧形时,-1 代表在轴线的内部,1 代表在轴线的外部 | |
直线坐标轴
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| startPos | [number, number] | 轴线起点坐标 | |
| endPos | [number, number] | 轴线终点坐标 | |
圆弧坐标轴
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| startAngle | number | 起始角,弧度、角度均可 | |
| endAngle | number | 结束角 | |
| radius | number | 半径 | |
| center | [number, number] | 圆心位置 | |
螺旋坐标轴
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| a | number | 参数 a | |
| b | number | 参数 b | |
| startAngle | number | 起始角 | |
| endAngle | number | 结束角 | |
| precision | number | 精度,影响螺旋线的绘制 | 0.1 |
标题 AxisTitleCfg
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| content | string | 内容 | |
| style | TextProps | 样式 | |
| position | 'start' | 'center' | 'end' | 位置 | 'start' |
| offset | [number, number] | 偏移量 | [0,0] |
| rotate | number | 旋转角度 | 0 |
轴线 AxisLineCfg
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| style | LineProps | 线条样式 | |
| arrow | {start: MarkerCfg, end: MarkerCfg} | 轴线两端箭头 | |
刻度线 AxisTickLineCfg
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| length | number | 长度 | 5 |
| style | MixAttrs | 带状态的线条样式 | |
| offset | number | 在轴线方向的偏移量 | 0 |
| appendTick | boolean | 末尾追加 tick,一般用于 label alignTick 为 false 的情况 | false |
标签 AxisLabelCfg
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| type | 'text' | 'number' | 'time' | 标签文本类型,会影响缩略策略 | text |
| style | MixAttrs | 带状态的文本样式 | |
| alignTick | boolean | label 是否与 Tick 对齐 | |
| align | 'normal' | 'tangential' | 'radial' | 标签文本与轴线的对齐方式,normal-水平,tangential-切向 radial-径向 | 'normal' |
| formatter | (tick: TickDatum) => string | 标签格式化 | |
| offset | [number, number] | 偏移量 | |
| overlapOrder | 'autoRotate' | 'autoEllipsis' | 'autoHide'[] | 处理 label 重叠的优先级 | |
| margin | [number, number, number, number] | 标签外边距,在进行自动避免重叠时的额外间隔 | [0, 0, 0, 0] |
| autoRotate | boolean | 旋转度数,默认垂直或平行于刻度线 | true |
| rotateRange | [number, number] | 自动旋转的范围 | [0, 90] |
| rotate | number | 范围[-90, 90] 手动指定旋转角度,配置后自动旋转失效 | |
| autoHide | boolean | label 过多时隐藏部分 | true |
| autoHideTickLine | boolean | 隐藏 label 时,同时隐藏掉其对应的 tickLine | true |
| autoEllipsis | boolean | label 过长时缩略 | true |
| ellipsisStep | number | string | 缩略步长,传入 string 时将计算其长度(下同) | |
| minLength | number | string | label 的最小长度 | |
| maxLength | number | string | label 的最大长度,无穷大表示不限制长度 | Infinity |
子刻度线 AxisSubTickLineCfg
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| length | number | 长度 | 2 |
| count | number | 两个刻度之间的子刻度数 | 4 |
| style | MixAttrs | 带状态的线条样式 | |
| offset | number | 在轴线方向的偏移量 | 0 |
数据 TickDatum
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| value | number | 范围 [0, 1], 表示在轴线上的位置 | |
| text | string | 显示的标签内容 | value |
| state | 'default'|'active' | 状态 | 'default' |
| id | string | id | index |