diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index e4be916699..dce754a46c 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -746,18 +746,9 @@ const elementCreator: {
         seriesModel, data, newIndex, layout: SectorLayout, isRadial: boolean,
         animationModel, axisModel, isUpdate, roundCap
     ) {
-        // Keep the same logic with bar in catesion: use end value to control
-        // direction. Notice that if clockwise is true (by default), the sector
-        // will always draw clockwisely, no matter whether endAngle is greater
-        // or less than startAngle.
-        const clockwise = layout.startAngle < layout.endAngle;
-
         const ShapeClass = (!isRadial && roundCap) ? Sausage : Sector;
-
         const sector = new ShapeClass({
-            shape: defaults({
-                clockwise: clockwise
-            }, layout),
+            shape: layout,
             z2: 1
         });
 
@@ -909,7 +900,8 @@ const getLayout: {
             r0: layout.r0,
             r: layout.r,
             startAngle: layout.startAngle,
-            endAngle: layout.endAngle
+            endAngle: layout.endAngle,
+            clockwise: layout.clockwise
         } as SectorLayout;
     }
 };
diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts
index 081d884634..bc63fcba99 100644
--- a/src/layout/barPolar.ts
+++ b/src/layout/barPolar.ts
@@ -183,7 +183,15 @@ function barLayoutPolar(seriesType: string, ecModel: GlobalModel, api: Extension
                 // Consider that positive angle is anti-clockwise,
                 // while positive radian of sector is clockwise
                 startAngle: -startAngle * Math.PI / 180,
-                endAngle: -endAngle * Math.PI / 180
+                endAngle: -endAngle * Math.PI / 180,
+
+                /**
+                 * Keep the same logic with bar in catesion: use end value to
+                 * control direction. Notice that if clockwise is true (by
+                 * default), the sector will always draw clockwisely, no matter
+                 * whether endAngle is greater or less than startAngle.
+                 */
+                clockwise: startAngle >= endAngle
             });
 
         }
diff --git a/test/bar-polar-basic.html b/test/bar-polar-basic.html
deleted file mode 100644
index 3dab721de3..0000000000
--- a/test/bar-polar-basic.html
+++ /dev/null
@@ -1,81 +0,0 @@
-
-<!--
-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">
-        <script src="lib/simpleRequire.js"></script>
-        <script src="lib/config.js"></script>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    </head>
-    <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-            }
-            #main {
-                background: #fff;
-            }
-        </style>
-        <h3>click axis labe should console log</h3>
-        <div id="main"></div>
-        <script>
-
-            require(['echarts'], function (echarts) {
-
-                var chart = echarts.init(document.getElementById('main'));
-
-                chart.setOption({
-                    angleAxis: {
-                        triggerEvent: true
-                    },
-                    radiusAxis: {
-                        type: 'category',
-                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-                        z: 10,
-                        triggerEvent: true
-                    },
-                    polar: {
-                    },
-                    tooltip: {},
-                    series: [{
-                        type: 'bar',
-                        data: [1, 2, 4, 3, 6, 5, 7],
-                        coordinateSystem: 'polar',
-                        itemStyle: {
-                            normal: {
-                                color: '#00f'
-                            }
-                        },
-                        barWidth: '50%'
-                    }]
-                });
-
-                chart.on('click', function (params) {
-                    console.log(params);
-                });
-
-                window.onresize = chart.resize;
-            });
-        </script>
-    </body>
-</html>
diff --git a/test/bar-polar-clockwise.html b/test/bar-polar-clockwise.html
new file mode 100644
index 0000000000..d799c3fbbf
--- /dev/null
+++ b/test/bar-polar-clockwise.html
@@ -0,0 +1,106 @@
+
+<!--
+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">
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            html, body {
+                position: relative;
+            }
+            .chart-panel {
+                display: inline-block;
+                width: 200px;
+                height: 200px;
+            }
+            .chart {
+                width: 200px;
+                height: 180px;
+            }
+        </style>
+        <h3>click axis label should console log</h3>
+        <h3>click update button, sectors should be in the same order</h3>
+        <button type="button" id="btn-update">Update</button>
+        <div class="chart-panel">
+            <h4>clockwise: true</h4>
+            <div id="main0" class="chart"></div>
+        </div>
+        <div class="chart-panel">
+            <h4>clockwise: false</h4>
+            <div id="main1" class="chart"></div>
+        </div>
+        <script>
+
+            require(['echarts'], function (echarts) {
+                var charts = [];
+                for (let i = 0; i < 2; ++i) {
+                    var chart = echarts.init(document.getElementById('main' + i));
+                    charts.push(chart);
+
+                    chart.setOption({
+                        angleAxis: {
+                            triggerEvent: true,
+                            clockwise: !i
+                        },
+                        radiusAxis: {
+                            type: 'category',
+                            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+                            z: 10,
+                            triggerEvent: true
+                        },
+                        polar: {
+                        },
+                        tooltip: {},
+                        series: [{
+                            type: 'bar',
+                            data: [1, 2, 0, 3, 6, 5, 7],
+                            coordinateSystem: 'polar',
+                            itemStyle: {
+                                normal: {
+                                    color: '#00f'
+                                }
+                            },
+                            barWidth: '50%'
+                        }]
+                    });
+
+                    chart.on('click', function (params) {
+                        console.log(params);
+                    });
+                }
+
+                document.getElementById('btn-update').addEventListener('click', function () {
+                    for (var i = 0; i < 2; ++i) {
+                        charts[i].setOption({
+                            series: [{
+                                data: [1, 2, 4, 3, 6, 5, 7]
+                            }]
+                        });
+                    }
+                });
+            });
+        </script>
+    </body>
+</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 28341e7bd1..fd4327a6f5 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -21,6 +21,7 @@
   "bar-label-rotation": 2,
   "bar-large": 2,
   "bar-overflow-time-plot": 3,
+  "bar-polar-clockwise": 1,
   "bar-polar-multi-series": 1,
   "bar-polar-multi-series-radial": 1,
   "bar-polar-null-data-radial": 1,
diff --git a/test/runTest/actions/bar-polar-clockwise.json b/test/runTest/actions/bar-polar-clockwise.json
new file mode 100644
index 0000000000..9dbcc44e11
--- /dev/null
+++ b/test/runTest/actions/bar-polar-clockwise.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousedown","time":1234,"x":34,"y":125},{"type":"mouseup","time":1393,"x":34,"y":125},{"time":1394,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1631523020115}]
\ No newline at end of file
