在使用 ECharts 进行数据可视化时，有时我们希望图表更加简洁，或者只展示 Y 轴的数据信息，而隐藏 X 轴的刻度线（axisLine）和标签（axisLabel）。这在仪表盘、大屏展示或特定设计的图表中非常常见。本文将详细介绍如何使用 ECharts 去除 X 轴的刻度线与标签，并提供完整的实战案例代码。
一、核心概念：ECharts 坐标轴配置
在 ECharts 中，坐标轴的配置主要在
option
对象下的
xAxis
或
yAxis
中进行。要去除 X 轴的刻度线和标签，我们需要关注以下两个属性：
axisLine
(坐标轴轴线)
:
这是坐标轴的轴线，通常是一条直线。
通过设置
axisLine.show = false
可以隐藏它。
axisLabel
(坐标轴刻度标签)
:
这是坐标轴上的数字或文字标签。
通过设置
axisLabel.show = false
可以隐藏它。
此外，通常我们还需要处理
axisTick
(坐标轴刻度)
，即轴线上的小分割线。虽然它与轴线不同，但为了极致的简洁，通常也会一并隐藏。
二、基础设置：隐藏 X 轴刻度线与标签
假设我们有一个基础的柱状图，现在我们需要将其 X 轴的刻度线和标签完全隐藏。
1. 完整配置代码示例
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main’));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: ‘隐藏X轴刻度线与标签示例’
},
// 提示框组件
tooltip: {},
// 图例组件
legend: {
data:[‘销量’]
},
// X轴配置
xAxis: {
type: ‘category’, // 类型：类目轴
data: [“衬衫”, “羊毛衫”, “雪纺衫”, “裤子”, “高跟鞋”, “袜子”],
// — 核心设置开始 —
// 1. 隐藏坐标轴轴线
axisLine: {
show: false
},
// 2. 隐藏坐标轴刻度
axisTick: {
show: false
},
// 3. 隐藏坐标轴标签
axisLabel: {
show: false
}
// — 核心设置结束 —
},
// Y轴配置
yAxis: {
type: ‘value’, // 类型：数值轴
// Y轴保持默认或根据需要配置
axisLine: {
show: true // 通常Y轴轴线保留
},
axisLabel: {
show: true // 通常Y轴标签保留
}
},
// 系列列表
series: [{
name: ‘销量’,
type: ‘bar’, // 图表类型：柱状图
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2. 代码详解
xAxis.axisLine.show = false
: 这行代码直接移除了 X 轴底部的那条横线。如果没有这一步，即使隐藏了标签，底部依然会有一条线。
xAxis.axisTick.show = false
: 移除轴线上的小刻度线。在类目轴（category）中，默认情况下刻度线和标签是对应对齐的，隐藏标签后，刻度线通常也显得多余。
xAxis.axisLabel.show = false
: 这是隐藏文字标签的关键。执行后，”衬衫”、”羊毛衫”等文字将不再显示。
三、进阶实战案例：仪表盘风格的折线图
在大屏数据可视化中，我们经常需要一种“仪表盘”风格的图表：只有 Y 轴的数据波动，X 轴没有具体的数值或标签，仅作为背景参考。
场景描述
我们需要展示服务器在一天内的 CPU 使用率波动。为了界面整洁，我们不显示具体的时间点（X轴标签），也不显示 X 轴的轴线，只保留 Y 轴的刻度和网格线。
完整代码实现
案例分析
在这个实战案例中，我们通过以下步骤实现了“仪表盘”风格：
X 轴处理
：使用了
axisLine: { show: false }
、
axisTick: { show: false }
和
axisLabel: { show: false }
。这使得 X 轴完全隐形，只留下了数据的走势。
Y 轴优化
：保留了
splitLine
（网格线），这对于读取具体数值至关重要。如果连 Y 轴也隐藏，图表将变成纯粹的装饰，失去数据可视化的意义。
视觉增强
：
boundaryGap: false
：让折线图的起始和结束点紧贴 Y 轴边缘。
symbol: ‘none’
：去除了数据点上的圆点，使曲线更流畅。
areaStyle
：添加了渐变填充，增加了视觉层次感，同时不干扰对 X 轴的观察（因为 X 轴已无干扰元素）。
四、常见问题与注意事项
1. 为什么隐藏后底部还有一条线？
如果你发现隐藏了
axisLine
但底部依然有一条线，那可能是
grid
（绘图区域）的边框，或者是
yAxis
的轴线延伸到了边缘。请检查
grid
属性中的
bottom
值，或者确认是否在
xAxis
中正确设置了
show: false
。
2. 隐藏 X 轴后，如何查看具体数据？
当 X 轴标签被隐藏后，用户无法直接看到对应的数据点。此时，
Tooltip（提示框）
变得至关重要。
确保
tooltip.trigger
设置为
‘axis’
或
‘item’
。
在
tooltip.formatter
中自定义显示内容，将 X 轴的值（时间、类目）包含进去，如实战案例中的写法。
3. 仅仅想让 X 轴透明，但保留位置？
如果你不想完全删除 X 轴，只是想让它看起来消失，可以设置颜色为透明：
xAxis: {
axisLine: {
lineStyle: {
color: ‘transparent’ // 设置为透明
}
},
axisLabel: {
color: ‘transparent’ // 标签文字透明
}
}
但这通常不如
show: false
干净，因为可能会占用渲染性能。
五、总结
使用 ECharts 去除 X 轴刻度线与标签非常简单，核心在于操作
xAxis
配置下的
axisLine
、
axisTick
和
axisLabel
对象的
show
属性。
基础操作
：将这三者的
show
设为
false
。
实战技巧
：结合
symbol: ‘none’
、
areaStyle
和自定义
tooltip
，可以打造出极具现代感的仪表盘风格图表。
希望这篇指南能帮助你更好地掌控 ECharts 的图表样式，制作出既美观又实用的数据可视化作品。