[Bug]:legend图例 设置了size和itemWidth会导致图例项被挤出图表外

[18211365467]

Describe the bug / 问题描述

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

const chart = new Chart({ container: 'container', height: 350 });
const shapeList = ['bowtie', 'smooth', 'hv', 'rect', 'hollowPoint'];
const data = [
{ genre: 'Sports', sold: 50 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
{ genre: 'Sp34orts', sold: 50 },
{ genre: 'Stra2tegy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shoo5ter', sold: 350 },
{ genre: 'Othe4r', sold: 150 },
{ genre: 'Sports', sold: 50 },
{ genre: 'Strat22egy', sold: 115 },
{ genre: 'Acti2on', sold: 120 },
{ genre: 'Sho23oter', sold: 350 },
{ genre: 'Oth3er', sold: 150 },
{ genre: 'S35ports', sold: 50 },
{ genre: 'Strat44egy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Othe5r', sold: 150 },
{ genre: 'S8ports', sold: 50 },
{ genre: 'Str7ategy', sold: 115 },
{ genre: 'Act7ion', sold: 120 },
{ genre: 'Shoo2ter', sold: 350 },
{ genre: 'Oth4er', sold: 150 },

];
chart.options({
type: 'interval',
data,
encode: { x: 'genre', y: 'sold', color: 'genre' },
legend: {
color: {
size: 100,
itemWidth: 120,
position:'left',
// itemMarker
itemMarker: (d, index) => shapeList[index],
// itemLabel
itemLabelFill: 'red',
// itemValue
itemValueText: (d, index) => data[index]['sold'],
// itemBackground
itemBackgroundFill: (d) => d.color,
itemBackgroundFillOpacity: 0.2,
},
},
});

chart.render();

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[interstellarmt]

未配置size的时候会自动计算size的大小，当指定size后，需要自己指定布局，这里就需要增加marginLeft外边距，这部分我后面加到legend size的文档里

[github-actions]

⚠️ This issue has been automatically closed due to inactivity.

• If the issue is still relevant and important to you, feel free to:
  1. Reopen with additional information
  2. Create a new issue with updated context
  3. Reference any related issues or discussions

We close inactive issues to keep our backlog manageable and focused on active issues.

Your contribution makes our project better! 🌟

---

⚠️ 由于长期无活动，此 issue 已被自动关闭。

• 如果这个问题对您来说仍然重要，您可以：
  1. 重新打开并提供补充信息
  2. 创建一个新的 issue 并更新相关背景
  3. 关联相关的 issue 或讨论

为了更好地维护项目，我们需要定期清理不活跃的问题。

感谢您为开源添砖加瓦！🌟