Treemap图调用changeData时出现栈溢出 #5821

问题描述

在Vue中使用Treemap图表，每5秒调用一次changeData更新图表，若changeData方法的参数data里，value值与旧data中相同，则会引发栈溢出等一系列错误

错误1：页面中仅有一个Treemap图表时

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at isEqual (is-equal.ts:5:17)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:21:13)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:21:13)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:36:13)
    at isEqual (is-equal.ts:21:13)

错误2：页面中存在多个不同类型的图表(包含一个Treemap)时

runtime-core.esm-bundler.js:1092 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
    at shouldUpdateComponent (runtime-core.esm-bundler.js:1092:29)
    at updateComponent (runtime-core.esm-bundler.js:5549:13)
    at processComponent (runtime-core.esm-bundler.js:5503:13)
    at patch (runtime-core.esm-bundler.js:5101:21)
    at patchBlockChildren (runtime-core.esm-bundler.js:5406:13)
    at patchElement (runtime-core.esm-bundler.js:5314:13)
    at processElement (runtime-core.esm-bundler.js:5181:13)
    at patch (runtime-core.esm-bundler.js:5098:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)

如果没有使用Treemap，则页面中不管有多少个图表，都不会出现上述错误

环境配置：

• Vuejs：v3.2.45
• @antv/g2plot：v2.4.31
• Nodejs：v16.20.1
• 浏览器：Chrome 119.0.6045.125

复现概率

100%复现

复现及测试过程

chart_instance.changeData({
    name: 'root',
    children: props.list.map((item) => {
        return {
            name: item.type,
            value: item.total, // 如果value值与旧值相同，则100%会出现错误
            value: (item.total + Math.random() * 100) | 0, // 我在此加上一些随机数后，则不再报错
        };
    }),
});

错误图示

文件示例

• 请下方查看附件 ReportOverview.zip