ECharts x坐标轴(xAxis)使用详解

偏执的太偏执、 2023-10-06 13:18 31阅读 0赞

##  ##

## xAxis ##

说明：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

## 1 xAxis.show ##

说明：是否显示 x 轴。

默认值：true。

参数类型：boolean。

可选值：

（1）true，显示x轴。

（2）false，隐藏x轴。

## 2 xAxis.data ##

说明：设置 x 轴上的值。

默认值：\[\]。

参数类型：Array。

## 3 xAxis.boundaryGap ##

说明： x 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。

默认值：true。

参数类型：boolean，Array。

可选值：

（1）true，x坐标轴两边留白。

（2）false，x坐标轴两边不留白。

（3）\['30%', '20%'\]。

实例：

[ECharts 使用xAxis.boundaryGap使x轴两边不留空白![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/107424107][ECharts _xAxis.boundaryGap_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_107424107]

## 4 xAxis. axisLabel ##

说明：x坐标轴刻度标签。

### 4.1 xAxis. axisLabel.show ###

说明：是否显示x坐标轴刻度标签。

默认值：true。

参数类型：boolean。

可选值：

（1）true，显示x坐标轴刻度标签。

（2）false，不显示x坐标轴刻度标签。

### 4.2 xAxis.axisLabel.color ###

说明：刻度标签文字的颜色，支持回调函数。

默认值：'\#333'。

参数类型：Color，Function。

可选值：

（1）'red','\#ccc'。

（2）color: function (value, index) \{ return value >= 0 ? 'green' : 'red'; \}。

实例：

[ECharts 使用xAxis.axisLabel. color设置x坐标轴刻度标签颜色![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/108917412][ECharts _xAxis.axisLabel. color_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917412]

## 5 xAxis.axisLine ##

说明：x坐标轴轴线。

### 5.1 xAxis. axisLine.show ###

说明：是否显示x坐标轴轴线。

默认值：true。

参数类型：boolean。

可选值：

（1）true，显示x坐标轴轴线。

（2）false，不显示x坐标轴轴线。

### 5.2 xAxis.axisLine.lineStyle ###

说明：是否显示x坐标轴轴线样式。

#### 5.2.1 xAxis.axisLine.lineStyle.color ####

说明：刻度标签文字的颜色，支持回调函数。

默认值：'\#333'。

参数类型：Color。

可选值：请参考以下博客。

[ECharts color属性设置（RGB，透明度，线性渐变，径向渐变，纹理填充）![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/108917608][ECharts color_RGB_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917608]

实例：

[ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色![icon-default.png?t=M85B][icon-default.png_t_M85B]https://blog.csdn.net/qq\_38974638/article/details/108917726][ECharts _xAxis.axisLine.lineStyle.color_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917726]

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

[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 _xAxis.boundaryGap_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_107424107]: https://blog.csdn.net/qq_38974638/article/details/107424107
[ECharts _xAxis.axisLabel. color_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917412]: https://blog.csdn.net/qq_38974638/article/details/108917412
[ECharts color_RGB_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917608]: https://blog.csdn.net/qq_38974638/article/details/108917608
[ECharts _xAxis.axisLine.lineStyle.color_x_icon-default.png_t_M85B_icon-default.png_t_M85B_https_blog.csdn.net_qq_38974638_article_details_108917726]: https://blog.csdn.net/qq_38974638/article/details/108917726
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.337.search-card.all.click]: https://space.bilibili.com/484264966?spm_id_from=333.337.search-card.all.click