提示信息
分类轴: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 个设计建议中提到的,轴标签「若图形区域内有数据标签」,则轴标签可以考虑隐藏,如下图: