Apache ECharts：柱状图添加水平参考线

嘿，要实现每个柱状图的水平参考线，ECharts的markLine就是咱们要找的工具！它能轻松绘制标记线，还支持全局默认配置+局部自定义，完美匹配你的需求。下面是修改后的完整代码，我会一步步拆解关键改动：

// 先定义默认参考值，你可以根据实际需求调整
const defaultReferenceValue = 4; 

var myChart = echarts.init(document.getElementById("sleep_graph"), null, { renderer: 'svg' });
var option;
option = {
    xAxis: {
        type: 'category',
        data: [1, 2, 3, 4],
        show: false
    },
    yAxis: {
        type: 'value',
        splitLine: { show: false }
    },
    series: [
        {
            data: [
                {
                    value: @sleepGraph.DeepSleepDurationValue,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.2, color: '@sleepGraph.DeepSleepDurationGraphColor' },
                            { offset: 1, color: 'white' }
                        ]),
                        opacity: 0.8
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '@sleepGraph.DeepSleepDurationGraphColor',
                        fontWeight: 'bold'
                    },
                    labelLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'black',
                            width: 55,
                        }
                    },
                    // 自定义该柱子的参考值（可选，覆盖全局默认）
                    markLine: {
                        data: [{ yAxis: @sleepGraph.DeepSleepReferenceValue || defaultReferenceValue }]
                    }
                },
                {
                    value: @sleepGraph.SleepDurationValue,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.2, color: '@sleepGraph.SleepDurationGraphColor' },
                            { offset: 1, color: 'white' }
                        ]),
                        opacity: 0.8
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '@sleepGraph.SleepDurationGraphColor',
                        fontWeight: 'bold'
                    }
                    // 这里没写markLine，会自动使用全局默认的参考线
                },
                {
                    value: @sleepGraph.LightSleepDurationValue,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.2, color: '@sleepGraph.LightSleepDurationGraphColor' },
                            { offset: 1, color: 'white' }
                        ]),
                        opacity: 0.8
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '@sleepGraph.LightSleepDurationGraphColor',
                        fontWeight: 'bold'
                    },
                    // 自定义参考值
                    markLine: {
                        data: [{ yAxis: @sleepGraph.LightSleepReferenceValue || defaultReferenceValue }]
                    }
                },
                {
                    value: @sleepGraph.RemSleepDurationValue,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0.2, color: '@sleepGraph.RemSleepDurationGraphColor' },
                            { offset: 1, color: 'white' }
                        ]),
                        opacity: 0.8
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '@sleepGraph.RemSleepDurationGraphColor',
                        fontWeight: 'bold'
                    }
                    // 使用全局默认参考线
                }
            ],
            type: 'bar',
            barWidth: 35,
            showBackground: true,
            backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' },
            // 全局默认的参考线配置
            markLine: {
                silent: true, // 禁用交互，避免干扰柱子的点击等操作
                symbol: 'none', // 去掉参考线两端的箭头/标记点
                lineStyle: {
                    color: '#666', // 参考线颜色
                    type: 'dashed', // 虚线样式，更像参考线
                    width: 1
                },
                label: {
                    show: true,
                    formatter: '参考值', // 参考线的标签文字
                    position: 'end', // 标签放在线的末端
                    color: '#666'
                },
                data: [{ yAxis: defaultReferenceValue }] // 默认的参考值
            }
        }
    ]
};
option && myChart.setOption(option);

关键改动说明： #

1. 全局默认参考线：
   在series下添加了markLine配置，设置了默认的线样式、标签和参考值。所有没有单独定义markLine的柱子都会自动使用这个配置，减少重复代码。
2. 局部自定义参考值：
   对于需要单独参考值的柱子（比如深睡、浅睡），在对应的data对象里添加markLine，用@sleepGraph.xxxReferenceValue作为自定义值，同时用|| defaultReferenceValue做降级——如果没有自定义值，就用全局默认。
3. 交互与样式优化：
   • silent: true：避免参考线干扰柱子的鼠标交互（比如hover、点击）
   • symbol: 'none'：去掉参考线两端的标记符号，让界面更简洁
   • 用虚线样式区分参考线和柱子，视觉上更清晰

这样就能轻松实现每个柱子带水平参考线，同时支持默认值和自定义值的需求啦！

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