From 550a87098633e8193c465c362562145bea66a3dd Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Sat, 8 Oct 2022 17:12:34 +0800
Subject: [PATCH] feat(axis): allow getting tickLabel and tickIndex in the
 formatter of axis tooltip.

---
 src/component/axis/AxisBuilder.ts |  6 +++++-
 test/axisLabel.html               | 27 ++++++++++++++++++---------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index c39d94f16e..e28e9ed618 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -813,7 +813,11 @@ function buildAxisLabel(
         graphic.setTooltipConfig({
             el: textEl,
             componentModel: axisModel,
-            itemName: formattedLabel
+            itemName: formattedLabel,
+            formatterParamsExtra: {
+                getTickLabel: () => textEl,
+                tickIndex: index
+            }
         });
 
         // Pack data for mouse event
diff --git a/test/axisLabel.html b/test/axisLabel.html
index ec4832e670..08d4fc446c 100644
--- a/test/axisLabel.html
+++ b/test/axisLabel.html
@@ -380,25 +380,31 @@
             require([
                 'echarts'
             ], function (echarts) {
-                var chart = echarts.init(document.getElementById('main5'));
                 var option = {
                     backgroundColor: '#eee',
-                    title: {
-                        text: 'Should show tooltip for axis label'
-                    },
                     tooltip: {},
                     xAxis: {
                         type: 'category',
-                        data: ['Monday', 'Tuesday', 'Wednesday', 'Thurstay', 'Friday', 'Saturday', 'Sunday'],
+                        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                         axisLabel: {
-                            width: 20,
-                            overflow: 'truncate'
+                            width: 60,
+                            overflow: 'truncate',
+                            interval: 0
                         },
                         // triggerEvent: true,
                         tooltip: {
                             show: true,
                             position: 'top',
-                            trigger: 'item'
+                            trigger: 'item',
+                            formatter(p) {
+                                const labelEl = p.getTickLabel().childrenRef()[0];
+                                if (labelEl.style.text !== p.name) {
+                                    return p.name;
+                                }
+                                if (p.tickIndex > 3) {
+                                    return `Oh, it is happy ${p.name}! 😀`;
+                                }
+                            }
                         }
                     },
                     yAxis: {
@@ -421,7 +427,10 @@
                         }
                     ]
                 };
-                chart.setOption(option);
+                var chart = testHelper.create(echarts, 'main5', {
+                    title: 'Should show tooltip for axis label',
+                    option: option
+                });
             });
 
         </script>