fix(#4141): avoid cost O(n^2) to getComponents

src/chart/view.ts

@@ -1978,9 +1978,10 @@ export class View extends Base {
    * @param isUpdate
    */
   private renderComponents(isUpdate: boolean) {
+    const components = this.getComponents();
     // 先全部清空，然后 render
-    for (let i = 0; i < this.getComponents().length; i++) {
-      const co = this.getComponents()[i];
+    for (let i = 0; i < components.length; i++) {
+      const co = components[i];
       (co.component as GroupComponent).render();
     }
   }

tests/bugs/4141-spec.ts

@@ -0,0 +1,71 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('#4141', () => {
+  it('render large-amount-of-annotations, should cost less than 5s', () => {
+    const data: any[] = [];
+    for (let i = 0; i < 1000; i++) {
+      data.push(
+        ...[
+          { type: '17 岁以下', value: 654, percent: 0.02 },
+          { type: '18-24 岁', value: 4400, percent: 0.2 },
+          { type: '25-29 岁', value: 5300, percent: 0.24 },
+          { type: '30-39 岁', value: 6200, percent: 0.28 },
+          { type: '40-49 岁', value: 3300, percent: 0.14 },
+          { type: '50 岁以上', value: 1500, percent: 0.06 },
+          { type: '未知', value: 654, percent: 0.02 },
+        ]
+      );
+    }
+    const startTime = performance.now();
+    const chart = new Chart({
+      container: createDiv(),
+      autoFit: true,
+      height: 500,
+      padding: [50, 20, 50, 20],
+    });
+    chart.data(data);
+    chart.scale('value', {
+      alias: '销售额(万)',
+    });
+
+    chart.axis('type', {
+      tickLine: {
+        alignTick: false,
+      },
+    });
+    chart.axis('value', false);
+
+    chart.tooltip({
+      showMarkers: false,
+    });
+    chart.interval({ sortable: false, zIndexReversed: false, sortZIndex: false }).position('type*value');
+    chart.interaction('element-active');
+
+    // 添加文本标注
+    data.forEach((item) => {
+      chart
+        .annotation()
+        .text({
+          position: [item.type, item.value],
+          content: item.value,
+          style: {
+            textAlign: 'center',
+          },
+          offsetY: -30,
+        })
+        .text({
+          position: [item.type, item.value],
+          content: (item.percent * 100).toFixed(0) + '%',
+          style: {
+            textAlign: 'center',
+          },
+          offsetY: -12,
+        });
+    });
+
+    chart.render();
+    // Actual cost less than 1500ms.
+    expect(performance.now() - startTime).toBeLessThan(5000);
+  });
+});