自定义图例的 itemMarker 为圆角

[YY88Xu]

问题描述

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: 'dodgeX' })
.interaction('elementHighlight', { background: true })
.legend('color', { position: 'top', layout: { justifyContent: 'center' }})
chart.render();

想设置图例的 itemMarker 正方形为圆角，出了图例全部自定义，可以只定义 itemMarker 为自定义的 div 吗

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Runtus]

我来处理下

[pearmini]

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

[Runtus]

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

[pearmini]

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

[Runtus]

如果要设置圆角，可以通过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

[pearmini]

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

[wangxingkang]

@pearmini #6388

[Runtus]

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

[pearmini]

@Runtus 嗯嗯，幸苦啦 🤣