From 7aa73b2ab6462c9a18c36ebfe8e2f8e5bc5c01ce Mon Sep 17 00:00:00 2001
From: Dai Xuezhou <daidr@daidr.me>
Date: Tue, 29 Jul 2025 17:43:49 +0800
Subject: [PATCH 1/2] feat(radar): add clockwise options support

Support to control the direction of radar chart through `clockwise` field, which is anti-clockwise by default.
---
 src/coord/radar/Radar.ts      | 5 ++++-
 src/coord/radar/RadarModel.ts | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/coord/radar/Radar.ts b/src/coord/radar/Radar.ts
index 6ce88ec75f..c0fb4df295 100644
--- a/src/coord/radar/Radar.ts
+++ b/src/coord/radar/Radar.ts
@@ -126,6 +126,7 @@ class Radar implements CoordinateSystem, CoordinateSystemMaster {
         const refContainer = createBoxLayoutReference(radarModel, api).refContainer;
 
         const center = radarModel.get('center');
+        const clockwise = radarModel.get('clockwise') || false;
         const viewSize = Math.min(refContainer.width, refContainer.height) / 2;
         this.cx = numberUtil.parsePercent(center[0], refContainer.width) + refContainer.x;
         this.cy = numberUtil.parsePercent(center[1], refContainer.height) + refContainer.y;
@@ -140,9 +141,11 @@ class Radar implements CoordinateSystem, CoordinateSystemMaster {
         this.r0 = numberUtil.parsePercent(radius[0], viewSize);
         this.r = numberUtil.parsePercent(radius[1], viewSize);
 
+        const sign = clockwise ? -1 : 1;
+
         each(this._indicatorAxes, function (indicatorAxis, idx) {
             indicatorAxis.setExtent(this.r0, this.r);
-            let angle = (this.startAngle + idx * Math.PI * 2 / this._indicatorAxes.length);
+            let angle = (this.startAngle + sign * idx * Math.PI * 2 / this._indicatorAxes.length);
             // Normalize to [-PI, PI]
             angle = Math.atan2(Math.sin(angle), Math.cos(angle));
             indicatorAxis.angle = angle;
diff --git a/src/coord/radar/RadarModel.ts b/src/coord/radar/RadarModel.ts
index 4723a34541..fafed8b598 100644
--- a/src/coord/radar/RadarModel.ts
+++ b/src/coord/radar/RadarModel.ts
@@ -60,6 +60,8 @@ export interface RadarOption extends ComponentOption, CircleLayoutOptionMixin {
 
     startAngle?: number
 
+    clockwise?: boolean
+
     shape?: 'polygon' | 'circle'
 
     // TODO. axisType seems to have issue.
@@ -106,6 +108,7 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
     optionUpdated() {
         const boundaryGap = this.get('boundaryGap');
         const splitNumber = this.get('splitNumber');
+        const clockwise = this.get('clockwise');
         const scale = this.get('scale');
         const axisLine = this.get('axisLine');
         const axisTick = this.get('axisTick');
@@ -135,6 +138,7 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
             const innerIndicatorOpt: InnerIndicatorAxisOption = zrUtil.merge(zrUtil.clone(indicatorOpt), {
                 boundaryGap: boundaryGap,
                 splitNumber: splitNumber,
+                clockwise: clockwise,
                 scale: scale,
                 axisLine: axisLine,
                 axisTick: axisTick,
@@ -187,6 +191,8 @@ class RadarModel extends ComponentModel<RadarOption> implements CoordinateSystem
 
         startAngle: 90,
 
+        clockwise: false,
+
         axisName: {
             show: true,
             color: tokens.color.axisLabel

From f27e1e39e45400d0b6be4ab2150e7d10d19f3874 Mon Sep 17 00:00:00 2001
From: Dai Xuezhou <daidr@daidr.me>
Date: Tue, 29 Jul 2025 19:18:09 +0800
Subject: [PATCH 2/2] test(radar): add radar chart direction test case

---
 test/radar-clockwise-interactive.html | 330 ++++++++++++++++++++++++++
 test/radar-clockwise.html             | 124 ++++++++++
 2 files changed, 454 insertions(+)
 create mode 100644 test/radar-clockwise-interactive.html
 create mode 100644 test/radar-clockwise.html

diff --git a/test/radar-clockwise-interactive.html b/test/radar-clockwise-interactive.html
new file mode 100644
index 0000000000..eed01d2d63
--- /dev/null
+++ b/test/radar-clockwise-interactive.html
@@ -0,0 +1,330 @@
+<!--
+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>
+</head>
+
+<body>
+    <style>
+        html,
+        body,
+        #main {
+            width: 100%;
+            height: 100%;
+        }
+
+        #switchBtn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+        }
+
+        #startAngle {
+            position: fixed;
+            top: 60px;
+            left: 20px;
+        }
+
+        #startAngleLabel {
+            position: fixed;
+            top: 40px;
+            left: 20px;
+        }
+    </style>
+    <div id="main"></div>
+    <button id="switchBtn">Switch to clockwise</button>
+    <input id="startAngle" type="range" min="0" max="360" value="90" />
+    <label for="startAngle" id="startAngleLabel">Start Angle: 90</label>
+    <script>
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            var currentDirection = 'anti-clockwise';
+            var startAngle = 90;
+            var switchBtn = document.getElementById('switchBtn');
+            var startAngleInput = document.getElementById('startAngle');
+            var startAngleLabel = document.getElementById('startAngleLabel');
+
+            var chart = echarts.init(document.getElementById('main'));
+
+            chart.setOption({
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    x: 'left',
+                    data: ['图一', '图二', '图三']
+                },
+                radar: [
+                    {
+                        id: 'radar1',
+                        indicator: [
+                            { text: '指标一' },
+                            { text: '指标二' },
+                            { text: '指标三' },
+                            { text: '指标四' },
+                            { text: '指标五' }
+                        ],
+                        center: ['25%', 210],
+                        radius: 150,
+                        startAngle: 90,
+                        splitNumber: 8,
+                        name: {
+                            formatter: '【{value}】',
+                            textStyle: { color: 'red' }
+                        },
+                        scale: true
+                    },
+                    {
+                        id: 'radar2',
+                        indicator: [
+                            {
+                                text: '语文', max: 150, nameTextStyle: {
+                                    color: '#000000', fontSize: 5
+                                }
+                            },
+                            {
+                                text: '数学', max: 150, axisLine: {
+                                    lineStyle: {
+                                        color: 'red'
+                                    }
+                                }
+                            },
+                            {
+                                text: '英语', max: 150, axisLine: {
+                                    lineStyle: {
+                                        color: 'red'
+                                    }
+                                }
+                            },
+                            {
+                                text: '物理', max: 120, axisLine: {
+                                    lineStyle: {
+                                        color: 'red'
+                                    }
+                                }
+                            },
+                            {
+                                text: '化学', max: 108, axisLine: {
+                                    lineStyle: {
+                                        color: 'red'
+                                    }
+                                }
+                            },
+                            {
+                                text: '生物', max: 72, axisLine: {
+                                    lineStyle: {
+                                        color: 'red'
+                                    }
+                                }
+                            }
+                        ],
+                        center: ['75%', 210],
+                        radius: 150
+                    },
+                    {
+                        id: 'radar3',
+                        indicator: [{
+                            name: 'a',
+                            max: 13
+                        },
+                        {
+                            name: 'b',
+                            max: 1,
+                            min: 0
+                        },
+                        {
+                            name: 'c',
+                            max: 16000
+                        },
+                        {
+                            name: 'd',
+                            max: 30000
+                        },
+                        {
+                            name: 'e',
+                            max: 38000
+                        },
+                        {
+                            name: 'f',
+                            max: 52000
+                        },
+                        {
+                            name: 'g',
+                            max: 25000
+                        }],
+                        radius: 150
+                    }
+                ],
+                series: [
+                    {
+                        name: '雷达图',
+                        type: 'radar',
+                        itemStyle: {
+                            emphasis: {
+                                // color: 各异,
+                                lineStyle: {
+                                    width: 4
+                                }
+                            }
+                        },
+                        data: [
+                            {
+                                value: [100, 8, 0.40, -80, 2000],
+                                name: '图一',
+                                symbol: 'diamond',
+                                symbolSize: 20,
+                                itemStyle: {
+                                    normal: {
+                                        lineStyle: {
+                                            type: 'dashed'
+                                        }
+                                    }
+                                }
+                            },
+                            {
+                                value: [10, 3, 0.20, -100, 1000],
+                                name: '图二',
+                                itemStyle: {
+                                    normal: {
+                                        areaStyle: {
+                                            type: 'default'
+                                        }
+                                    }
+                                }
+                            },
+                            {
+                                value: [20, 3, 0.3, -13.5, 3000],
+                                name: '图三',
+                                symbol: 'none',         // 拐点图形类型，非标准参数
+                                itemStyle: {
+                                    normal: {
+                                        lineStyle: {
+                                            type: 'dotted'
+                                        }
+                                    }
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: '成绩单',
+                        type: 'radar',
+                        polarIndex: 1,
+                        itemStyle: {
+                            normal: {
+                                areaStyle: {
+                                    type: 'default'
+                                }
+                            }
+                        },
+                        data: [
+                            {
+                                value: [120, 118, 130, 100, 99, 70],
+                                name: '张三',
+                                itemStyle: {
+                                    normal: {
+                                        label: {
+                                            show: true,
+                                            formatter: function (params) {
+                                                return params.value;
+                                            }
+                                        }
+                                    }
+                                }
+                            },
+                            {
+                                value: [90, 113, 140, 30, 70, 60],
+                                name: '李四',
+                                itemStyle: {
+                                    normal: {
+                                        lineStyle: {
+                                            type: 'dashed'
+                                        }
+                                    }
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: 'join',
+                        polarIndex: 2,
+                        type: 'radar',
+                        data: [{
+                            value: [
+                                3,
+                                1,
+                                1,
+                                53,
+                                66,
+                                18,
+                                0.0121
+                            ]
+                        }]
+                    }
+                ]
+            });
+
+            switchBtn.addEventListener('click', function () {
+                switchBtn.textContent = 'Switch to ' + currentDirection;
+                currentDirection = currentDirection === 'clockwise' ? 'anti-clockwise' : 'clockwise';
+                chart.setOption({
+                    radar: [{
+                        id: 'radar1',
+                        clockwise: currentDirection === 'clockwise'
+                    }, {
+                        id: 'radar2',
+                        clockwise: currentDirection === 'clockwise'
+                    }, {
+                        id: 'radar3',
+                        clockwise: currentDirection === 'clockwise'
+                    }]
+                });
+            });
+
+            startAngleInput.addEventListener('input', function () {
+                startAngle = parseInt(startAngleInput.value);
+                startAngleLabel.textContent = 'Start Angle: ' + startAngle;
+                chart.setOption({
+                    radar: [{
+                        id: 'radar1',
+                        startAngle: startAngle
+                    }, {
+                        id: 'radar2',
+                        startAngle: startAngle
+                    }, {
+                        id: 'radar3',
+                        startAngle: startAngle
+                    }]
+                }, {
+                    slient: true
+                });
+            });
+        });
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test/radar-clockwise.html b/test/radar-clockwise.html
new file mode 100644
index 0000000000..c2e18ba523
--- /dev/null
+++ b/test/radar-clockwise.html
@@ -0,0 +1,124 @@
+<!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>
+    <div id="main1"></div>
+    <script>
+        require(['echarts'], function (echarts) {
+            var option, radarComponent;
+
+            radarComponent = {
+                name: {
+                    textStyle: {
+                        color: '#fff',
+                        backgroundColor: '#999',
+                        borderRadius: 3,
+                        padding: [3, 5]
+                    }
+                },
+                indicator: [
+                    { name: '销售（sales）' },
+                    { name: '管理（Administration）' },
+                    { name: '信息技术（Information Techology）' },
+                    { name: '客服（Customer Support）' },
+                    { name: '研发（Development）' },
+                    { name: '市场（Marketing）' }
+                ],
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: 'red'
+                    }
+                },
+            }
+
+            option = {
+                title: {
+                    text: '基础雷达图'
+                },
+                tooltip: {},
+                legend: {
+                    data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
+                },
+                radar: radarComponent,
+                series: [{
+                    name: '预算 vs 开销（Budget vs spending）',
+                    type: 'radar',
+                    // areaStyle: {normal: {}},
+                    data: [
+                        {
+                            value: [4300, 10000, 28000, 35000, 50000, 19000],
+                            name: '预算分配（Allocated Budget）'
+                        },
+                        {
+                            value: [5000, 14000, 28000, 31000, 42000, 21000],
+                            name: '实际开销（Actual Spending）'
+                        }
+                    ]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Leave the `clockwise` option empty',
+                    'The direction of radar chart is anti-clockwise by default.'
+                ],
+                option: option
+            });
+
+            var chart2 = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Set `clockwise` to true',
+                    'The indicator axes of radar chart should be rendered clockwise.'
+                ],
+                option: {
+                    ...option,
+                    radar: {
+                        ...radarComponent,
+                        clockwise: true
+                    }
+                }
+            });
+        });
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file