Merge pull request #20166 from apache/feat/stock-marker

feat(marker): add `relativeTo` option for specifying the relative target of marker position

Author: plainheart

src/component/marker/MarkPointView.ts

@@ -41,11 +41,28 @@ function updateMarkerLayout(
     api: ExtensionAPI
 ) {
     const coordSys = seriesModel.coordinateSystem;
+    const apiWidth = api.getWidth();
+    const apiHeight = api.getHeight();
+    const coordRect = coordSys.getArea && coordSys.getArea();
     mpData.each(function (idx: number) {
         const itemModel = mpData.getItemModel<MarkPointDataItemOption>(idx);
+        const isRelativeToCoordinate = itemModel.get('relativeTo') === 'coordinate';
+        const width = isRelativeToCoordinate
+            ? (coordRect ? coordRect.width : 0)
+            : apiWidth;
+        const height = isRelativeToCoordinate
+            ? (coordRect ? coordRect.height : 0)
+            : apiHeight;
+        const left = isRelativeToCoordinate && coordRect
+            ? coordRect.x
+            : 0;
+        const top = isRelativeToCoordinate && coordRect
+            ? coordRect.y
+            : 0;
+
         let point;
-        const xPx = numberUtil.parsePercent(itemModel.get('x'), api.getWidth());
-        const yPx = numberUtil.parsePercent(itemModel.get('y'), api.getHeight());
+        const xPx = numberUtil.parsePercent(itemModel.get('x'), width) + left;
+        const yPx = numberUtil.parsePercent(itemModel.get('y'), height) + top;
         if (!isNaN(xPx) && !isNaN(yPx)) {
             point = [xPx, yPx];
         }

src/component/marker/MarkerModel.ts

@@ -53,6 +53,7 @@ export interface MarkerPositionOption {
     // Absolute position, px or percent string
     x?: number | string
     y?: number | string
+    relativeTo?: 'container' | 'coordinate'
 
     /**
      * Coord on any coordinate system

src/component/marker/markerHelper.ts

@@ -153,6 +153,9 @@ export function dataTransform(
     // x y is provided
     if (item.coord == null || !isArray(dims)) {
         item.coord = [];
+        const baseAxis = seriesModel.getBaseAxis();
+        const otherAxis = coordSys.getOtherAxis(baseAxis);
+        item.value = numCalculate(data, data.mapDimension(otherAxis.dim), item.type);
     }
     else {
         // Each coord support max, min, average

src/coord/CoordinateSystem.ts

@@ -174,7 +174,11 @@ export interface CoordinateSystemHostModel extends ComponentModel {
  * It is used to clip the graphic elements with the contain methods.
  */
 export interface CoordinateSystemClipArea {
-    contain(x: number, y: number): boolean
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    contain(x: number, y: number): boolean;
 }
 
 export function isCoordinateSystemType<T extends CoordinateSystem, S = T['type']>(

src/coord/polar/Polar.ts

@@ -235,7 +235,13 @@ class Polar implements CoordinateSystem, CoordinateSystemMaster {
                 // minus a tiny value 1e-4 in double side to avoid being clipped unexpectedly
                 // r == r0 contain nothing
                 return r !== r0 && (d2 - EPSILON) <= r * r && (d2 + EPSILON) >= r0 * r0;
-            }
+            },
+
+            // As the bounding box
+            x: this.cx - radiusExtent[1],
+            y: this.cy - radiusExtent[1],
+            width: radiusExtent[1] * 2,
+            height: radiusExtent[1] * 2
         };
     }