ECharts图表配置技巧：Y轴名称与标记线箭头控制

9 次阅读

Y轴名称配置方法

ECharts 中，Y轴名称主要通过 yAxis.name 配置。最简单的写法是直接设置字符串，例如：

JavaScript
option = {
    yAxis: {
        name: '销售额'
    }
};

这样生成的Y轴会显示“销售额”。如果希望名称与坐标轴之间保持一定距离，可以配合 nameGap 调整：

JavaScript
yAxis: {
    name: '销售额（万元）',
    nameGap: 25
}

nameGap 表示坐标轴名称与轴线之间的距离，数值越大，名称距离Y轴越远。

如果需要控制名称的位置，还可以使用 nameLocation：

JavaScript
yAxis: {
    name: '销售额',
    nameLocation: 'middle',
    nameGap: 35
}

常见的 nameLocation 取值包括：

  • start：靠近Y轴起始位置

  • middle：位于Y轴中间

  • end：靠近Y轴结束位置

实际项目中，Y轴名称通常还需要设置字体大小、颜色和字体粗细：

JavaScript
yAxis: {
    name: '销售额（万元）',
    nameLocation: 'middle',
    nameGap: 40,
    nameTextStyle: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#333'
    }
}

如果图表采用深色背景，则可以将文字颜色调整为浅色，以保证可读性。

Y轴名称显示单位的实用技巧

对于数据分析图表，Y轴名称最好直接包含数据单位，例如“温度（℃）”“金额（万元）”“数量（件）”。

JavaScript
yAxis: {
    name: '订单数量（件）',
    nameLocation: 'middle',
    nameGap: 45
}

相比单独写“订单数量”，带上单位能够让用户无需查看其他说明就理解Y轴数据含义。

如果名称比较长，还需要适当增大 nameGap，否则可能与Y轴刻度标签产生视觉上的拥挤。

MarkLine标记线的基本配置

ECharts 的 markLine 常用于在折线图、柱状图等图表中增加参考线，例如平均值线、目标值线、警戒线等。

一个典型的配置如下：

JavaScript
series: [
    {
        type: 'line',
        data: [120, 180, 150, 230, 210],
        markLine: {
            data: [
                {
                    yAxis: 200
                }
            ]
        }
    }
]

这段配置会在Y轴数值为200的位置绘制一条水平标记线。

如果希望直接指定一条从某个坐标到另一个坐标的线，可以使用 coord：

JavaScript
markLine: {
    data: [
        [
            { coord: [0, 100] },
            { coord: [4, 100] }
        ]
    ]
}

对于需要强调目标值、阈值或业务基准的图表，这种方式非常实用。

控制标记线箭头

很多开发者在配置 markLine 时会发现，标记线默认可能带有箭头。如果业务设计只需要一条普通的参考线，可以通过 symbol 控制两端的标记。

例如关闭两端箭头：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    data: [
        {
            yAxis: 200
        }
    ]
}

这里的：

JavaScript
symbol: ['none', 'none']

分别控制标记线的起点和终点。

如果希望只保留终点箭头，可以写成：

JavaScript
markLine: {
    symbol: ['none', 'arrow'],
    data: [
        {
            yAxis: 200
        }
    ]
}

如果需要控制箭头大小，可以使用 symbolSize：

JavaScript
markLine: {
    symbol: ['none', 'arrow'],
    symbolSize: 8,
    data: [
        {
            yAxis: 200
        }
    ]
}

因此，针对“ECharts标记线箭头怎么去掉”这一类需求，核心配置通常就是：

JavaScript
symbol: ['none', 'none']

需要注意的是，markLine.symbol 是针对标记线两端进行设置，而不是通过 lineStyle 控制。lineStyle 主要负责线条颜色、宽度、类型等视觉属性。

同时设置标记线颜色和样式

如果标记线代表一个业务阈值，通常需要让它与普通数据线产生明显区别：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    lineStyle: {
        type: 'dashed',
        width: 2
    },
    label: {
        show: true,
        formatter: '目标值：200'
    },
    data: [
        {
            yAxis: 200
        }
    ]
}

这里使用虚线表示目标值，同时通过 label 显示说明文字。

如果不希望显示标记线文本，也可以关闭：

JavaScript
label: {
    show: false
}

这样页面只保留参考线本身。

Y轴名称与MarkLine结合使用

实际开发中，经常需要同时设置Y轴名称、数据曲线和目标标记线。例如制作“月度销售额”图表：

JavaScript
const option = {
    tooltip: {
        trigger: 'axis'
    },

    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
    },

    yAxis: {
        type: 'value',
        name: '销售额（万元）',
        nameLocation: 'middle',
        nameGap: 45,
        nameTextStyle: {
            fontSize: 14
        }
    },

    series: [
        {
            name: '实际销售额',
            type: 'line',
            data: [180, 220, 195, 260, 240],

            markLine: {
                symbol: ['none', 'none'],
                lineStyle: {
                    type: 'dashed',
                    width: 2
                },
                label: {
                    formatter: '目标：200万元'
                },
                data: [
                    {
                        yAxis: 200
                    }
                ]
            }
        }
    ]
};

