【 echarts】x轴的名称与y轴名称重叠，让x轴 name 靠近底部，使用xAxis的属性nameTextStyle、nameGap、nameLocation解决问题

最新推荐文章于 2025-05-22 05:57:41 发布

原创最新推荐文章于 2025-05-22 05:57:41 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

echarts

3 篇文章

订阅专栏

这段代码展示了如何配置Echarts柱状图的x轴，包括设置类型为类目型，数据源，隐藏刻度线，以及自定义轴名称的样式和位置。nameTextStyle定义了名称内边距，nameGap设置了名称与轴线的距离，nameLocation则指定名称位于中间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题如下图：

在这里插入图片描述

        xAxis: {
          type: 'category',
          data: this.monthData,
          axisTick: {
            show: false
          },
          name:'月份',
          nameTextStyle: {
            padding: [0, 0, 0, 1550]
          },
          nameGap: 8, // x轴name与横坐标轴线的间距
          nameLocation: 'middle'
        },

代码解释

这段代码是一个基于echarts库的柱状图的x轴配置，其中包括以下属性：

type: ‘category’ 表示x轴的类型为类目型，即数据为离散的类别。
data: this.monthData 表示x轴的数据源，即横坐标上的各个类别。
axisTick: { show: false } 表示不显示坐标轴刻度线。
name: ‘月份’ 表示x轴的名称为“月份”。
nameTextStyle: { padding: [0, 0, 0, 1550] } 表示x轴名称的样式，其中padding属性表示名称的内边距，[0, 0, 0, 1550]表示上、右、下、左四个方向的内边距分别为0、0、0、1550。
nameGap: 8 表示x轴名称与横坐标轴线的间距为8个像素。
nameLocation: ‘middle’ 表示x轴名称的位置在中间。

这段代码是用来设置 echarts 图表中 x 轴的名称样式和位置的。其中，name 表示 x 轴的名称，nameTextStyle 表示名称的样式，padding 表示名称与图表的间距，nameGap 表示名称与横坐标轴线的间距，nameLocation 表示名称的位置，这里设置为 middle 表示在 x 轴的中间位置。