🐛表格内嵌图表在运行一段时间后内存会逐渐增加

[GuoMouMo]

🏷 S2 Version / S2 版本

Package	Version
@antv/s2	2.1.8
@antv/s2-react	2.1.6
@antv/s2-react-components	2.1.2

💻 Sheet Type / 表格类型

• PivotSheet
• TableSheet
• PivotChartSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Describe the bug / 问题描述

在表格内嵌图表场景下，如果数据过多，滚动后会造成内存占用变高，并且等待一段时间后内存占用也不会得到释放。

⌨️ Code Snapshots / 代码片段

import { PivotSheet, S2DataConfig, S2Options } from '@antv/s2';
import { ChartDataCell } from '@antv/s2/extends';

const s2Options: S2Options = {
width: 1000,
height: 900,
style: {
colCell: {
// 多指标情况下 (即: s2DataConfig.fields.values), 需要设为 false
hideValue: true,
},
rowCell: {
width: 100,
},
// 适当增加单元格宽高, 以便于展示 G2 图表
dataCell: {
width: 350,
height: 400,
},
},
dataCell: (viewMeta, spreadsheet) => new ChartDataCell(viewMeta, spreadsheet),
};

const s2DataConfig: S2DataConfig = {
fields: {
rows: ['province', 'city'],
columns: ['type', 'sub_type'],
values: ['number'],
},
meta: [
{
field: 'number',
name: '数据',
},
{
field: 'province',
name: '省份',
},
{
field: 'city',
name: '城市',
},
{
field: 'type',
name: '类别',
},
{
field: 'sub_type',
name: '子类别',
},
],
// 数据源类型为 https://s2.antv.antgroup.com/api/general/s2-data-config#multidata 支持普通数值单元格和图表单元格 共存.
data: [
// 普通数据
{
number: {
// 折线图
values: {
type: 'line',
autoFit: true,
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/indices.json',
},
encode: {
x: (d: Record<string, string | number>) => new Date(d['Date']),
y: 'Close',
color: 'Symbol',
},
transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
scale: { y: { type: 'log' } },
axis: { y: { title: '↑ Change in price (%)' } },
labels: [{ text: 'Symbol', selector: 'last', fontSize: 10 }],
tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
},
},
province: '浙江省',
city: '杭州市',
type: '办公用品',
sub_type: '纸张',
},
{
number: {
// 玉玦图
values: {
type: 'interval',
autoFit: true,
data: [
{ question: '问题 1', percent: 0.21 },
{ question: '问题 2', percent: 0.4 },
{ question: '问题 3', percent: 0.49 },
{ question: '问题 4', percent: 0.52 },
{ question: '问题 5', percent: 0.53 },
{ question: '问题 6', percent: 0.84 },
{ question: '问题 7', percent: 1 },
{ question: '问题 8', percent: 1.2 },
],
encode: { x: 'question', y: 'percent', color: 'percent' },
scale: { color: { range: '#BAE7FF-#1890FF-#0050B3' } },
coordinate: {
type: 'radial',
innerRadius: 0.1,
endAngle: 3.141592653589793,
},
style: { stroke: 'white' },
animate: { enter: { type: 'waveIn', duration: 800 } },
// animate: false,
legend: {
color: {
length: 400,
position: 'bottom',
layout: { justifyContent: 'center' },
},
},
},
},
province: '浙江省',
city: '杭州市',
type: '办公用品',
sub_type: '笔',
},
{
number: {
// 柱形图
values: {
type: 'interval',
autoFit: true,
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
scale: {
color: {
guide: {
position: 'right',
size: 80,
},
},
},
encode: {
x: 'genre',
y: 'sold',
color: 'genre',
},
},
},
province: '浙江省',
city: '舟山市',
type: '办公用品',
sub_type: '纸张',
},
{
number: {
// G2 图表数据 (Spec) https://g2.antv.antgroup.com/examples/general/interval/#column
values: {
type: 'view',
autoFit: true,
padding: 0,
axis: false,
children: [
{
type: 'image',
style: {
src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
x: '50%',
y: '50%',
width: '100%',
height: '100%',
},
tooltip: false,
},
{
type: 'heatmap',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
},
encode: { x: 'g', y: 'l', color: 'tmp' },
style: { opacity: 0 },
tooltip: false,
},
],
},
},
province: '浙江省',
city: '舟山市',
type: '办公用品',
sub_type: '笔',
},
],
};

