自定义图例的 itemMarker 为圆角 #6075

我来处理下

@Runtus 棒！这个算一个中级任务。

Hi老哥 @pearmini ，这个issue我想确认一下，是想要自定义itemMarker吗，因为我去看了下官方文档，现在itemMarker可以自定义样式啥的

@Runtus 如果可以的话，可以在编辑器验证一下，然后回复到这个 issue 里面。如果你觉得有必要，也可以添加一个案例！😄

如果要设置圆角，可以通过itemMarker设置，代码如下：

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

const data = [
  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];

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

chart
  .interval()
  .data(data)
  .encode('x', '月份')
  .encode('y', '月均降雨量')
  .encode('color', 'name')
  .transform({ type: 'stackY' })
  .interaction('elementHighlight', { background: true })
  .legend({
    color: {
      itemMarker: 'circle'
    }
  })
  ;

chart.render();

更多详细使用可以查阅文档：https://g2.antv.antgroup.com/spec/component/legend#%E5%9B%BE%E4%BE%8B%E9%A1%B9

@Runtus 我感觉 @YY88Xu 可能需要去设置矩形的圆角，而不是直接设置为圆形？不过这个 PR 合并之后可以通过自定义 symbol 解决问题：https://github.com/antvis/G2/pull/6381

@pearmini https://github.com/antvis/G2/pull/6388

ok, @pearmini 那老哥，我看另一个老哥 @wangxingkang 已经修复这个问题了，那我就暂时不管了哇

@Runtus 嗯嗯，幸苦啦 🤣