[v5] 期望可以通过设置 zIndex 来调整 mark 的顺序

[visiky]

描述

如图所示，期望结果是标注线可以在折线下层，使用方式通过 style('zIndex', -1) 或者 attr('zIndex', -1) 都可以接受

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close');

chart.lineY()
  .data([400])
  .style('lineWidth', 4)
  .style('strokeOpacity', 1)
  .style('stroke', 'red')
  // 通过设置 style.zIndex 或者 直接设置 zIndex 属性都可以接受
  .style('zIndex', -1)
  .attr('zIndex', -1)

chart.render();

[pearmini]

@Aarebecca

这里 zIndex 直接设置在 mark 上，而不是 mark.style。因为 mark.style 其实设置的是每个 G 元素的样式，但是这里是需要设置 mark 容器 G 的样式 zIndex。

// Spec 描述如下
const options = {
  children: [
    { type: 'line' },
    { type: 'lineX', zIndex: -1 }
  ]
}

// API 描述如下
chart.line();
chart.lineX().attr('zIndex', -1);