for(let a = 0; a< 100; a++) {
s2DataConfig.data = s2DataConfig.data.concat([
// 普通数据
{
number: {
// 折线图
values: {
type: 'line',
autoFit: true,
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/indices.json',
},
encode: {
x: (d: Record<string, string | number>) => new Date(d['Date']),
y: 'Close',
color: 'Symbol',
},
transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
scale: { y: { type: 'log' } },
axis: { y: { title: '↑ Change in price (%)' } },
labels: [{ text: 'Symbol', selector: 'last', fontSize: 10 }],
tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
},
},
province: '浙江省',
city: '杭州市',
type: '办公用品' + a,
sub_type: '纸张',
},
{
number: {
// 玉玦图
values: {
type: 'interval',
autoFit: true,
data: [
{ question: '问题 1', percent: 0.21 },
{ question: '问题 2', percent: 0.4 },
{ question: '问题 3', percent: 0.49 },
{ question: '问题 4', percent: 0.52 },
{ question: '问题 5', percent: 0.53 },
{ question: '问题 6', percent: 0.84 },
{ question: '问题 7', percent: 1 },
{ question: '问题 8', percent: 1.2 },
],
encode: { x: 'question', y: 'percent', color: 'percent' },
scale: { color: { range: '#BAE7FF-#1890FF-#0050B3' } },
coordinate: {
type: 'radial',
innerRadius: 0.1,
endAngle: 3.141592653589793,
},
style: { stroke: 'white' },
animate: { enter: { type: 'waveIn', duration: 800 } },
// animate: false,
legend: {
color: {
length: 400,
position: 'bottom',
layout: { justifyContent: 'center' },
},
},
},
},
province: '浙江省',
city: '杭州市',
type: '办公用品'+ a,
sub_type: '笔',
},
{
number: {
// 柱形图
values: {
type: 'interval',
autoFit: true,
data: [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
],
scale: {
color: {
guide: {
position: 'right',
size: 80,
},
},
},
encode: {
x: 'genre',
y: 'sold',
color: 'genre',
},
},
},
province: '浙江省',
city: '舟山市',
type: '办公用品'+ a,
sub_type: '纸张',
},
{
number: {
// G2 图表数据 (Spec) https://g2.antv.antgroup.com/examples/general/interval/#column
values: {
type: 'view',
autoFit: true,
padding: 0,
axis: false,
children: [
{
type: 'image',
style: {
src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
x: '50%',
y: '50%',
width: '100%',
height: '100%',
},
tooltip: false,
},
{
type: 'heatmap',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/heatmap.json',
},
encode: { x: 'g', y: 'l', color: 'tmp' },
style: { opacity: 0 },
tooltip: false,
},
],
},
},
province: '浙江省',
city: '舟山市',
type: '办公用品'+ a,
sub_type: '笔',
},
]);
};

const container = document.getElementById('container');

async function bootstrap() {
const s2 = new PivotSheet(container, s2DataConfig, s2Options);

await s2.render();
}

bootstrap();

🔗 Reproduction link / 复现链接

https://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart/#custom-g2-chart

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

使用我贴出的代码，在官网示例中可以复现，复现步骤是向右滚动大概10s，然后回到开始位置，可以记录一次内存占用，然后再向右滚动大概10s再记录一次内存占用，可以发现内存变高了，每次重复一次步骤，内存占用会变多一次，并且不会释放

😊 Expected Behavior / 期望行为

希望内存占用可以有一个上限，目前我在运行一段时间后一个页面的内存占用可以高达几个G。这很不正常

😅 Current Behavior / 当前行为

No response

💻 OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

🌏 Browser / 浏览器

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

[github-actions]

你好 @GuoMouMo:

提 Issue 须知

⚠️ 在提出问题前，请确保你已经仔细阅读👓/搜索🔍过 官方文档 和 常见问题 以及 图表示例, 并且已经搜索查阅过相关 Issues 列表 和 Discussions 列表. 当你确定自己的问题没有解决方案时，请提交 issue。 ⚠️

如果是使用问题，不知道怎么用，移步 Discussions 讨论区 并提供 有效信息 进行 提问。

参与社区共建

这是一个开源项目, 我们也有繁忙的业务要做, 是用自己的业余时间在维护, 为爱发电, 精力有限, 所以有时候 issue 响应速度不是那么及时, 如果你遇到了问题, 或者对 Issues 和 Discussions 列表的问题感兴趣, 可以直接认领并尝试修复 (贡献指南)，帮助 S2 变得更好, 而不是一味的埋怨和催促, 我们不是甲方乙方的关系.