fix(scatter): fix jitter layout does not support progressive rendering and cause chart to freeze and potential NPE

src/chart/scatter/install.ts

@@ -36,5 +36,5 @@ export function install(registers: EChartsExtensionInstallRegisters) {
 }
 
 export function installScatterJitter(registers: EChartsExtensionInstallRegisters) {
-    registers.registerLayout(registers.PRIORITY.VISUAL.POST_CHART_LAYOUT, jitterLayout);
+    registers.registerLayout(registers.PRIORITY.VISUAL.POST_CHART_LAYOUT, jitterLayout());
 }

src/chart/scatter/jitterLayout.ts

@@ -17,53 +17,79 @@
 * under the License.
 */
 
-import type GlobalModel from '../../model/Global';
 import type ScatterSeriesModel from './ScatterSeries';
 import { needFixJitter, fixJitter } from '../../util/jitter';
 import type SingleAxis from '../../coord/single/SingleAxis';
 import type Axis2D from '../../coord/cartesian/Axis2D';
+import type { StageHandler } from '../../util/types';
+import createRenderPlanner from '../helper/createRenderPlanner';
 
-export default function jitterLayout(ecModel: GlobalModel) {
-    ecModel.eachSeriesByType('scatter', function (seriesModel: ScatterSeriesModel) {
-        const coordSys = seriesModel.coordinateSystem;
-        if (coordSys
-            && (coordSys.type === 'cartesian2d' || coordSys.type === 'single')) {
-            const baseAxis = coordSys.getBaseAxis ? coordSys.getBaseAxis() : null;
+export default function jitterLayout(): StageHandler {
+    return {
+        seriesType: 'scatter',
+
+        plan: createRenderPlanner(),
+
+        reset(seriesModel: ScatterSeriesModel) {
+            const coordSys = seriesModel.coordinateSystem;
+            if (!coordSys || (coordSys.type !== 'cartesian2d' && coordSys.type !== 'single')) {
+                return;
+            }
+            const baseAxis = coordSys.getBaseAxis && coordSys.getBaseAxis() as Axis2D | SingleAxis;
             const hasJitter = baseAxis && needFixJitter(seriesModel, baseAxis);
+            if (!hasJitter) {
+                return;
+            }
 
-            if (hasJitter) {
-                const data = seriesModel.getData();
-                data.each(function (idx) {
-                    const dim = baseAxis.dim;
-                    const orient = (baseAxis as SingleAxis).orient;
-                    const isSingleY = orient === 'horizontal' && baseAxis.type !== 'category'
-                        || orient === 'vertical' && baseAxis.type === 'category';
-                    const layout = data.getItemLayout(idx);
-                    const rawSize = data.getItemVisual(idx, 'symbolSize');
-                    const size = rawSize instanceof Array ? (rawSize[1] + rawSize[0]) / 2 : rawSize;
+            const dim = baseAxis.dim;
+            const orient = (baseAxis as SingleAxis).orient;
+            const isSingleY = orient === 'horizontal' && baseAxis.type !== 'category'
+                || orient === 'vertical' && baseAxis.type === 'category';
 
-                    if (dim === 'y' || dim === 'single' && isSingleY) {
-                        // x is fixed, and y is floating
-                        const jittered = fixJitter(
-                            baseAxis as Axis2D | SingleAxis,
-                            layout[0],
-                            layout[1],
-                            size / 2
-                        );
-                        data.setItemLayout(idx, [layout[0], jittered]);
-                    }
-                    else if (dim === 'x' || dim === 'single' && !isSingleY) {
-                        // y is fixed, and x is floating
-                        const jittered = fixJitter(
-                            baseAxis as Axis2D | SingleAxis,
-                            layout[1],
-                            layout[0],
-                            size / 2
-                        );
-                        data.setItemLayout(idx, [jittered, layout[1]]);
-                    }
-                });
+            const jitterOnY = dim === 'y' || (dim === 'single' && isSingleY);
+            const jitterOnX = dim === 'x' || (dim === 'single' && !isSingleY);
+            if (!jitterOnY && !jitterOnX) {
+                return;
             }
+
+            return {
+                progress(params, data): void {
+                    const points = data.getLayout('points') as Float32Array;
+                    const hasPoints = !!points;
+
+                    for (let i = params.start; i < params.end; i++) {
+                        const offset = hasPoints ? (i - params.start) * 2 : -1;
+                        const layout = hasPoints ? [points[offset], points[offset + 1]] : data.getItemLayout(i);
+                        if (!layout) {
+                            continue;
+                        }
+
+                        const rawSize = data.getItemVisual(i, 'symbolSize');
+                        const size = rawSize instanceof Array ? (rawSize[1] + rawSize[0]) / 2 : rawSize;
+
+                        if (jitterOnY) {
+                            // x is fixed, and y is floating
+                            const jittered = fixJitter(baseAxis, layout[0], layout[1], size / 2);
+                            if (hasPoints) {
+                                points[offset + 1] = jittered;
+                            }
+                            else {
+                                layout[1] = jittered;
+                            }
+                        }
+                        else if (jitterOnX) {
+                            // y is fixed, and x is floating
+                            const jittered = fixJitter(baseAxis, layout[1], layout[0], size / 2);
+                            if (hasPoints) {
+                                points[offset] = jittered;
+                            }
+                            else {
+                                layout[0] = jittered;
+                            }
+                        }
+                    }
+                }
+            };
         }
-    });
+    };
 }

src/util/jitter.ts

@@ -67,21 +67,19 @@ export function fixJitter(
     }
     const axisModel = fixedAxis.model as AxisBaseModel;
     const jitter = axisModel.get('jitter');
+    if (!(jitter > 0)) {
+        return floatCoord;
+    }
     const jitterOverlap = axisModel.get('jitterOverlap');
     const jitterMargin = axisModel.get('jitterMargin') || 0;
     // Get band width to limit jitter range
     const bandWidth = fixedAxis.scale.type === 'ordinal'
         ? fixedAxis.getBandWidth()
         : null;
-    if (jitter > 0) {
-        if (jitterOverlap) {
-            return fixJitterIgnoreOverlaps(floatCoord, jitter, bandWidth, radius);
-        }
-        else {
-            return fixJitterAvoidOverlaps(fixedAxis, fixedCoord, floatCoord, radius, jitter, jitterMargin);
-        }
+    if (jitterOverlap) {
+        return fixJitterIgnoreOverlaps(floatCoord, jitter, bandWidth, radius);
     }
-    return floatCoord;
+    return fixJitterAvoidOverlaps(fixedAxis, fixedCoord, floatCoord, radius, jitter, jitterMargin);
 }
 
 function fixJitterIgnoreOverlaps(