ECharts y坐标轴(yAxis)使用详解

yAxis

说明:直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 属性防止同个位置多个 Y 轴的重叠。

1 yAxis.id

说明:组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

默认:无。

参数类型:string。

2 yAxis.show

说明:是否显示 y 轴。

默认:true。

参数类型:boolean。

可选值:

(1)true,显示y轴。

(2)false,隐藏y轴。

3 yAxis.type

说明:坐标轴类型。

默认:value。

参数类型:string。

可选值:

(1)value,数值轴,适用于连续数据。

(2)category,类目轴,适用于离散的类目数据。为该类型时类目数据可自动从series.data或dataset.source中取,或者可通过yAxis.data设置类目数据。

(3)time,时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

(4)log,对数轴。适用于对数数据。

4 yAxis.axisLabel

说明:坐标轴刻度标签的相关设置。

4.1 yAxis.axisLabel.show

说明:是否显示刻度标签。

默认:true。

参数类型:boolean。

可选值:

(1)true,显示刻度标签。

(2)false,隐藏刻度标签。

4.2 yAxis.axisLabel.formatter

说明:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

默认:{value} 。

参数类型:string,Function

可选值:

(1){value} 任意字符,使用字符串模板,模板变量为刻度默认标签 {value}。

(2)function (value, index) {return value;},使用函数模板,函数参数分别为刻度数值(类目),刻度的索引。

实例:

5 yAxis.splitLine

说明:坐标轴在 grid 区域中的分隔线。

5.1 yAxis.splitLine.show

说明:是否显示分隔线。默认数值轴显示,类目轴不显示。

默认:true。

参数类型:boolean。

可选值:

(1)true,显示分割线。

(2)false,不显示分割线。

实例:

经验分享 程序员 微信小程序 职场和发展