引言：理解 ECharts Y 轴控制的重要性
在数据可视化中，Y 轴（纵轴）的精准控制对于创建清晰、专业的图表至关重要。ECharts 作为一款功能强大的图表库，提供了丰富的配置选项来精确控制 Y 轴的位置和名称显示。无论是多轴图表、混合图表还是复杂的仪表盘，掌握这些技巧都能显著提升图表的可读性和美观度。
本文将深入探讨 ECharts 中 Y 轴位置控制的各个方面，包括基础配置、高级技巧以及实际应用场景，帮助您在项目中实现精准的图表布局。
1. Y 轴基础配置
1.1 Y 轴位置的基本概念
在 ECharts 中，Y 轴默认位于图表的左侧。但通过
position
属性，我们可以轻松改变其位置：
// 基础 Y 轴配置示例
option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’,
position: ‘left’, // 可选值：’left’ | ‘right’ | ‘top’ | ‘bottom’
name: ‘销售量’,
nameLocation: ‘end’, // 名称位置
nameTextStyle: {
color: ‘#333’,
fontSize: 14,
fontWeight: ‘bold’
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: ‘bar’
}]
};
1.2 多 Y 轴配置
当需要展示多个不同量纲的数据时，多 Y 轴配置非常有用：
// 多 Y 轴配置示例
option = {
xAxis: {
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’]
},
yAxis: [
{
type: ‘value’,
name: ‘销售额’,
position: ‘left’,
axisLabel: {
formatter: ‘¥{value}’
}
},
{
type: ‘value’,
name: ‘增长率’,
position: ‘right’,
axisLabel: {
formatter: ‘{value}%’
}
}
],
series: [
{
name: ‘销售额’,
type: ‘line’,
yAxisIndex: 0,
data: [120, 132, 101, 134, 90, 230]
},
{
name: ‘增长率’,
type: ‘line’,
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
}
]
};
2. Y 轴名称显示位置控制
2.1 nameLocation 属性详解
nameLocation
属性控制 Y 轴名称相对于轴线的显示位置：
// nameLocation 示例
option = {
xAxis: {
type: ‘category’,
data: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’]
},
yAxis: {
type: ‘value’,
name: ‘数值’,
nameLocation: ‘start’, // 可选值：’start’ | ‘middle’ | ‘end’
nameGap: 30, // 名称与轴线的距离
nameTextStyle: {
color: ‘#5470c6’,
fontSize: 16,
fontWeight: ‘bold’,
padding: [0, 0, 0, 10] // 文本内边距
}
},
series: [{
type: ‘line’,
data: [10, 20, 30, 40, 50]
}]
};
2.2 nameGap 和 nameRotate 控制
这两个属性可以进一步微调名称的显示位置和角度：
// nameGap 和 nameRotate 示例
option = {
xAxis: {
type: ‘category’,
data: [‘Q1’, ‘Q2’, ‘Q3’, ‘Q4’]
},
yAxis: {
type: ‘value’,
name: ‘季度营收（万元）’,
nameLocation: ‘middle’,
nameGap: 50, // 增加名称与轴的距离
nameRotate: 0, // 旋转角度，0表示水平
nameTextStyle: {
color: ‘#333’,
fontSize: 14
}
},
series: [{
type: ‘bar’,
data: [320, 332, 301, 334]
}]
};
3. Y 轴位置高级控制技巧
3.1 使用 grid 控制 Y 轴位置
通过调整
grid
配置，可以间接控制 Y 轴在画布中的位置：
// 使用 grid 控制 Y 轴位置
option = {
grid: {
left: 100, // 左边距，影响 Y 轴位置
right: 50,
top: 50,
bottom: 50
},
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’]
},
yAxis: {
type: ‘value’,
name: ‘数值’,
nameLocation: ‘end’,
nameGap: 20
},
series: [{
type: ‘line’,
data: [820, 932, 901, 934, 1290]
}]
};
3.2 自定义 Y 轴位置（偏移）
虽然 ECharts 没有直接的 offset 属性，但可以通过组合配置实现偏移效果：
// 自定义 Y 轴偏移示例
option = {
xAxis: {
type: ‘category’,
data: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’]
},
yAxis: {
type: ‘value’,
name: ‘主轴’,
position: ‘left’,
offset: 0, // ECharts 7.0+ 支持 offset
nameLocation: ‘end’,
nameGap: 15
},
// 第二个 Y 轴，实现偏移效果
yAxis: [{
type: ‘value’,
name: ‘左轴’,
position: ‘left’,
offset: 0,
nameLocation: ‘end’,
nameGap: 15
}, {
type: ‘value’,
name: ‘右轴’,
position: ‘right’,
offset: 0,
nameLocation: ‘end’,
nameGap: 15
}],
series: [
{
type: ‘line’,
yAxisIndex: 0,
data: [10, 20, 30, 40, 50]
},
{
type: ‘line’,
yAxisIndex: 1,
data: [5, 15, 25, 35, 45]
}
]
};
4. 实际应用场景与解决方案
4.1 场景一：财务报表中的多轴展示
在财务报表中，经常需要同时展示金额和百分比：
// 财务报表多轴配置
option = {
title: {
text: ‘2023年财务分析’,
left: ‘center’
},
tooltip: {
trigger: ‘axis’
},
legend: {
data: [‘收入’, ‘成本’, ‘利润率’],
top: 30
},
grid: {
left: 80,
right: 80,
top: 80,
bottom: 50
},
xAxis: {
type: ‘category’,
data: [‘Q1’, ‘Q2’, ‘Q3’, ‘Q4’]
},
yAxis: [
{
type: ‘value’,
name: ‘金额（万元）’,
position: ‘left’,
nameLocation: ‘middle’,
nameGap: 50,
nameTextStyle: {
color: ‘#5470c6’,
fontSize: 14,
fontWeight: ‘bold’
},
axisLabel: {
formatter: ‘¥{value}’
}
},
{
type: ‘value’,
name: ‘利润率’,
position: ‘right’,
nameLocation: ‘middle’,
nameGap: 50,
nameTextStyle: {
color: ‘#91cc75’,
fontSize: 14,
fontWeight: ‘bold’
},
axisLabel: {
formatter: ‘{value}%’
}
}
],
series: [
{
name: ‘收入’,
type: ‘bar’,
yAxisIndex: 0,
data: [320, 332, 301, 334],
itemStyle: {
color: ‘#5470c6’
}
},
{
name: ‘成本’,
type: ‘bar’,
yAxisIndex: 0,
data: [220, 182, 191, 234],
itemStyle: {
color: ‘#ee6666’
}
},
{
name: ‘利润率’,
type: ‘line’,
yAxisIndex: 1,
data: [31.25, 45.18, 36.54, 30.0],
itemStyle: {
color: ‘#91cc75’
},
lineStyle: {
width: 3
}
}
]
};
4.2 场景二：仪表盘中的 Y 轴控制
在仪表盘中，Y 轴的精准控制尤为重要：
// 仪表盘 Y 轴控制
option = {
series: [
{
type: ‘gauge’,
center: [‘25%’, ‘50%’],
radius: ‘80%’,
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
splitNumber: 10,
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, ‘#67e0e3’],
[0.7, ‘#37a2da’],
[1, ‘#fd666d’]
]
}
},
pointer: {
itemStyle: {
color: ‘auto’
}
},
axisTick: {
distance: -10,
length: 8,
lineStyle: {
color: ‘#fff’,
width: 2
}
},
splitLine: {
distance: -10,
length: 14,
lineStyle: {
color: ‘#fff’,
width: 3
}
},
axisLabel: {
color: ‘inherit’,
distance: 15,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: ‘{value}%’,
color: ‘inherit’,
fontSize: 20,
offsetCenter: [0, ‘70%’]
},
title: {
offsetCenter: [0, ‘85%’],
fontSize: 14,
color: ‘#666’
},
data: [{
value: 70,
name: ‘CPU使用率’
}]
},
{
type: ‘gauge’,
center: [‘75%’, ‘50%’],
radius: ‘80%’,
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
splitNumber: 10,
axisLine: {
lineStyle: {
width: 10,
color: [
[0.3, ‘#67e0e3’],
[0.7, ‘#37a2da’],
[1, ‘#fd666d’]
]
}
},
pointer: {
itemStyle: {
color: ‘auto’
}
},
axisTick: {
distance: -10,
length: 8,
lineStyle: {
color: ‘#fff’,
width: 2
}
},
splitLine: {
distance: -10,
length: 14,
lineStyle: {
color: ‘#fff’,
width: 3
}
},
axisLabel: {
color: ‘inherit’,
distance: 15,
fontSize: 12
},
detail: {
valueAnimation: true,
formatter: ‘{value}%’,
color: ‘inherit’,
fontSize: 20,
offsetCenter: [0, ‘70%’]
},
title: {
offsetCenter: [0, ‘85%’],
fontSize: 14,
color: ‘#666’
},
data: [{
value: 85,
name: ‘内存使用率’
}]
}
]
};
4.3 场景三：复杂混合图表中的 Y 轴控制
在混合图表中，不同系列可能需要不同的 Y 轴配置：
// 混合图表 Y 轴控制
option = {
title: {
text: ‘销售与转化率分析’,
left: ‘center’
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’
}
},
legend: {
data: [‘销售额’, ‘转化率’, ‘访问量’],
top: 30
},
grid: {
left: 80,
right: 80,
top: 80,
bottom: 50
},
xAxis: {
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’],
axisPointer: {
type: ‘shadow’
}
},
yAxis: [
{
type: ‘value’,
name: ‘销售额’,
position: ‘left’,
nameLocation: ‘middle’,
nameGap: 50,
nameTextStyle: {
color: ‘#5470c6’,
fontSize: 14,
fontWeight: ‘bold’
},
axisLabel: {
formatter: ‘¥{value}’
},
splitLine: {
show: true,
lineStyle: {
type: ‘dashed’,
color: ‘#eee’
}
}
},
{
type: ‘value’,
name: ‘转化率’,
position: ‘right’,
nameLocation: ‘middle’,
nameGap: 50,
nameTextStyle: {
color: ‘#91cc75’,
fontSize: 14,
fontWeight: ‘bold’
},
axisLabel: {
formatter: ‘{value}%’
},
splitLine: {
show: false
}
},
{
type: ‘value’,
name: ‘访问量’,
position: ‘right’,
offset: 60, // 偏移，避免重叠
nameLocation: ‘middle’,
nameGap: 50,
nameTextStyle: {
color: ‘#ee6666’,
fontSize: 14,
fontWeight: ‘bold’
},
axisLabel: {
formatter: ‘{value}’
},
splitLine: {
show: false
}
}
],
series: [
{
name: ‘销售额’,
type: ‘bar’,
yAxisIndex: 0,
data: [120, 132, 101, 134, 90, 230],
itemStyle: {
color: ‘#5470c6’
}
},
{
name: ‘转化率’,
type: ‘line’,
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
itemStyle: {
color: ‘#91cc75’
},
lineStyle: {
width: 3
},
symbolSize: 8
},
{
name: ‘访问量’,
type: ‘line’,
yAxisIndex: 2,
data: [1000, 1200, 900, 1500, 1800, 2000],
itemStyle: {
color: ‘#ee6666’
},
lineStyle: {
width: 2,
type: ‘dashed’
}
}
]
};
5. 常见问题与解决方案
5.1 Y 轴名称重叠问题
当多个 Y 轴名称靠得太近时，会发生重叠：
// 解决方案：使用 offset 和 nameGap
option = {
yAxis: [
{
type: ‘value’,
name: ‘左轴名称’,
position: ‘left’,
offset: 0,
nameGap: 40,
nameTextStyle: {
padding: [0, 0, 0, 10] // 增加内边距
}
},
{
type: ‘value’,
name: ‘右轴名称’,
position: ‘right’,
offset: 0,
nameGap: 40,
nameTextStyle: {
padding: [0, 10, 0, 0] // 增加内边距
}
}
]
};
5.2 Y 轴名称显示不全
当名称过长时，可能显示不全：
// 解决方案：调整 nameGap 和 nameTextStyle
option = {
yAxis: {
type: ‘value’,
name: ‘这是一个非常长的Y轴名称，需要特殊处理’,
nameLocation: ‘middle’,
nameGap: 80, // 增加距离
nameTextStyle: {
fontSize: 12,
lineHeight: 16,
rich: {
// 使用 rich 文本处理长文本
bold: {
fontWeight: ‘bold’
}
},
formatter: function(params) {
// 自定义格式化函数
return params.name.length > 10 ?
params.name.substring(0, 10) + ‘…’ :
params.name;
}
}
}
};
5.3 多轴图表中的 Y 轴位置混乱
多轴图表中 Y 轴位置容易混乱：
// 解决方案：明确指定每个轴的位置和 offset
option = {
yAxis: [
{
type: ‘value’,
name: ‘主轴’,
position: ‘left’,
offset: 0,
nameLocation: ‘end’,
nameGap: 20
},
{
type: ‘value’,
name: ‘辅助轴1’,
position: ‘left’,
offset: 50, // 向右偏移50px
nameLocation: ‘end’,
nameGap: 20
},
{
type: ‘value’,
name: ‘辅助轴2’,
position: ‘right’,
offset: 0,
nameLocation: ‘end’,
nameGap: 20
}
]
};
6. 最佳实践建议
6.1 命名规范
简洁明了
：Y 轴名称应简洁，避免过长
包含单位
：在名称中包含单位（如：万元、%）
颜色区分
：多轴时使用不同颜色区分
6.2 布局优化
预留空间
：确保 grid 配置为 Y 轴名称预留足够空间
响应式设计
：在不同屏幕尺寸下测试 Y 轴显示效果
一致性
：保持相同类型图表的 Y 轴配置一致
6.3 性能考虑
避免过多轴
：不要创建超过 4 个 Y 轴
合理使用 splitLine
：过多的分割线会影响性能
优化 nameTextStyle
：避免使用复杂的富文本样式
7. 总结
精准控制 ECharts Y 轴位置和名称显示位置是创建专业图表的关键技能。通过合理使用
position
、
nameLocation
、
nameGap
、
nameRotate
等属性，结合
grid
配置和多轴管理，您可以创建出既美观又实用的图表。
记住以下关键点：
基础配置
：掌握
position
和
nameLocation
的基本用法
多轴管理
：使用数组形式管理多个 Y 轴，明确指定
yAxisIndex
空间规划
：通过
grid
和
nameGap
合理规划布局
场景适配
：根据不同场景（财务报表、仪表盘、混合图表）选择合适的配置
通过本文的详细示例和最佳实践，相信您已经掌握了 ECharts Y 轴精准控制的精髓。在实际项目中，根据具体需求灵活运用这些技巧，定能创建出令人印象深刻的数据可视化作品。