[v5] 图例 marker 的使用方式 #4517

现状

<img width="836" alt="image" src="https://user-images.githubusercontent.com/15646325/209428235-5123b2ca-9d21-418b-a69c-8b36fccdd893.png">

期望

{
   legend: {
     color: {
        itemMarker: 'hyphen',
        itemMarkerStroke: (d) => d.color || '#dfdfdf',
        itemMarkerLineWidth: 2
    }
  }
}

代码

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

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

chart
  .line()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/indices.json',
  })
  .transform({ type: 'normalizeY', basis: 'first', groupBy: 'color' })
  .encode('x', (d) => new Date(d.Date))
  .encode('y', 'Close')
  .encode('color', 'Symbol')
  .scale('y', { type: 'log' })
  .axis('y', { title: '↑ Change in price (%)' })
  .label({
    text: 'Symbol',
    selector: 'last',
    fontSize: 10,
  })
  .legend('color',{
    itemMarker: 'hyphen',
    itemMarkerLineWidth:2,
    itemMarkerStroke: d => d.color || '#dfdfdf'
  })

chart.render();