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

小灰灰 2023-10-06 14:18 4阅读 0赞

## yAxis ##

说明：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 [offset][] 属性防止同个位置多个 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;\}，使用函数模板，函数参数分别为刻度数值（类目），刻度的索引。

实例：

[ECharts 使用yAxis.axisLabel.formatter自定义Y轴刻度标签--两种方法（字符串模板和函数模板）![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/107824448][ECharts _yAxis.axisLabel.formatter_Y_--_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_107824448]

## 5 yAxis.splitLine ##

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

### 5.1 yAxis.splitLine.show ###

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

默认：true。

参数类型：boolean。

可选值：

（1）true，显示分割线。

（2）false，不显示分割线。

实例：

[ECharts 使用yAxis.splitLine.show不显示y坐标轴分隔线![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/108890469][ECharts _yAxis.splitLine.show_y_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108890469]

[旭东怪的个人空间\_哔哩哔哩\_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。![1d5330f89298af44e002d6b2230b47659e28c05a.jpg][]https://space.bilibili.com/484264966?spm\_id\_from=333.1007.0.0][Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]

[offset]: https://echarts.apache.org/zh/option.html#yAxis.offset
[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[ECharts _yAxis.axisLabel.formatter_Y_--_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_107824448]: https://blog.csdn.net/qq_38974638/article/details/107824448
[ECharts _yAxis.splitLine.show_y_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108890469]: https://blog.csdn.net/qq_38974638/article/details/108890469
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0