From d6892f2c670170e2dc4af313ab06583a1feb6b99 Mon Sep 17 00:00:00 2001
From: jesco-absolut <team@srswti.com>
Date: Fri, 3 Jul 2026 22:27:10 -0400
Subject: [PATCH] fix(radar): respect axisName width and overflow. close #14449

---
 src/component/axis/AxisBuilder.ts |  6 +++--
 test/radar-axis.html              | 40 +++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index 9e5151711b..7714b85c38 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -908,6 +908,8 @@ const builders: Record<AxisBuilderAxisPartName, AxisElementsBuilder> = {
         const maxWidth = retrieve(
             cfg.raw.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth
         );
+        const textOverflow = retrieve2(textStyleModel.get('overflow'), 'truncate');
+        const textWidth = retrieve2(textStyleModel.get('width'), maxWidth) as number;
 
         const nameMarginLevel = extraParams.nameMarginLevel || 0;
 
@@ -919,8 +921,8 @@ const builders: Record<AxisBuilderAxisPartName, AxisElementsBuilder> = {
             style: createTextStyle(textStyleModel, {
                 text: name,
                 font: textFont,
-                overflow: 'truncate',
-                width: maxWidth,
+                overflow: textOverflow,
+                width: textWidth,
                 ellipsis,
                 fill: textStyleModel.getTextColor()
                     || axisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
diff --git a/test/radar-axis.html b/test/radar-axis.html
index 842cd424db..d993da831b 100644
--- a/test/radar-axis.html
+++ b/test/radar-axis.html
@@ -40,6 +40,9 @@
         <div id="main0"></div>
 
 
+        <div id="main1"></div>
+
+
         <script>
         require(['echarts'], function (echarts) {
             var option;
@@ -108,6 +111,43 @@
         </script>
 
 
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                radar: {
+                    radius: 100,
+                    axisName: {
+                        width: 50,
+                        overflow: 'break',
+                        color: '#333'
+                    },
+                    indicator: [
+                        { name: 'Very long radar indicator label', max: 100 },
+                        { name: 'Second very long radar indicator label', max: 100 },
+                        { name: 'Third very long radar indicator label', max: 100 }
+                    ]
+                },
+                series: [{
+                    type: 'radar',
+                    data: [{
+                        value: [50, 60, 70]
+                    }]
+                }]
+            };
+
+            testHelper.create(echarts, 'main1', {
+                title: [
+                    'Radar axisName width and overflow',
+                    'Long radar indicator names should wrap within 50px'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
     </body>
 </html>