Apache ECharts Angular：如何让堆叠折线图的markLine显示在顶层？

针对你遇到的MarkLine始终显示在堆叠折线下方的问题，可以通过以下几种方式解决：

方法1：将MarkLine整合到顶层堆叠系列中 #

把MarkLine直接配置在最后一个堆叠折线系列里，并给MarkLine单独设置z属性，确保它在该系列的填充区域和折线之上：

{
  // 其他配置项
  series: [
    { 
      name: '1', 
      type: 'line', 
      stack: 'Total', 
      areaStyle: { opacity: 1 }, 
      showSymbol: false, 
      data: [...] 
    },
    { 
      name: '2', 
      type: 'line', 
      stack: 'Total', 
      areaStyle: { opacity: 1 }, 
      showSymbol: false, 
      data: [...],
      markLine: { 
        z: 100, // 强制MarkLine层级高于当前系列的元素
        label: { show: false },
        symbol: 'none', 
        data: [ { symbol: 'none', xAxis: 'xxx' } ] 
      }
    }
  ]
}

方法2：调整独立MarkLine系列的z属性而非zLevel #

如果坚持使用独立系列承载MarkLine，将系列的z属性设为远高于其他堆叠系列的值（无需设置zLevel，同层级下z值越大渲染越靠上）：

{
  // 其他配置项
  series: [
    { 
      name: '1', 
      type: 'line', 
      stack: 'Total', 
      areaStyle: { opacity: 1 }, 
      showSymbol: false, 
      data: [...],
      z: 1 
    },
    { 
      name: '2', 
      type: 'line', 
      stack: 'Total', 
      areaStyle: { opacity: 1 }, 
      showSymbol: false, 
      data: [...],
      z: 2 
    },
    // MarkLine独立系列
    { 
      name: '当前日期线', 
      type: 'line', 
      z: 100, // 远高于其他系列的z值
      data: [], // 空数据不影响MarkLine渲染
      markLine: { 
        label: { show: false },
        symbol: 'none', 
        data: [ { symbol: 'none', xAxis: 'xxx' } ] 
      }
    }
  ]
}

关键原因说明 #

• 堆叠折线的areaStyle是不透明填充区域（opacity:1），会完全覆盖下方元素，必须让MarkLine的渲染层级高于这些填充区域。
• zLevel是创建独立画布层级，默认所有系列都在zLevel:0，部分场景下单独设置zLevel可能因系列无数据或框架封装问题失效；而z是同画布层级内的元素优先级，设置更高的z值更稳定可靠。

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