Merge pull request apache#16861 from jiawulin001/issue#16853

fix: markArea display filter correction

src/component/marker/MarkAreaView.ts

@@ -109,6 +109,16 @@ function ifMarkAreaHasOnlyDim(
 function markAreaFilter(coordSys: CoordinateSystem, item: MarkAreaMergedItemOption) {
     const fromCoord = item.coord[0];
     const toCoord = item.coord[1];
+    const item0 = {
+        coord: fromCoord,
+        x: item.x0,
+        y: item.y0
+    };
+    const item1 = {
+        coord: toCoord,
+        x: item.x1,
+        y: item.y1
+    };
     if (isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')) {
         // In case
         // {
@@ -123,17 +133,15 @@ function markAreaFilter(coordSys: CoordinateSystem, item: MarkAreaMergedItemOpti
         ) {
             return true;
         }
+        //Directly returning true may also do the work,
+        //because markArea will not be shown automatically
+        //when it's not included in coordinate system.
+        //But filtering ahead can avoid keeping rendering markArea
+        //when there are too many of them.
+        return markerHelper.zoneFilter(coordSys, item0, item1);
     }
-    return markerHelper.dataFilter(coordSys, {
-            coord: fromCoord,
-            x: item.x0,
-            y: item.y0
-        })
-        || markerHelper.dataFilter(coordSys, {
-            coord: toCoord,
-            x: item.x1,
-            y: item.y1
-        });
+    return markerHelper.dataFilter(coordSys, item0)
+        || markerHelper.dataFilter(coordSys, item1);
 }
 
 // dims can be ['x0', 'y0'], ['x1', 'y1'], ['x0', 'y1'], ['x1', 'y0']

src/component/marker/markerHelper.ts

@@ -196,6 +196,19 @@ export function dataFilter(
         ? coordSys.containData(item.coord) : true;
 }
 
+export function zoneFilter(
+    // Currently only polar and cartesian has containData.
+    coordSys: CoordinateSystem & {
+        containZone?(data1: ScaleDataValue[], data2: ScaleDataValue[]): boolean
+    },
+    item1: MarkerPositionOption,
+    item2: MarkerPositionOption
+) {
+    // Alwalys return true if there is no coordSys
+    return (coordSys && coordSys.containZone && item1.coord && item2.coord && !hasXOrY(item1) && !hasXOrY(item2))
+        ? coordSys.containZone(item1.coord, item2.coord) : true;
+}
+
 export function createMarkerDimValueGetter(
     inCoordSys: boolean,
     dims: SeriesDimensionDefine[]

src/coord/cartesian/Cartesian2D.ts

@@ -105,6 +105,18 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
             && this.getAxis('y').containData(data[1]);
     }
 
+    containZone(data1: ScaleDataValue[], data2: ScaleDataValue[]): boolean {
+        const zoneDiag1 = this.dataToPoint(data1);
+        const zoneDiag2 = this.dataToPoint(data2);
+        const area = this.getArea();
+        const zone = new BoundingRect(
+            zoneDiag1[0],
+            zoneDiag1[1],
+            zoneDiag2[0] - zoneDiag1[0],
+            zoneDiag2[1] - zoneDiag1[1]);
+        return area.intersect(zone);
+    }
+
     dataToPoint(data: ScaleDataValue[], clamp?: boolean, out?: number[]): number[] {
         out = out || [];
         const xVal = data[0];