fix: markArea display filter correction

src/component/marker/MarkAreaView.ts

@@ -123,6 +123,21 @@ function markAreaFilter(coordSys: CoordinateSystem, item: MarkAreaMergedItemOpti
         ) {
             return true;
         }
+
+        /*Another zone filter is applied, which might not be necessary.
+        Directly returning true means displaying markArea component permanently,
+        but it won't hurt performance much and can sometimes save the work of filtering*/
+        return markerHelper.zoneFilter(coordSys, {
+            coord: fromCoord,
+            x: item.x0,
+            y: item.y0
+        },
+        {
+            coord: toCoord,
+            x: item.x1,
+            y: item.y1
+        }
+        )
     }
     return markerHelper.dataFilter(coordSys, {
             coord: fromCoord,

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

@@ -28,6 +28,7 @@ import Grid from './Grid';
 import Scale from '../../scale/Scale';
 import { invert } from 'zrender/src/core/matrix';
 import { applyTransform } from 'zrender/src/core/vector';
+import {rectRectIntersect} from '../../util/graphic'
 
 export const cartesian2DDimensions = ['x', 'y'];
 
@@ -105,6 +106,18 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
             && this.getAxis('y').containData(data[1]);
     }
 
+    containZone(data1: ScaleDataValue[], data2: ScaleDataValue[]): boolean {
+        const zoneCorner1 = this.dataToPoint(data1);
+        const zoneCorner2 = this.dataToPoint(data2);
+        const area = this.getArea();
+        return rectRectIntersect(
+            [zoneCorner1,zoneCorner2],
+            [
+                [area.x,area.y], [area.x + area.width, area.y + area.height]
+            ]
+        )
+    }
+
     dataToPoint(data: ScaleDataValue[], clamp?: boolean, out?: number[]): number[] {
         out = out || [];
         const xVal = data[0];

src/util/graphic.ts

@@ -493,6 +493,27 @@ export function createIcon(
     }
 }
 
+/**
+ * Return `true` if the given two polygons are intersect.
+ * Note that we do not count colinear as intersect here because no
+ * requirement for that. We could do that if required in future.
+ * Input takes in the coordinates of the two diagonal points
+ */
+ export function rectRectIntersect(
+    rect1: vector.VectorArray[],
+    rect2: vector.VectorArray[]
+): boolean {
+    const a1x = Math.min(rect1[0][0], rect1[1][0]);
+    const a2x = Math.max(rect1[0][0], rect1[1][0]);
+    const a1y = Math.min(rect1[0][1], rect1[1][1]);
+    const a2y = Math.max(rect1[0][1], rect1[1][1]);
+    const b1x = Math.min(rect2[0][0], rect2[1][0]);
+    const b2x = Math.max(rect2[0][0], rect2[1][0]);
+    const b1y = Math.min(rect2[0][1], rect2[1][1]);
+    const b2y = Math.max(rect2[0][1], rect2[1][1]);
+    return !((a2x < b1x) || (a1y > b2y) || (a1x > b2x) || (a2y < b1y));
+}
+
 /**
  * Return `true` if the given line (line `a`) and the given polygon
  * are intersect.