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

src/component/marker/MarkPointModel.ts

@@ -43,6 +43,7 @@ export interface MarkPointDataItemOption extends
     SymbolOptionMixin<CallbackDataParams>,
     MarkerPositionOption {
     name: string
+    relativeTo: 'container' | 'coordinate'
 }
 
 export interface MarkPointOption extends MarkerOption,

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 relativeTo = itemModel.get('relativeTo');
+        const width = relativeTo === 'coordinate'
+            ? coordRect ? coordRect.width : 0
+            : apiWidth;
+        const height = relativeTo === 'coordinate'
+            ? coordRect ? coordRect.height : 0
+            : apiHeight;
+        const left = relativeTo === 'coordinate'
+            ? coordRect ? coordRect.x : 0
+            : 0;
+        const top = relativeTo === 'coordinate'
+            ? coordRect ? coordRect.y : 0
+            : 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 @@
     // Absolute position, px or percent string
     x?: number | string
     y?: number | string
+    relativeTo?: 'container' | 'coordinate'
 
     /**
      * Coord on any coordinate system
@@ -259,7 +260,7 @@
     }
 }
 
 interface MarkerModel<Opts extends MarkerOption = MarkerOption> extends DataFormatMixin {}
 zrUtil.mixin(MarkerModel, DataFormatMixin.prototype);
 
 export default MarkerModel;

src/component/marker/markerHelper.ts

@@ -146,6 +146,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
         };
     }