坐标轴指二维空间中统计图表中的轴，它用来定义坐标系中数据在方向和值的映射关系的图表组件。

类型 展示形态 备注 优先级 进度
直线坐标轴 image.png 轴、刻度、标签 高
image.png 栅格 中
圆弧坐标轴 image.png 轴、刻度、标签、栅格线 高
半径坐标轴 image.png 轴、刻度、标签、栅格线 高
螺旋线坐标轴 image.png 轴、刻度、标签 低
地理坐标轴 - - 低

其他
刻度与标签 image.png
image.png		 普通轴标签 align tick
分类轴标签 align middle

label不需要align
旋转时锚点设置
image.pngimage.pngimage.png 极坐标、螺旋坐标下标签与刻度的对齐方式：水平、平行于轴线、垂直于轴线

响应

类型 展示形态 对象 优先级
文本换行 image.png 文本 中
文本缩略 image.png
image.png		 文本、时间 高
旋转 image.png
image.png
image.png		 文本、数字、时间 高
抽样 image.png
image.png		 数字、时间 中

配置项

AxisBaseCfg

  • type: ‘linear’ | ‘arc’ | ‘helix’ 类型
  • title: false | AxisTitleCfg
  • axisLine: false | AxisLineCfg 轴线
  • ticks: TickDatum[] 刻度数据
  • ticksThreshold: false | number 刻度数量阈值，超过则进行重新采样
  • tickLine: false | AxisTickCfg 刻度线
  • label: false | AxisLabelCfg 标签文本
  • subTickLine: false | AxisSubTickCfg 子刻度线
  • verticalFactor: -1 | 1 -1 | 1 label和tick在轴线向量的位置，-1-向量右侧，1-向量左侧

直线坐标轴 LinearCfg

AxisBaseCfg

  • startPos: [number, number] 轴的起始坐标
  • endPos: [number, number] 结束坐标
  • width: ~~number 宽度~~
  • height: ~~number 高度~~

圆弧坐标轴 ArcCfg

AxisBaseCfg

  • startAngle: number 0 弧度、角度均可
  • endAngle: number 2PI
  • radius: number 0
  • center: [number, number] [0, 0] 圆心位置

螺旋坐标轴 HelixCfg

Axis - 坐标轴 - 图19

AxisBaseCfg

  • a: number 参数a
  • b: number 参数b
  • startAngle: number 0 螺旋线开始角度
  • endAngle: number 2PI 螺旋线结束角度
  • 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 false 末尾追加tick，一般用于label alignTick 为 false 的情况

标签 AxisLabelCfg

  • type: ‘text’ | ‘number’ | ‘time’ 标签文本类型，会影响缩略策略
  • style: MixAttrs
  • alignTick: boolean label是否与Tick对齐
  • align: ‘normal’ | ‘tangential’ | ‘radial’ 标签文本与轴线的对齐方式，normal-水平，tangential-切向 radial-径向
  • formatter: (tick: TickDatum) => string
  • offset: [number, number] [0, 0] 在平行、垂直于刻度线方向上的偏移量
  • overlapOrder: ‘autoRotate’ | ‘autoEllipsis’ | ‘autoHide’[] 处理label重叠的优先级
  • margin: [number, number, number, number] [0, 0, 0, 0] 标签外边距，在进行自动避免重叠时的额外间隔
  • autoRotate: boolean 旋转度数，默认垂直或平行于刻度线
  • optionalAngles: number[] 自动旋转的角度选择范围
  • rotate: number 0 范围[-90, 90] 手动指定后autoRotate便失效
  • autoHide: boolean label过多时隐藏部分
  • autoHideTickLine: boolean 隐藏label时，同时隐藏掉其对应的tickLine
  • minLabel: number 最小label数量
  • autoEllipsis: boolean label过长时缩略
  • ellipsisStep: string | number 缩略步长，传入string时将计算其长度（下同）
  • minLength: string | number 文本像素最小长度（缩略的最小像素长度）
  • maxLength: string | number Infinity 单个label的最大长度

子刻度线 AxisSubTickLineCfg

  • length: number 2 刻度线长度
  • count: number 4 两个刻度之间的子刻度数
  • style: MixAttrs
  • offset: number 0 子刻度线在垂直于轴线切线方向的偏移量

刻度数据 TickDatum

  • value: number
  • text: string 默认使用value
  • state: State ‘default’
  • id: string 默认使用索引作为id