diff --git a/src/action/roamHelper.ts b/src/action/roamHelper.ts
index b5f64bd6d8..d1721a93c3 100644
--- a/src/action/roamHelper.ts
+++ b/src/action/roamHelper.ts
@@ -19,6 +19,7 @@
 
 import type Geo from '../coord/geo/Geo';
 import type View from '../coord/View';
+import type ExtensionAPI from '../core/ExtensionAPI';
 import type { Payload } from '../util/types';
 
 export interface RoamPaylod extends Payload {
@@ -42,7 +43,8 @@ export function updateCenterAndZoom(
     zoomLimit?: {
         min?: number,
         max?: number
-    }
+    },
+    api?: ExtensionAPI
 ) {
     const previousZoom = view.getZoom();
     const center = view.getCenter();
@@ -56,7 +58,7 @@ export function updateCenterAndZoom(
         point[0] -= payload.dx;
         point[1] -= payload.dy;
 
-        view.setCenter(getCenterCoord(view, point));
+        view.setCenter(getCenterCoord(view, point), api);
     }
     if (zoom != null) {
         if (zoomLimit) {
@@ -79,7 +81,7 @@ export function updateCenterAndZoom(
 
         view.updateTransform();
         // Get the new center
-        view.setCenter(getCenterCoord(view, point));
+        view.setCenter(getCenterCoord(view, point), api);
         view.setZoom(zoom * previousZoom);
     }
 
diff --git a/src/chart/graph/createView.ts b/src/chart/graph/createView.ts
index 11324eb8fb..238c4b6184 100644
--- a/src/chart/graph/createView.ts
+++ b/src/chart/graph/createView.ts
@@ -88,7 +88,7 @@ export default function createViewCoordSys(ecModel: GlobalModel, api: ExtensionA
             );
 
             // Update roam info
-            viewCoordSys.setCenter(seriesModel.get('center'));
+            viewCoordSys.setCenter(seriesModel.get('center'), api);
             viewCoordSys.setZoom(seriesModel.get('zoom'));
 
             viewList.push(viewCoordSys);
diff --git a/src/chart/graph/install.ts b/src/chart/graph/install.ts
index 38b95c59d1..b917be00ef 100644
--- a/src/chart/graph/install.ts
+++ b/src/chart/graph/install.ts
@@ -32,6 +32,7 @@ import GraphSeriesModel from './GraphSeries';
 import { RoamPaylod, updateCenterAndZoom } from '../../action/roamHelper';
 import GlobalModel from '../../model/Global';
 import { noop } from 'zrender/src/core/util';
+import type ExtensionAPI from '../../core/ExtensionAPI';
 
 const actionInfo = {
     type: 'graphRoam',
@@ -72,13 +73,13 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     }, noop);
 
     // Register roam action.
-    registers.registerAction(actionInfo, function (payload: RoamPaylod, ecModel: GlobalModel) {
+    registers.registerAction(actionInfo, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) {
         ecModel.eachComponent({
             mainType: 'series', query: payload
         }, function (seriesModel: GraphSeriesModel) {
             const coordSys = seriesModel.coordinateSystem as View;
 
-            const res = updateCenterAndZoom(coordSys, payload);
+            const res = updateCenterAndZoom(coordSys, payload, undefined, api);
 
             seriesModel.setCenter
                 && seriesModel.setCenter(res.center);
diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts
index 6406175724..b868c6b9cc 100644
--- a/src/chart/tree/TreeView.ts
+++ b/src/chart/tree/TreeView.ts
@@ -172,7 +172,7 @@ class TreeView extends ChartView {
             group.y = layoutInfo.y;
         }
 
-        this._updateViewCoordSys(seriesModel);
+        this._updateViewCoordSys(seriesModel, api);
         this._updateController(seriesModel, ecModel, api);
 
         const oldData = this._data;
@@ -224,7 +224,7 @@ class TreeView extends ChartView {
         this._data = data;
     }
 
-    _updateViewCoordSys(seriesModel: TreeSeriesModel) {
+    _updateViewCoordSys(seriesModel: TreeSeriesModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
         const points: number[][] = [];
         data.each(function (idx) {
@@ -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'));
+        viewCoordSys.setCenter(seriesModel.get('center'), api);
         viewCoordSys.setZoom(seriesModel.get('zoom'));
 
         // Here we use viewCoordSys just for computing the 'position' and 'scale' of the group
diff --git a/src/chart/tree/treeAction.ts b/src/chart/tree/treeAction.ts
index 8543ef56e2..2589d3ef75 100644
--- a/src/chart/tree/treeAction.ts
+++ b/src/chart/tree/treeAction.ts
@@ -22,6 +22,7 @@ import { Payload } from '../../util/types';
 import TreeSeriesModel from './TreeSeries';
 import GlobalModel from '../../model/Global';
 import { EChartsExtensionInstallRegisters } from '../../extension';
+import type ExtensionAPI from '../../core/ExtensionAPI';
 
 export interface TreeExpandAndCollapsePayload extends Payload {
     dataIndex: number
@@ -51,12 +52,12 @@ export function installTreeAction(registers: EChartsExtensionInstallRegisters) {
         // the layout. So don't need to go through the whole update process, such
         // as 'dataPrcocess', 'coordSystemUpdate', 'layout' and so on.
         update: 'none'
-    }, function (payload: RoamPaylod, ecModel: GlobalModel) {
+    }, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) {
         ecModel.eachComponent({
             mainType: 'series', subType: 'tree', query: payload
         }, function (seriesModel: TreeSeriesModel) {
             const coordSys = seriesModel.coordinateSystem;
-            const res = updateCenterAndZoom(coordSys, payload);
+            const res = updateCenterAndZoom(coordSys, payload, undefined, api);
 
             seriesModel.setCenter
                 && seriesModel.setCenter(res.center);
diff --git a/src/component/geo/install.ts b/src/component/geo/install.ts
index 37a86bd97f..d18aa18376 100644
--- a/src/component/geo/install.ts
+++ b/src/component/geo/install.ts
@@ -27,6 +27,7 @@ import { updateCenterAndZoom, RoamPaylod } from '../../action/roamHelper';
 import MapSeries from '../../chart/map/MapSeries';
 import GeoView from './GeoView';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
+import type ExtensionAPI from '../../core/ExtensionAPI';
 
 type RegisterMapParams = Parameters<typeof geoSourceManager.registerMap>;
 function registerMap(
@@ -114,7 +115,7 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         type: 'geoRoam',
         event: 'geoRoam',
         update: 'updateTransform'
-    }, function (payload: RoamPaylod, ecModel: GlobalModel) {
+    }, function (payload: RoamPaylod, ecModel: GlobalModel, api: ExtensionAPI) {
         const componentType = payload.componentType || 'series';
 
         ecModel.eachComponent(
@@ -126,7 +127,7 @@ export function install(registers: EChartsExtensionInstallRegisters) {
                 }
 
                 const res = updateCenterAndZoom(
-                    geo, payload, (componentModel as GeoModel).get('scaleLimit')
+                    geo, payload, (componentModel as GeoModel).get('scaleLimit'), api
                 );
 
                 componentModel.setCenter
diff --git a/src/coord/View.ts b/src/coord/View.ts
index 452fb0ef89..bb4c1affb8 100644
--- a/src/coord/View.ts
+++ b/src/coord/View.ts
@@ -29,6 +29,8 @@ import Transformable from 'zrender/src/core/Transformable';
 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';
 
 const v2ApplyTransform = vector.applyTransform;
 
@@ -82,7 +84,6 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
      */
     private _viewRect: BoundingRect;
 
-
     constructor(name?: string) {
         super();
         this.name = name;
@@ -127,12 +128,14 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
     /**
      * Set center of view
      */
-    setCenter(centerCoord?: number[]): void {
+    setCenter(centerCoord: (number | string)[], api: ExtensionAPI): void {
         if (!centerCoord) {
             return;
         }
-        this._center = centerCoord;
-
+        this._center = [
+            parsePercent(centerCoord[0], api.getWidth()),
+            parsePercent(centerCoord[1], api.getHeight())
+        ];
         this._updateCenterAndZoom();
     }
 
diff --git a/src/coord/geo/geoCreator.ts b/src/coord/geo/geoCreator.ts
index c080e153ee..1d4bd3730e 100644
--- a/src/coord/geo/geoCreator.ts
+++ b/src/coord/geo/geoCreator.ts
@@ -151,7 +151,7 @@ function resizeGeo(this: Geo, geoModel: ComponentModel<GeoOption | MapSeriesOpti
 
     this.setViewRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 
-    this.setCenter(geoModel.get('center'));
+    this.setCenter(geoModel.get('center'), api);
     this.setZoom(geoModel.get('zoom'));
 }
 
diff --git a/src/util/types.ts b/src/util/types.ts
index dbaafc81b6..c503f48eec 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -873,7 +873,7 @@ export interface RoamOptionMixin {
     /**
      * Current center position.
      */
-    center?: number[]
+    center?: (number | string)[]
     /**
      * Current zoom level. Default is 1
      */
diff --git a/test/graph-simple.html b/test/graph-simple.html
index 25899700ea..092414d71e 100644
--- a/test/graph-simple.html
+++ b/test/graph-simple.html
@@ -55,6 +55,7 @@
                                         show: true
                                     }
                                 },
+                                center: ['30%', '80%'],
                                 edgeSymbol: ['circle', 'arrow'],
                                 edgeSymbolSize: [4, 10],
                                 edgeLabel: {
diff --git a/test/tree-legend.html b/test/tree-legend.html
index 63dab9c2ab..fbc1357c63 100644
--- a/test/tree-legend.html
+++ b/test/tree-legend.html
@@ -265,7 +265,8 @@
                                 left: '70%',
                                 bottom: '22%',
                                 right: '8%',
-
+                                center: ['80%', '10%'],
+                                zoom: 1.2,
                                 symbolSize: 7,
                                 orient: 'RL',