From 624f520edd5e0e01c4387ee65b95d2b6f781e662 Mon Sep 17 00:00:00 2001
From: konewka17 <56441194+konewka17@users.noreply.github.com>
Date: Tue, 31 Mar 2026 19:52:42 +0200
Subject: [PATCH 1/2] feat(sankey): support disabling node sorting. close
 #21561

---
 src/chart/sankey/SankeySeries.ts |  6 ++++++
 src/chart/sankey/sankeyLayout.ts | 29 +++++++++++++++++-----------
 test/sankey.html                 | 33 ++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts
index ebd85227ab..a3ca46f19e 100644
--- a/src/chart/sankey/SankeySeries.ts
+++ b/src/chart/sankey/SankeySeries.ts
@@ -136,6 +136,11 @@ export interface SankeySeriesOption
      * The number of iterations to change the position of the node
      */
     layoutIterations?: number
+    /**
+     * Whether to sort nodes by current coordinate when resolving collisions.
+     * Set to false to preserve the original node order in each depth column.
+     */
+    sortNodes?: boolean
 
     nodeAlign?: 'justify' | 'left' | 'right'    // TODO justify should be auto
 
@@ -318,6 +323,7 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
         draggable: true,
 
         layoutIterations: 32,
+        sortNodes: true,
 
         // true | false | 'move' | 'scale', see module:component/helper/RoamController.
         roam: false,
diff --git a/src/chart/sankey/sankeyLayout.ts b/src/chart/sankey/sankeyLayout.ts
index 8e9c8d22bb..8e0ce9e619 100644
--- a/src/chart/sankey/sankeyLayout.ts
+++ b/src/chart/sankey/sankeyLayout.ts
@@ -57,8 +57,9 @@ export default function sankeyLayout(ecModel: GlobalModel, api: ExtensionAPI) {
         const orient = seriesModel.get('orient');
 
         const nodeAlign = seriesModel.get('nodeAlign');
+        const sortNodes = seriesModel.get('sortNodes');
 
-        layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient, nodeAlign);
+        layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations, orient, nodeAlign, sortNodes);
     });
 }
 
@@ -71,10 +72,11 @@ function layoutSankey(
     height: number,
     iterations: number,
     orient: LayoutOrient,
-    nodeAlign: SankeySeriesOption['nodeAlign']
+    nodeAlign: SankeySeriesOption['nodeAlign'],
+    sortNodes: boolean
 ) {
     computeNodeBreadths(nodes, edges, nodeWidth, width, height, orient, nodeAlign);
-    computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, orient);
+    computeNodeDepths(nodes, edges, height, width, nodeGap, iterations, orient, sortNodes);
     computeEdgeDepths(nodes, orient);
 }
 
@@ -257,6 +259,7 @@ function scaleNodeBreadths(nodes: GraphNode[], kx: number, orient: LayoutOrient)
  * @param nodeGap  the vertical distance between two nodes
  *     in the same column.
  * @param iterations  the number of iterations for the algorithm
+ * @param sortNodes  whether to sort the nodes by y-position
  */
 function computeNodeDepths(
     nodes: GraphNode[],
@@ -265,21 +268,22 @@ function computeNodeDepths(
     width: number,
     nodeGap: number,
     iterations: number,
-    orient: LayoutOrient
+    orient: LayoutOrient,
+    sortNodes: boolean
 ) {
     const nodesByBreadth = prepareNodesByBreadth(nodes, orient);
 
     initializeNodeDepth(nodesByBreadth, edges, height, width, nodeGap, orient);
-    resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
+    resolveCollisions(nodesByBreadth, nodeGap, height, width, orient, sortNodes);
 
     for (let alpha = 1; iterations > 0; iterations--) {
         // 0.99 is a experience parameter, ensure that each iterations of
         // changes as small as possible.
         alpha *= 0.99;
         relaxRightToLeft(nodesByBreadth, alpha, orient);
-        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
+        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient, sortNodes);
         relaxLeftToRight(nodesByBreadth, alpha, orient);
-        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient);
+        resolveCollisions(nodesByBreadth, nodeGap, height, width, orient, sortNodes);
     }
 }
 