这个配置实现了几个效果：

  1. Y轴名称显示为“销售额（万元）”；

  2. Y轴名称位于坐标轴中部；

  3. Y轴名称与轴线保持一定距离；

  4. Y轴200的位置增加目标标记线；

  5. 标记线两端不显示箭头；

  6. 标记线使用虚线表示；

  7. 标记线显示目标值说明。

为什么设置了symbol仍然看到箭头

如果设置：

JavaScript
symbol: ['none', 'none']

之后页面仍然出现类似箭头的视觉效果，可以从几个方面排查。

首先确认配置位置是否正确。symbol 应该放在 markLine 内部：

JavaScript
series: [
    {
        type: 'line',
        markLine: {
            symbol: ['none', 'none'],
            data: [
                { yAxis: 200 }
            ]
        }
    }
]

而不是写成：

JavaScript
series: [
    {
        type: 'line',
        symbol: ['none', 'none']
    }
]

后者控制的是数据系列的图形符号，并不能控制 markLine 的箭头。

其次需要检查项目中是否存在其他 markLine 配置。如果一个系列设置了多个标记线，修改其中一个系列并不能影响其他系列。

另外，如果页面使用了封装后的图表组件，还需要确认组件是否对 ECharts 的原始配置进行了二次处理。

MarkLine箭头与数据点symbol不要混淆

ECharts 中存在多个 symbol 配置项，这是比较容易产生误解的地方。

例如：

JavaScript
series: {
    type: 'line',
    symbol: 'circle'
}

控制的是折线图数据点的标记形状。

而：

JavaScript
markLine: {
    symbol: ['none', 'arrow']
}

控制的是标记线两端的符号。

两者作用范围不同。

如果需求是“折线上的圆点不要显示”，可以调整 series.symbol；如果需求是“参考线上的箭头不要显示”，则应该调整 markLine.symbol。

目标线、平均线和最大值线的配置

除了直接指定 yAxis 数值，ECharts 的 markLine 还可以通过内置统计类型绘制平均值、最大值和最小值等参考线。

例如绘制平均值：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    data: [
        {
            type: 'average',
            name: '平均值'
        }
    ]
}

绘制最大值：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    data: [
        {
            type: 'max',
            name: '最大值'
        }
    ]
}

绘制最小值：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    data: [
        {
            type: 'min',
            name: '最小值'
        }
    ]
}

这种写法不需要提前计算数据平均值或最大值，ECharts 会根据当前系列数据进行处理。

常见配置问题

Y轴名称被截断

如果Y轴名称较长，可能出现显示不完整的问题。这时可以适当增大图表左侧空间：

JavaScript
grid: {
    left: 80,
    right: 30,
    top: 40,
    bottom: 50
}

同时调整：

JavaScript
yAxis: {
    name: '累计销售金额（万元）',
    nameGap: 30
}

对于响应式页面，不建议简单依赖固定的超大 left 值，而应该结合实际文字长度和布局进行调整。

标记线挡住数据

当目标线与数据点高度接近时，标签可能覆盖折线。可以通过调整 label 的位置和样式改善：

JavaScript
markLine: {
    symbol: ['none', 'none'],
    label: {
        position: 'insideEndTop'
    },
    data: [
        {
            yAxis: 200
        }
    ]
}

如果项目对视觉效果要求较高，还可以通过字体大小、背景和边距等属性进一步优化。

标记线不显示

出现这种情况时，首先检查 markLine 是否写在具体的 series 中：

JavaScript
series: [
    {
        type: 'bar',
        data: [100, 150, 200],
        markLine: {
            data: [
                {
                    yAxis: 180
                }
            ]
        }
    }
]

同时确认Y轴范围没有被其他配置限制。如果手动设置了 yAxis.min 和 yAxis.max，目标值超出当前坐标轴范围时，自然无法看到对应的水平线。

一套更完整的推荐配置

对于常见的数据统计页面，可以将Y轴和标记线统一设计：

JavaScript
const option = {
    grid: {
        left: 90,
        right: 30,
        top: 40,
        bottom: 50
    },

    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五']
    },

    yAxis: {
        type: 'value',
        name: '访问量（次）',
        nameLocation: 'middle',
        nameGap: 50,
        nameTextStyle: {
            fontSize: 13,
            fontWeight: 'normal'
        }
    },

    series: [
        {
            type: 'line',
            smooth: true,
            data: [320, 450, 390, 520, 480],

            markLine: {
                symbol: ['none', 'none'],
                lineStyle: {
                    type: 'dashed',
                    width: 1
                },
                label: {
                    show: true,
                    position: 'insideEndTop',
                    formatter: '目标值 500'
                },
                data: [
                    {
                        yAxis: 500
                    }
                ]
            }
        }
    ]
};

这类配置比较适合后台管理系统、数据看板、运营分析页面等场景。Y轴负责清晰表达数据单位，MarkLine负责突出目标值，两者职责明确，图表的信息层级也更加清楚。

掌握 yAxis.name、nameLocation、nameGap 和 markLine.symbol 这几个核心属性后，大多数“ECharts Y轴名称设置”和“标记线箭头控制”需求都可以直接通过配置完成。尤其是去除标记线箭头时，优先检查 markLine.symbol 是否设置为 ['none', 'none']，这是最直接也最稳定的处理方式。

文章标签
标签1 标签2 标签3 标签4 标签5