antvis / S2

⚡️ A practical visualization library for tabular analysis.
https://s2.antv.antgroup.com
MIT License
1.46k stars 193 forks source link

🐛平铺模式数据量过大时出现栈溢出 #2824

Closed misswangkang closed 1 month ago

misswangkang commented 1 month ago

🏷 Version

Package Version
@antv/s2 1.47.1
@antv/s2-react
@antv/s2-vue

Sheet Type

🖋 Description

push.apply 在大数据量下栈溢出 https://stackoverflow.com/questions/1374126/how-to-extend-an-existing-javascript-array-with-another-array-without-creating/17368101#17368101 image image

⌨️ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment Info
System
Browser
github-actions[bot] commented 1 month ago

你好 @misswangkang,请提供一个可以在线访问的链接, 或者使用 codesandbox 提供示例并详细说明复现步骤 (查看更多模板), 15 天内未回复issue自动关闭。

Hello, @misswangkang, please provide an accessible link or usage codesandbox to describe the reproduction steps (more template). The issue will be closed without any replay within 15 days.

misswangkang commented 1 month ago

@lijinke666 官网案例 100w条数据性能表现-透视表 修改了数据生成,出现同样的报错 import { PivotSheet, S2DataConfig } from '@antv/s2';

const s2Options = { width: 600, height: 480, };

export function generateRawData( row: Record<string, number>, col: Record<string, number>, ) { const res: Record<string, any>[] = []; const rowKeys = Object.keys(row); const colKeys = Object.keys(col);

for (let i = 0; i < row[rowKeys[0]]; i++) { for (let j = 0; j < row[rowKeys[1]]; j++) { for (let m = 0; m < col[colKeys[0]]; m++) { for (let n = 0; n < col[colKeys[1]]; n++) { res.push({ province: p${i}, city: c${i}, type: type${i}, subType: subType${i}, number: i * n, }); } } } }

return res; }

const s2DataConfig: S2DataConfig = { fields: { rows: ['type', 'subType','province', 'city'], columns: [], values: ['number'], }, data: generateRawData( { province: 200000, city: 1 }, { type: 1, sub_type: 1 }, ), };

async function bootstrap() { const container = document.getElementById('container');

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

await s2.render(); }

bootstrap();

lijinke666 commented 1 month ago

fields: { rows: ['type', 'subType','province', 'city'], columns: [], values: ['number'], }, data: generateRawData( { province: 200000, city: 1 }, { type: 1, sub_type: 1 }, )

province: 200000 也太夸张了吧, 透视表支持不了这么多维值的计算, 你这里最终虽然只生成了 20w 条明细数据, 但是每一条数据里面的 province 都是独立的, 相当于有 20W 个独立维值, 维值越多, 内存占用就越多, 想不堆栈溢出都难. 这种只能建议使用明细表展示.

misswangkang commented 1 month ago

@lijinke666 有具体基线值吗,最多支持多少独立的维度值,因为我们很难限制用户不这样使用