@@ -355,13 +359,16 @@ function resolveCollisions(
     nodeGap: number,
     height: number,
     width: number,
-    orient: LayoutOrient
+    orient: LayoutOrient,
+    sortNodes: boolean
 ) {
     const keyAttr = orient === 'vertical' ? 'x' : 'y';
     zrUtil.each(nodesByBreadth, function (nodes) {
-        nodes.sort(function (a, b) {
-            return a.getLayout()[keyAttr] - b.getLayout()[keyAttr];
-        });
+        if (sortNodes !== false) {
+            nodes.sort(function (a, b) {
+                return a.getLayout()[keyAttr] - b.getLayout()[keyAttr];
+            });
+        }
         let nodeX;
         let node;
         let dy;
diff --git a/test/sankey.html b/test/sankey.html
index 7b6205d108..877187a11a 100644
--- a/test/sankey.html
+++ b/test/sankey.html
@@ -39,6 +39,7 @@
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
+        <div id="main4"></div>
 
 
 
@@ -178,6 +179,38 @@
             });
         </script>
 
+        <script>
+            require([
+                'echarts',
+                './data/energy.json'
+            ], function (echarts, data) {
+                var option = {
+                    series: [
+                        {
+                            type: 'sankey',
+                            sortNodes: false,
+                            nodeGap: 4,
+                            data: data.nodes,
+                            links: data.links,
+                            lineStyle: {
+                                color: 'gradient',
+                                curveness: 0.5
+                            }
+                        }
+                    ]
+                };
+
+                var chart = testHelper.create(echarts, 'main4', {
+                    title: 'sortNodes: false keeps input node order per depth',
+                    option: option
+                });
+
+                if (chart) {
+                    window.addEventListener('resize', chart.resize);
+                }
+            });
+        </script>
+
         <script>
             require([
                 'echarts',

From 6418ca21c356a7eb937b794dc96ee79f3eb5b47d Mon Sep 17 00:00:00 2001
From: tom <tjp.salet@gmail.com>
Date: Wed, 1 Apr 2026 10:54:00 +0200
Subject: [PATCH 2/2] feat(sankey): added dedicated test file

---
 test/sankey-node-sorting.html | 97 +++++++++++++++++++++++++++++++++++
 test/sankey.html              | 33 ------------
 2 files changed, 97 insertions(+), 33 deletions(-)
 create mode 100644 test/sankey-node-sorting.html

diff --git a/test/sankey-node-sorting.html b/test/sankey-node-sorting.html
new file mode 100644
index 0000000000..2ceb98ac4e
--- /dev/null
+++ b/test/sankey-node-sorting.html
@@ -0,0 +1,97 @@
+<!--
+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>
+<div id="main1"></div>
+<div id="main2"></div>
+
+
+<script>
+    require([
+        "echarts"
+    ], function (echarts) {
+        const data = {
+            nodes: [
+                {name: "A"}, {name: "A-out-0", depth: 1}, {name: "A-out-1", depth: 1}, {name: "A-out-2", depth: 1},
+                {name: "A-out-3", depth: 1}, {name: "A-to-B-1"}, {name: "A-to-B-2"}, {name: "A-to-B-3"}, {name: "B"}, {name: "B-in-1", depth: 1},
+                {name: "B-in-2", depth: 1}, {name: "A-to-C-1"}, {name: "A-to-C-2"}, {name: "A-to-C-3"}, {name: "C"}
+            ], links: [
+                {source: "A", target: "A-out-0", value: 1}, {source: "A", target: "A-out-1", value: 2},
+                {source: "A", target: "A-out-2", value: 3}, {source: "A", target: "A-out-3", value: 30},
+                {source: "A", target: "A-to-B-1", value: 3}, {source: "A", target: "A-to-B-2", value: 7},
+                {source: "A", target: "A-to-B-3", value: 9}, {source: "A", target: "A-to-C-1", value: 3},
+				{source: "A", target: "A-to-C-2", value: 7}, {source: "A", target: "A-to-C-3", value: 9},
+                {source: "A-to-B-1", target: "B", value: 3}, {source: "A-to-B-2", target: "B", value: 7},
+                {source: "A-to-B-3", target: "B", value: 9}, {source: "B-in-1", target: "B", value: 1},
+                {source: "B-in-2", target: "B", value: 2},
+				{source: "A-to-C-1", target: "C", value: 1}, {source: "A-to-C-2", target: "C", value: 7},
+				{source: "A-to-C-3", target: "C", value: 9}
+            ]
+        };
+        let option = {
+            series: [
+                {
+                    type: "sankey",
+                    data: data.nodes,
+                    links: data.links
+                }
+            ]
+        };
+
+        const chart0 = testHelper.create(echarts, "main0", {
+            title: "Default behaviour, sortNodes: true, has links crossing over each other",
+			option: {series: [{type: "sankey", data: data.nodes, links: data.links, sortNodes: true}]}
+        });
+        window.addEventListener("resize", chart0.resize);
+
+        const chart1 = testHelper.create(echarts, "main1", {
+            title: "Suggested workaround, layoutIterations: 0, has all levels aligned to the top",
+            option: {series: [{type: "sankey", data: data.nodes, links: data.links, layoutIterations: 0}]}
+        });
+        window.addEventListener("resize", chart1.resize);
+
+        const chart2 = testHelper.create(echarts, "main2", {
+            title: "sortNodes: false gives user a chance to sort nodes manually, while still optimising the layout",
+            option: {series: [{type: "sankey", data: data.nodes, links: data.links, sortNodes: false}]}
+        });
+        window.addEventListener("resize", chart2.resize);
+
+    });
+</script>
+
+
+</body>
+</html>
diff --git a/test/sankey.html b/test/sankey.html
index 877187a11a..7b6205d108 100644
--- a/test/sankey.html
+++ b/test/sankey.html
@@ -39,7 +39,6 @@
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
-        <div id="main4"></div>
 
 
 
@@ -179,38 +178,6 @@
             });
         </script>
 
-        <script>
-            require([
-                'echarts',
-                './data/energy.json'
-            ], function (echarts, data) {
-                var option = {
-                    series: [
-                        {
-                            type: 'sankey',
-                            sortNodes: false,
-                            nodeGap: 4,
-                            data: data.nodes,
-                            links: data.links,
-                            lineStyle: {
-                                color: 'gradient',
-                                curveness: 0.5
-                            }
-                        }
-                    ]
-                };
-
-                var chart = testHelper.create(echarts, 'main4', {
-                    title: 'sortNodes: false keeps input node order per depth',
-                    option: option
-                });
-
-                if (chart) {
-                    window.addEventListener('resize', chart.resize);
-                }
-            });
-        </script>
-
         <script>
             require([
                 'echarts',