diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts
index a91f907b27..c9b215bfec 100644
--- a/src/chart/sankey/SankeySeries.ts
+++ b/src/chart/sankey/SankeySeries.ts
@@ -34,12 +34,14 @@ import {
     GraphEdgeItemObject,
     OptionDataValueNumeric,
     DefaultEmphasisFocus,
-    CallbackDataParams
+    CallbackDataParams,
+    RoamOptionMixin
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import SeriesData from '../../data/SeriesData';
 import { LayoutRect } from '../../util/layout';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
+import type View from '../../coord/View';
 
 
 type FocusNodeAdjacency = boolean | 'inEdges' | 'outEdges' | 'allEdges';
@@ -95,7 +97,8 @@ export interface SankeyLevelOption extends SankeyNodeStateOption, SankeyEdgeStat
 export interface SankeySeriesOption
     extends SeriesOption<SankeyBothStateOption<CallbackDataParams>, ExtraStateOption>,
     SankeyBothStateOption<CallbackDataParams>,
-    BoxLayoutOptionMixin {
+    BoxLayoutOptionMixin,
+    RoamOptionMixin {
     type?: 'sankey'
 
     /**
@@ -148,6 +151,8 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
     static readonly type = 'series.sankey';
     readonly type = SankeySeriesModel.type;
 
+    coordinateSystem: View;
+
     levelModels: Model<SankeyLevelOption>[];
 
     layoutInfo: LayoutRect;
@@ -213,6 +218,14 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
         dataItem.localY = localPosition[1];
     }
 
+    setCenter(center: number[]) {
+        this.option.center = center;
+    }
+
+    setZoom(zoom: number) {
+        this.option.zoom = zoom;
+    }
+
     /**
      * Return the graphic data structure
      *
@@ -297,6 +310,11 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
 
         layoutIterations: 32,
 
+        // true | false | 'move' | 'scale', see module:component/helper/RoamController.
+        roam: false,
+        center: null,
+        zoom: 1,
+
         label: {
             show: true,
             position: 'right',
diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts
index e84b7f7ee8..eb78454852 100644
--- a/src/chart/sankey/SankeyView.ts
+++ b/src/chart/sankey/SankeyView.ts
@@ -31,6 +31,9 @@ import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import { isString, retrieve3 } from 'zrender/src/core/util';
 import type { GraphEdge } from '../../data/Graph';
+import RoamController from '../../component/helper/RoamController';
+import * as roamHelper from '../../component/helper/roamHelper';
+import View from '../../coord/View';
 
 class SankeyPathShape {
     x1 = 0;
@@ -106,15 +109,28 @@ class SankeyView extends ChartView {
     readonly type = SankeyView.type;
 
     private _model: SankeySeriesModel;
-
+    private _mainGroup = new graphic.Group();
     private _focusAdjacencyDisabled = false;
 
     private _data: SeriesData;
 
+    private _controller: RoamController;
+    private _controllerHost: roamHelper.RoamControllerHost;
+
+    init(ecModel: GlobalModel, api: ExtensionAPI): void {
+        this._controller = new RoamController(api.getZr());
+
+        this._controllerHost = {
+            target: this.group
+        } as roamHelper.RoamControllerHost;
+
+        this.group.add(this._mainGroup);
+    }
+
     render(seriesModel: SankeySeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const sankeyView = this;
         const graph = seriesModel.getGraph();
-        const group = this.group;
+        const group = this._mainGroup;
         const layoutInfo = seriesModel.layoutInfo;
         // view width
         const width = layoutInfo.width;
@@ -128,8 +144,8 @@ class SankeyView extends ChartView {
 
         group.removeAll();
 
-        group.x = layoutInfo.x;
-        group.y = layoutInfo.y;
+        this._updateViewCoordSys(seriesModel, api);
+        roamHelper.updateController(seriesModel, api, group, this._controller, this._controllerHost);
 
         // generate a bezire Curve for each edge
         graph.eachEdge(function (edge) {
@@ -346,6 +362,25 @@ class SankeyView extends ChartView {
     }
 
     dispose() {
+        this._controller && this._controller.dispose();
+        this._controllerHost = null;
+    }
+
+    private _updateViewCoordSys(seriesModel: SankeySeriesModel, api: ExtensionAPI) {
+        const layoutInfo = seriesModel.layoutInfo;
+        const width = layoutInfo.width;
+        const height = layoutInfo.height;
+
+        const viewCoordSys = seriesModel.coordinateSystem = new View();
+        viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
+
+        viewCoordSys.setBoundingRect(0, 0, width, height);
+
+        viewCoordSys.setCenter(seriesModel.get('center'), api);
+        viewCoordSys.setZoom(seriesModel.get('zoom'));
+
+        this._mainGroup.x = layoutInfo.x;
+        this._mainGroup.y = layoutInfo.y;
     }
 }
 
diff --git a/src/chart/sankey/install.ts b/src/chart/sankey/install.ts
index b4f2fd493d..b3da093bfb 100644
--- a/src/chart/sankey/install.ts
+++ b/src/chart/sankey/install.ts
@@ -25,6 +25,8 @@ import sankeyLayout from './sankeyLayout';
 import sankeyVisual from './sankeyVisual';
 import { Payload } from '../../util/types';
 import GlobalModel from '../../model/Global';
+import { updateCenterAndZoom, RoamPayload } from '../../action/roamHelper';
+import type ExtensionAPI from '../../core/ExtensionAPI';
 
 interface SankeyDragNodePayload extends Payload {
     localX: number
@@ -53,4 +55,21 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         });
     });
 
-}
\ No newline at end of file
+    registers.registerAction({
+        type: 'sankeyRoam',
+        event: 'sankeyRoam',
+        update: 'none'
+    }, function (payload: RoamPayload, ecModel: GlobalModel, api: ExtensionAPI) {
+        ecModel.eachComponent({
+            mainType: 'series', subType: 'sankey', query: payload
+        }, function (seriesModel: SankeySeriesModel) {
+            const coordSys = seriesModel.coordinateSystem;
+            const res = updateCenterAndZoom(coordSys, payload, undefined, api);
+
+            seriesModel.setCenter
+                && seriesModel.setCenter(res.center);
+            seriesModel.setZoom
+                && seriesModel.setZoom(res.zoom);
+        });
+    });
+}
diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts
index be32e5887b..62dfbba541 100644
--- a/src/chart/tree/TreeView.ts
+++ b/src/chart/tree/TreeView.ts
@@ -26,7 +26,6 @@ import * as bbox from 'zrender/src/core/bbox';
 import View from '../../coord/View';
 import * as roamHelper from '../../component/helper/roamHelper';
 import RoamController from '../../component/helper/RoamController';
-import {onIrrelevantElement} from '../../component/helper/cursorHelper';
 import {parsePercent} from '../../util/number';
 import ChartView from '../../view/Chart';
 import TreeSeriesModel, { TreeSeriesOption, TreeSeriesNodeItemOption } from './TreeSeries';
@@ -277,44 +276,17 @@ class TreeView extends ChartView {
         ecModel: GlobalModel,
         api: ExtensionAPI
     ) {
-        const controller = this._controller;
-        const controllerHost = this._controllerHost;
-        const group = this.group;
-        controller.setPointerChecker(function (e, x, y) {
-            const rect = group.getBoundingRect();
-            rect.applyTransform(group.transform);
-            return rect.contain(x, y)
-                && !onIrrelevantElement(e, api, seriesModel);
-        });
-
-        controller.enable(seriesModel.get('roam'));
-        controllerHost.zoomLimit = seriesModel.get('scaleLimit');
-        controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
-
-        controller
-            .off('pan')
-            .off('zoom')
-            .on('pan', (e) => {
-                roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
-                api.dispatchAction({
-                    seriesId: seriesModel.id,
-                    type: 'treeRoam',
-                    dx: e.dx,
-                    dy: e.dy
-                });
-            })
+        roamHelper.updateController(
+            seriesModel,
+            api,
+            this.group,
+            this._controller,
+            this._controllerHost
+        );
+
+        this._controller
             .on('zoom', (e) => {
-                roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
-                api.dispatchAction({
-                    seriesId: seriesModel.id,
-                    type: 'treeRoam',
-                    zoom: e.scale,
-                    originX: e.originX,
-                    originY: e.originY
-                });
                 this._updateNodeAndLinkScale(seriesModel);
-                // Only update label layout on zoom
-                api.updateLabelLayout();
             });
     }
 
diff --git a/src/component/helper/roamHelper.ts b/src/component/helper/roamHelper.ts
index 0ed6b819fc..8f87a9e001 100644
--- a/src/component/helper/roamHelper.ts
+++ b/src/component/helper/roamHelper.ts
@@ -18,6 +18,14 @@
 */
 
 import Element from 'zrender/src/Element';
+import { SeriesModel } from '../../echarts.all';
+import ExtensionAPI from '../../core/ExtensionAPI';
+import Group from 'zrender/src/graphic/Group';
+import RoamController from './RoamController';
+import type { SeriesOption } from '../../export/option';
+import type View from '../../coord/View';
+import type { RoamOptionMixin } from '../../util/types';
+import { onIrrelevantElement } from './cursorHelper';
 
 export interface RoamControllerHost {
     target: Element;
@@ -62,3 +70,49 @@ export function updateViewOnZoom(controllerHost: RoamControllerHost, zoomDelta:
 
     target.dirty();
 }
+
+export function updateController(
+    seriesModel: SeriesModel<SeriesOption & RoamOptionMixin>,
+    api: ExtensionAPI,
+    group: Group,
+    controller: RoamController,
+    controllerHost: RoamControllerHost,
+) {
+    controller.setPointerChecker(function (e, x, y) {
+        const rect = group.getBoundingRect();
+        rect.applyTransform(group.transform);
+        return rect.contain(x, y)
+            && !onIrrelevantElement(e, api, seriesModel);
+    });
+
+    controller.enable(seriesModel.get('roam'));
+    controllerHost.zoomLimit = seriesModel.get('scaleLimit');
+    const coordinate = seriesModel.coordinateSystem;
+    controllerHost.zoom = coordinate ? (coordinate as View).getZoom() : 1;
+    const type = seriesModel.type + 'Roam';
+
+    controller
+        .off('pan')
+        .off('zoom')
+        .on('pan', (e) => {
+            updateViewOnPan(controllerHost, e.dx, e.dy);
+            api.dispatchAction({
+                seriesId: seriesModel.id,
+                type,
+                dx: e.dx,
+                dy: e.dy
+            });
+        })
+        .on('zoom', (e) => {
+            updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
+            api.dispatchAction({
+                seriesId: seriesModel.id,
+                type,
+                zoom: e.scale,
+                originX: e.originX,
+                originY: e.originY
+            });
+            // Only update label layout on zoom
+            api.updateLabelLayout();
+        });
+}
diff --git a/test/sankey-roam.html b/test/sankey-roam.html
new file mode 100644
index 0000000000..259d7b04d0
--- /dev/null
+++ b/test/sankey-roam.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+            option = {
+                series: {
+                    type: 'sankey',
+                    layout: 'none',
+                    roam: true,
+                    scaleLimit: {
+                        min: 0.5,
+                        max: 1.5
+                    },
+                    emphasis: {
+                    focus: 'adjacency'
+                    },
+                    data: [
+                    {
+                        name: 'a'
+                    },
+                    {
+                        name: 'b'
+                    },
+                    {
+                        name: 'a1'
+                    },
+                    {
+                        name: 'a2'
+                    },
+                    {
+                        name: 'b1'
+                    },
+                    {
+                        name: 'c'
+                    }
+                    ],
+                    links: [
+                    {
+                        source: 'a',
+                        target: 'a1',
+                        value: 5
+                    },
+                    {
+                        source: 'a',
+                        target: 'a2',
+                        value: 3
+                    },
+                    {
+                        source: 'b',
+                        target: 'b1',
+                        value: 8
+                    },
+                    {
+                        source: 'a',
+                        target: 'b1',
+                        value: 3
+                    },
+                    {
+                        source: 'b1',
+                        target: 'a1',
+                        value: 1
+                    },
+                    {
+                        source: 'b1',
+                        target: 'c',
+                        value: 2
+                    }
+                    ]
+                }
+            };
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Sankey Roam',
+                    'Pan and then click "Update" and the center should be kept'
+                ],
+                option: option,
+                // height: 300,
+                buttons: [{text: 'Update', onclick: function () {
+                    option.series.links[0].value = Math.random() * 10;
+                    chart.setOption(option);
+                }}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+