fix(graph): #16904 introcuded percentage string here, such as '33%'. But it was based on canvas width/height, which is not reasonable - the unit may incorrect, and it is unpredictable if the View['_rect'] is not calculated based on the current canvas rect. Therefore the percentage value is changed to based on View['_rect'].width/height since v6. Under this definition, users can use '0%' to map the top-left of View['_rect'] to the center of View['_viewRect'].

Author: 100pah

src/action/roamHelper.ts

@@ -58,7 +58,7 @@ export function updateCenterAndZoom(
         point[0] -= payload.dx;
         point[1] -= payload.dy;
 
-        view.setCenter(getCenterCoord(view, point), api);
+        view.setCenter(getCenterCoord(view, point));
     }
     if (zoom != null) {
         if (zoomLimit) {
@@ -81,7 +81,7 @@ export function updateCenterAndZoom(
 
         view.updateTransform();
         // Get the new center
-        view.setCenter(getCenterCoord(view, point), api);
+        view.setCenter(getCenterCoord(view, point));
         view.setZoom(zoom * previousZoom);
     }
 

src/chart/graph/createView.ts

@@ -79,21 +79,18 @@ export default function createViewCoordSys(ecModel: GlobalModel, api: ExtensionA
             const bbWidth = max[0] - min[0];
             const bbHeight = max[1] - min[1];
 
-            const viewWidth = viewRect.width;
-            const viewHeight = viewRect.height;
-
             const viewCoordSys = new View();
             viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
 
             viewCoordSys.setBoundingRect(
                 min[0], min[1], bbWidth, bbHeight
             );
             viewCoordSys.setViewRect(
-                viewRect.x, viewRect.y, viewWidth, viewHeight
+                viewRect.x, viewRect.y, viewRect.width, viewRect.height
             );
 
             // Update roam info
-            viewCoordSys.setCenter(seriesModel.get('center'), api);
+            viewCoordSys.setCenter(seriesModel.get('center'), {api, ecModel});
             viewCoordSys.setZoom(seriesModel.get('zoom'));
 
             viewList.push(viewCoordSys);

src/chart/sankey/SankeyView.ts

@@ -376,7 +376,7 @@ class SankeyView extends ChartView {
 
         viewCoordSys.setBoundingRect(0, 0, width, height);
 
-        viewCoordSys.setCenter(seriesModel.get('center'), api);
+        viewCoordSys.setCenter(seriesModel.get('center'), {api, ecModel: seriesModel.ecModel});
         viewCoordSys.setZoom(seriesModel.get('zoom'));
 
         this._mainGroup.x = layoutInfo.x;

src/chart/tree/TreeView.ts

@@ -257,7 +257,7 @@ class TreeView extends ChartView {
 
         viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
 
-        viewCoordSys.setCenter(seriesModel.get('center'), api);
+        viewCoordSys.setCenter(seriesModel.get('center'), {api, ecModel: seriesModel.ecModel});
         viewCoordSys.setZoom(seriesModel.get('zoom'));
 
         // Here we use viewCoordSys just for computing the 'position' and 'scale' of the group

src/coord/View.ts

@@ -30,7 +30,9 @@ import { CoordinateSystemMaster, CoordinateSystem } from './CoordinateSystem';
 import GlobalModel from '../model/Global';
 import { ParsedModelFinder, ParsedModelFinderKnown } from '../util/model';
 import { parsePercent } from '../util/number';
-import type ExtensionAPI from '../core/ExtensionAPI';
+import { RoamOptionMixin } from '../util/types';
+import { clone } from 'zrender/src/core/util';
+import ExtensionAPI from '../core/ExtensionAPI';
 
 const v2ApplyTransform = vector.applyTransform;
 
@@ -65,17 +67,20 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     /**
      * This is a user specified point on the source, which will be
      * located to the center of the `View['_viewRect']`.
-     * The unit this the same as `View['_rect']`.
+     * The unit and the origin of this point is the same as that of `[View['_rect']`.
      */
     private _center: number[];
+    private _centerOption: RoamOptionMixin['center'];
+
     private _zoom: number;
 
     /**
      * The rect of the source, where the measure is used by "data" and "center".
      * Has nothing to do with roam/zoom.
      * The unit is defined by the source. For example,
-     * for geo source the unit is lat/lng,
-     * for SVG source the unit is the same as the width/height defined in SVG.
+     *  - for geo source the unit is lat/lng,
+     *  - for SVG source the unit is the same as the width/height defined in SVG.
+     *  - for series.graph/series.tree/series.sankey the uiit is px.
      */
     private _rect: BoundingRect;
     /**
@@ -91,6 +96,7 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
 
     setBoundingRect(x: number, y: number, width: number, height: number): BoundingRect {
         this._rect = new BoundingRect(x, y, width, height);
+        this._updateCenterAndZoom();
         return this._rect;
     }
 
@@ -126,16 +132,33 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     }
 
     /**
-     * Set center of view
+     * [NOTICE]
+     *  The definition of this center has always been irrelevant to some other series center like
+     *  'series-pie.center' - this center is a point on the same coord sys as `View['_rect'].x/y`,
+     *  rather than canvas viewport, and the unit is not necessarily pixel (e.g., in geo case).
+     *  @see {View['_center']} for details.
      */
-    setCenter(centerCoord: (number | string)[], api: ExtensionAPI): void {
-        if (!centerCoord) {
-            return;
+    setCenter(
+        centerCoord: RoamOptionMixin['center'],
+        opt?: {
+            // Only for backward compat.
+            ecModel?: GlobalModel
+            api?: ExtensionAPI
+        }
+    ): void {
+        // #16904 introcuded percentage string here, such as '33%'. But it was based on canvas
+        // width/height, which is not reasonable - the unit may incorrect, and it is unpredictable if
+        // the `View['_rect']` is not calculated based on the current canvas rect. Therefore the percentage
+        // value is changed to based on `View['_rect'].width/height` since v6. Under this definition, users
+        // can use '0%' to map the top-left of `View['_rect']` to the center of `View['_viewRect']`.
+        if (opt && opt.api && opt.ecModel && opt.ecModel.getShallow('legacyViewCoordSysCenterBase') && centerCoord) {
+            centerCoord = [
+                parsePercent(centerCoord[0], opt.api.getWidth()),
+                parsePercent(centerCoord[1], opt.api.getWidth())
+            ];
         }
-        this._center = [
-            parsePercent(centerCoord[0], api.getWidth()),
-            parsePercent(centerCoord[1], api.getHeight())
-        ];
+
+        this._centerOption = clone(centerCoord);
         this._updateCenterAndZoom();
     }
 
@@ -181,9 +204,19 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     }
 
     /**
-     * Remove roam
+     * Ensure this method is idempotent, since it should be called when
+     * every relevant prop (e.g. _centerOption/_zoom/_rect/_viewRect) changed.
      */
     private _updateCenterAndZoom(): void {
+        const centerOption = this._centerOption;
+        const rect = this._rect;
+        if (centerOption && rect) {
+            this._center = [
+                parsePercent(centerOption[0], rect.width, rect.x),
+                parsePercent(centerOption[1], rect.height, rect.y)
+            ];
+        }
+
         // Must update after view transform updated
         const rawTransformMatrix = this._rawTransformable.getLocalTransform();
         const roamTransform = this._roamTransformable;

src/util/number.ts

@@ -112,7 +112,7 @@ export const parsePercent = parsePositionOption;
  * @see {parsePositionSizeOption} and also accept a string preset.
  * @see {PositionSizeOption}
  */
-export function parsePositionOption(option: unknown, percentBase: number): number {
+export function parsePositionOption(option: unknown, percentBase: number, percentOffset?: number): number {
     switch (option) {
         case 'center':
         case 'middle':
@@ -127,7 +127,7 @@ export function parsePositionOption(option: unknown, percentBase: number): numbe
             option = '100%';
             break;
     }
-    return parsePositionSizeOption(option, percentBase);
+    return parsePositionSizeOption(option, percentBase, percentOffset);
 }
 
 /**
@@ -136,10 +136,10 @@ export function parsePositionOption(option: unknown, percentBase: number): numbe
  * (But allow JS type coercion (`+option`) due to backward compatibility)
  * @see {PositionSizeOption}
  */
-export function parsePositionSizeOption(option: unknown, percentBase: number): number {
+export function parsePositionSizeOption(option: unknown, percentBase: number, percentOffset?: number): number {
     if (zrUtil.isString(option)) {
         if (_trim(option).match(/%$/)) {
-            return parseFloat(option) / 100 * percentBase;
+            return parseFloat(option) / 100 * percentBase + (percentOffset || 0);
         }
         return parseFloat(option);
     }

src/util/types.ts

@@ -708,6 +708,8 @@ export type ECUnitOption = {
     useUTC?: boolean
     hoverLayerThreshold?: number
 
+    legacyViewCoordSysCenterBase?: boolean
+
     [key: string]: ComponentOption | ComponentOption[] | Dictionary<unknown> | unknown
 
     stateAnimation?: AnimationOption