如何在ECharts柱状图的每个柱子上方显示峰值横线（无需自定义渲染器）

当然可以！完全不用依赖自定义渲染器，用ECharts原生的配置就能轻松实现每个柱子上方的峰值水平线效果，我给你整理了一个更简洁的实现方案👇

实现思路 #

核心是利用line系列来绘制水平短线：给每个x轴的时间点生成一对左右偏移的坐标，让折线在这两个点之间画出水平线段，刚好对应柱子的宽度范围，不需要写任何自定义渲染函数。

完整代码示例 #

JavaScript 代码 #

var myChart = echarts.init(document.getElementById('main'));

// 预处理峰值数据：为每个时间点生成左右偏移的两个坐标，用来绘制水平线
const peakRawData = [
    ["2023-01-11", 25],
    ["2023-01-12", 50],
    ["2023-01-13", 50]
];

// 生成折线用的水平短线数据，偏移量可根据x轴刻度密度调整
const peakLineData = peakRawData.flatMap(item => {
    const dateTime = new Date(item[0]).getTime();
    const peakValue = item[1];
    // 这里用12小时的偏移量，刚好对应时间轴上单天柱子的宽度范围
    const offset = 3600 * 1000 * 12;
    return [
        [dateTime - offset, peakValue],
        [dateTime + offset, peakValue]
    ];
});

option = {
    series: [
        {
            type: "bar",
            dimensions: ["date", "percent", "tooltip"],
            color: "#1976d2",
            data: [
                ["2023-01-11", 3.230555555555555, "3.2"],
                ["2023-01-12", 5.436111111111111, "5.4"],
                ["2023-01-13", 7.306481481481481, "7.3"],
            ],
            name: "Mean",
        },
        {
            type: "line",
            color: "#d32f2f",
            data: peakLineData,
            yAxisIndex: 0,
            name: "Peak",
            lineStyle: { width: 2 },
            symbol: "none", // 隐藏折线的数据点，只保留线段
            smooth: false   // 关闭平滑效果，确保是笔直的水平线
        }
    ],
    xAxis: {
        show: true,
        type: "time",
        axisLabel: {}
    },
    yAxis: {
        show: true,
        type: "value",
        min: 0,
        max: 100,
        scale: false,
    },
    tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: { label: {} }
    },
    legend: { show: true }
};

myChart.setOption(option);

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script>
<div id="main" style="width: 500px;height:200px;"></div>

额外说明 #

• 偏移量调整：如果你的时间轴刻度密度不同，可以修改offset的值，确保短线宽度和柱子匹配；如果是类目轴（非时间轴），可以用类目索引的偏移来实现类似效果。
• 交互体验：这个方案完全保留了原生tooltip的交互逻辑，和你原来的自定义方案体验一致。
• 维护性：不需要维护自定义渲染函数，所有配置都是ECharts原生支持的，后续调整样式或逻辑更方便。

内容的提问来源于stack exchange，提问作者Kim