如何让ECharts折线图渐变填充层置于柱状图后方且折线点前置？

可行，核心思路是将折线的填充区域与折线/数据点拆分为两个独立的ECharts系列，分别控制它们的渲染层级：

• 一个系列仅渲染填充区域，将其层级设为低于柱状图
• 另一个系列仅渲染折线和数据点，将其层级设为高于柱状图

具体实现代码 #

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

var option = {
    "xAxis":{
        "type":"time"
    },
    "yAxis":{
        "type":"value"
    },
    "tooltip":{
        "show":true,
        "trigger":"axis"
    },
    "series":[
        // 1. 仅渲染填充区域的系列，层级低于柱状图
        {
            "name":"Test 填充层",
            "type":"line",
            "silent":true,
            "animation":false,
            "areaStyle":{
                "opacity":0.1,
                // 可按需添加渐变配置，示例为线性渐变
                "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: 'rgba(255, 153, 0, 0.3)'},
                    {offset: 1, color: 'rgba(255, 153, 0, 0)'}
                ])
            },
            "lineStyle":{
                "width":0 // 隐藏线条
            },
            "symbol": "none", // 隐藏数据点
            "z": 0, // 层级设为0，低于柱状图的z=1
            "data":[
                [1620993840000,47.6],
                [1620993900000,50.8],
                [1620993960000,52.3]
            ]
        },
        // 2. 柱状图系列，层级设为中间层
        {
            "name":"柱状图数据",
            "type":"bar",
            "z":1,
            "data":[
                [1620993840000,45],
                [1620993900000,48],
                [1620993960000,50]
            ]
        },
        // 3. 仅渲染折线和数据点的系列，层级高于柱状图
        {
            "name":"Test",
            "type":"line",
            "silent":true,
            "animation":false,
            "areaStyle":null, // 关闭填充
            "lineStyle":{
                "width":1
            },
            "z":2, // 层级设为2，高于柱状图
            "data":[
                [1620993840000,47.6],
                [1620993900000,50.8],
                [1620993960000,52.3]
            ],
            "emphasis":{
                "scale":false,
                "focus":"none"
            }
        }
    ]
};

myChart.setOption(option);

关键说明 #

• ECharts单个系列内的areaStyle、线条、数据点属于同一渲染层级，无法单独调整，因此必须拆分系列
• 通过z属性控制系列层级：数值越大，渲染层级越靠前
• 填充系列需隐藏线条和数据点，避免重复渲染；折线系列关闭填充，仅保留线条和点

内容的提问来源于stack exchange，提问作者Caio Sant'Anna