Apache eCharts Angular 在堆栈上绘制标记线

Question

我有一个带有 markLine 的折线图，显示当前日期。不幸的是，该行显示在其他堆栈系列的下方。设置 zLevel 也没有帮助。

{
  // .. other config 
  series: [
    { name: '1', type: 'line', stack: 'Total', areaStyle: { opacity: 1 }, showSymbol: false, data: [...], z: 10 },
    { name: '2', type: 'line', stack: 'Total', areaStyle: { opacity: 1 }, showSymbol: false, data: [...], z: 20 },
    // MarkLine 
    { name: '2', type: 'line', zLevel: 100, markLine: { label: { show: false, showLabel: false }, symbol: 'none', data: [ { symbol: 'none', xAxis: 'xxx', zLevel: 100 } ] } },
  ]
}

该行显示正确，但不幸的是位于其他行下方。你知道我怎样才能把它放在其他线之上吗？

Answer 1

实际上，

z

属性应该少一点，而且标记线可以只定义在其中一条迹线上。

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '1',
      type: 'line',
      stack: 'Total',
      areaStyle: { opacity: 1 },
      showSymbol: false,
      data: [1, 2, 3, 4, 5],
      z: 1
    },
    {
      name: '2',
      type: 'line',
      stack: 'Total',
      areaStyle: { opacity: 1 },
      showSymbol: false,
      data: [1, 2, 3, 4, 5],
      z: 1,
      markLine: {
        data: [
          {
            label: { show: false, showLabel: false },
            yAxis: 6,
            lineStyle: {
              color: '#000'
            },
            symbol: 'none',
            data: [{ symbol: 'none', xAxis: 'xxx', zLevel: 100 }]
          }
        ]
      }
    }
    // MarkLine
  ]
};

CodePen 演示