坐标轴

配置坐标轴tick数量配置坐标轴最大值最小值配置坐标轴标题配置坐标轴样式

分类轴:catergoryAxis

功能描述: 用于展示分类数据映射信息的坐标轴,柱状图 xAxis 及条形图 yAxis 都属于分类轴

默认配置:

visible: true,
grid: {
    visible: false,
},
line: {
    visible: true
},
tickLine: {
     visible: true,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: false,
    offset: 12,
},
细分配置 类型 功能描述
visible boolean 是否可见
line object 坐标轴轴线
- visible: boolean 是否可见
- style:object 轴线样式
grid object 网格线
- visible: boolean 是否可见
- line:object 网格线样式
label object 坐标轴标签
- visible: boolean 是否可见
- formatter: function  坐标轴标签格式化
- suffix: string 后缀
- offsetX: number 位置在 x 方向上的偏移量
- offsetY:number 位置在 y 方向上的偏移量
- style:object 样
-autoHide: boolean 是否自动隐藏
-autoRotate: boolean 是否自动旋转
tickLine object 坐标轴刻度
- visible:boolean 是否可见
- style: object 样式
title object 坐标轴标题
- visible: boolean 是否可见
- text: string 标题文字
- offset: number 位置偏移量
- style:object 样式

linearAxis

功能描述: 用于展示连续性映射数据的坐标轴,如柱状图、折线图的 yAxis

默认配置:

visible: true,
grid: {
    visible: true,
},
line: {
    visible: false,
},
tickLine: {
    visible: false,
},
label: {
    visible: true,
},
title: {
    visible: true,
    offset: 12,
},
细分配置 类型 功能描述
visible boolean 是否可见
tickCount number 坐标轴刻度数量
tickInterval number 坐标轴刻度间隔
min number 设置坐标轴最小值
max number 设置坐标轴最大值
line object 坐标轴轴线
- visible: boolean 是否可见
- style:object 轴线样式
grid object 网格线
- visible: boolean 是否可见
- line:object 网格线样式
label object 坐标轴标签
- visible: boolean 是否可见
- formatter: function 坐标轴标签格式化 DEMO
- suffix: string 后缀
- precision:number  标签精度,如配置为 2,则格式化为 2 位小数
- offsetX: number 位置在 x 方向上的偏移量
- offsetY:number 位置在 y 方向上的偏移量
- style:object 样
-autoHide: boolean 是否自动隐藏
-autoRotate: boolean 是否自动旋转
tickLine object 坐标轴刻度
- visible:boolean 是否可见
- style: object 样式
title object 坐标轴标题
- visible: boolean 是否可见
- text: string 标题文字
- offset: number 位置偏移量
- style:object 样式

定义

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

何时使用

在二维笛卡尔坐标系中,轴通常为水平方向的横轴(x 轴)和竖直方向的纵轴(y 轴)。极坐标系中,轴分为切向的切向轴(angle)和径向轴(radius)。

元素

轴的元素包括:轴线、轴刻度线、轴标签和轴标题和坐标网格线。

轴类型

轴通常分为:连续轴、时间轴、分类轴;他们同时存在于直角坐标系(如折线图、柱状图)和极坐标系(如饼图、环图、雷达图)中。

常见轴如下图所示:

轴标题

何时使用:通常用来描述当前轴的主题 设计建议:在图表内容无法对当前轴的主题和单位进行准确描述时,建议加上轴标题,且后跟数据单位。

:生产总值(亿元)

轴标签

设计建议: 可根据图表类型设置轴标签是否显示、旋转角度以及显示间隔。

默认方案: 连续轴、时间轴默认自动抽样 + 不旋转;分类轴默认自动旋转 + 自动省略。

轴元素的显示策略

设计建议: 轴上所有的元素可根据图表类型设置不同的显示策略。

1、折线、面积图为例

2、柱状图为例

3、条形图为例

4、散点图为例

另外: 上面 4 个设计建议中提到的,轴标签「若图形区域内有数据标签」,则轴标签可以考虑隐藏,如下图: