From cece9deb234ac179095ead3bacbcc93638d43c5d Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 13 Nov 2025 18:05:11 +0800
Subject: [PATCH 1/7] feat: add labelHoverOnAxis for axis component

---
 .../examples/axis-hoverOn-label-bottom.ts     | 179 +++++++++++++++
 .../examples/axis-hoverOn-label-left.ts       | 178 +++++++++++++++
 .../__tests__/browser/index.html              |   2 +-
 .../__tests__/browser/main.ts                 |   8 +
 .../vrender-components/src/axis/constant.ts   |   1 +
 packages/vrender-components/src/axis/line.ts  | 210 ++++++++++++++++--
 packages/vrender-components/src/axis/type.ts  |  39 ++++
 7 files changed, 602 insertions(+), 15 deletions(-)
 create mode 100644 packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
 create mode 100644 packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts

diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
new file mode 100644
index 000000000..339d9e5b9
--- /dev/null
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
@@ -0,0 +1,179 @@
+import { LinearScale, PointScale } from '@visactor/vscale';
+import '@visactor/vrender';
+import { GroupFadeIn, GroupFadeOut } from '@visactor/vrender';
+import { LineAxis, GroupTransition } from '../../../src';
+import render from '../../util/render';
+
+const axis = new LineAxis({
+  orient: 'bottom',
+  title: {
+    // space: 0,
+    // padding: 0,
+    // textStyle: {
+    //   fontSize: 12,
+    //   fill: '#363839',
+    //   fontWeight: 'normal',
+    //   fillOpacity: 1,
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom'
+    // },
+    visible: true,
+    autoRotate: true,
+    // angle: 1,
+    // shape: {},
+    // background: {
+    //   visible: true,
+    //   style: {
+    //     fill: 'red'
+    //   }
+    // },
+    // state: {
+    //   text: null,
+    //   shape: null,
+    //   background: null
+    // },
+    text: '细分'
+    // maxWidth: null
+  },
+  label: {
+    visible: true,
+    inside: false,
+    space: 10,
+    padding: 0,
+    style: {
+      fontSize: 12,
+      fill: '#6F6F6F',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      angle: 0,
+      textAlign: 'center'
+    },
+    formatMethod: null,
+    state: null,
+    autoRotate: false,
+    autoHide: false,
+    autoLimit: false,
+    containerAlign: 'center'
+  },
+  labelHoverOnAxis: {
+    autoRotate: true,
+    position: 10,
+    space: 0,
+    padding: 2,
+    textStyle: {
+      fontSize: 12,
+      fill: '#363839',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      textAlign: 'center',
+      textBaseline: 'top'
+    },
+    visible: true,
+    background: {
+      visible: true,
+      style: {
+        fill: 'red'
+      }
+    },
+    text: '细分 rewqutiREWITrewt范德萨发',
+    maxWidth: 100
+  },
+  // tick: {
+  //   visible: true,
+  //   inside: false,
+  //   alignWithLabel: true,
+  //   length: 2,
+  //   style: {
+  //     lineWidth: 1,
+  //     stroke: '#D9DDE4',
+  //     strokeOpacity: 1
+  //   },
+  //   state: null
+  // },
+  // subTick: {
+  //   visible: true,
+  //   inside: false,
+  //   count: 4,
+  //   length: 2,
+  //   style: {
+  //     lineWidth: 10,
+  //     stroke: '#D9DDE4',
+  //     strokeOpacity: 1
+  //   },
+  //   state: null
+  // },
+  line: {
+    visible: true,
+    style: {
+      lineWidth: 1,
+      stroke: '#989999',
+      strokeOpacity: 1
+    },
+    startSymbol: {},
+    endSymbol: {}
+  },
+  x: 0,
+  y: 0,
+  // start: {
+  //   x: 0,
+  //   y: 0
+  // },
+  // end: {
+  //   x: 0,
+  //   y: 427
+  // },
+  start: { x: 0, y: 200 },
+  end: { x: 500, y: 200 },
+  items: [
+    [
+      {
+        id: '消费者',
+        label: '消费者',
+        value: 0.8333333333333334,
+        rawValue: '消费者'
+      },
+      {
+        id: '公司',
+        label: '公司',
+        value: 0.4999999999999999,
+        rawValue: '公司'
+      },
+      {
+        id: '小型企业',
+        label: '小型企业',
+        value: 0.1666666666666666,
+        rawValue: '小型企业'
+      }
+    ]
+  ],
+  visible: true,
+  pickable: true,
+  hover: true,
+  select: true,
+  panel: {
+    visible: true,
+    state: {
+      // hover: {
+      //   fillOpacity: 0.08,
+      //   fill: 'red'
+      // },
+      selected: {
+        fillOpacity: 0.08,
+        fill: 'blue'
+      },
+      selected_reverse: {
+        fillOpacity: 0.08,
+        fill: 'red'
+      }
+      // hover_reverse: {
+      //   fillOpacity: 0.08,
+      //   fill: '#141414'
+      // }
+    }
+  },
+  verticalFactor: 1,
+  horizontalLimitSize: 150,
+  horizontalMinSize: 150
+});
+window.axis = axis;
+render([axis], 'main');
diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
new file mode 100644
index 000000000..e6222d82a
--- /dev/null
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
@@ -0,0 +1,178 @@
+import { LinearScale, PointScale } from '@visactor/vscale';
+import '@visactor/vrender';
+import { GroupFadeIn, GroupFadeOut } from '@visactor/vrender';
+import { LineAxis, GroupTransition } from '../../../src';
+import render from '../../util/render';
+
+const axis = new LineAxis({
+  title: {
+    space: -30,
+    padding: 0,
+    textStyle: {
+      fontSize: 12,
+      fill: '#363839',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      textAlign: 'center',
+      textBaseline: 'bottom'
+    },
+    visible: true,
+    autoRotate: false,
+    // angle: 1.7,
+    shape: {},
+    background: {
+      visible: true,
+      style: {
+        fill: 'red'
+      }
+    },
+    state: {
+      text: null,
+      shape: null,
+      background: null
+    },
+    text: '细分',
+    maxWidth: null
+  },
+  label: {
+    visible: true,
+    inside: false,
+    space: 0,
+    padding: 0,
+    style: {
+      fontSize: 12,
+      fill: '#6F6F6F',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      angle: 0,
+      textAlign: 'center'
+    },
+    formatMethod: null,
+    state: null,
+    autoRotate: false,
+    autoHide: false,
+    autoLimit: false,
+    containerAlign: 'center'
+  },
+  labelHoverOnAxis: {
+    visible: true,
+    position: 50,
+    autoRotate: false,
+    space: 10,
+    padding: 2,
+    textStyle: {
+      fontSize: 12,
+      fill: '#363839',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      textAlign: 'right',
+      textBaseline: 'middle'
+    },
+    background: {
+      visible: true,
+      style: {
+        fill: 'red'
+      }
+    },
+    text: '细分'
+    // maxWidth: 100
+  },
+  tick: {
+    visible: true,
+    inside: false,
+    alignWithLabel: true,
+    length: 2,
+    style: {
+      lineWidth: 1,
+      stroke: '#D9DDE4',
+      strokeOpacity: 1
+    },
+    state: null
+  },
+  subTick: {
+    visible: true,
+    inside: false,
+    count: 4,
+    length: 2,
+    style: {
+      lineWidth: 10,
+      stroke: '#D9DDE4',
+      strokeOpacity: 1
+    },
+    state: null
+  },
+  line: {
+    visible: true,
+    style: {
+      lineWidth: 1,
+      stroke: '#989999',
+      strokeOpacity: 1
+    },
+    startSymbol: {},
+    endSymbol: {}
+  },
+  x: 140,
+  y: 0,
+  start: {
+    x: 0,
+    y: 0
+  },
+  end: {
+    x: 0,
+    y: 427
+  },
+  items: [
+    [
+      {
+        id: '消费者',
+        label: '消费者',
+        value: 0.8333333333333334,
+        rawValue: '消费者'
+      },
+      {
+        id: '公司',
+        label: '公司',
+        value: 0.4999999999999999,
+        rawValue: '公司'
+      },
+      {
+        id: '小型企业',
+        label: '小型企业',
+        value: 0.1666666666666666,
+        rawValue: '小型企业'
+      }
+    ]
+  ],
+  visible: true,
+  pickable: true,
+  orient: 'left',
+  hover: true,
+  select: true,
+  panel: {
+    visible: true,
+    state: {
+      // hover: {
+      //   fillOpacity: 0.08,
+      //   fill: 'red'
+      // },
+      selected: {
+        fillOpacity: 0.08,
+        fill: 'blue'
+      },
+      selected_reverse: {
+        fillOpacity: 0.08,
+        fill: 'red'
+      }
+      // hover_reverse: {
+      //   fillOpacity: 0.08,
+      //   fill: '#141414'
+      // }
+    }
+  },
+  verticalFactor: 1,
+  verticalLimitSize: 150,
+  verticalMinSize: 150
+});
+window.axis = axis;
+// axis.showLabelHoverOnAxis(130);
+render([axis], 'main');
diff --git a/packages/vrender-components/__tests__/browser/index.html b/packages/vrender-components/__tests__/browser/index.html
index 96e24d285..f5585af3b 100644
--- a/packages/vrender-components/__tests__/browser/index.html
+++ b/packages/vrender-components/__tests__/browser/index.html
@@ -8,7 +8,7 @@
   <title>Vite App</title>
   <style>
     #container {
-      padding: 20px 0 30px;
+      /* padding: 20px 0 30px; */
     }
 
     canvas#main {
diff --git a/packages/vrender-components/__tests__/browser/main.ts b/packages/vrender-components/__tests__/browser/main.ts
index 545648b86..38c82fdb8 100644
--- a/packages/vrender-components/__tests__/browser/main.ts
+++ b/packages/vrender-components/__tests__/browser/main.ts
@@ -34,6 +34,14 @@ const specs = [
     path: 'axis-interaction',
     name: '轴交互'
   },
+  {
+    path: 'axis-hoverOn-label-bottom',
+    name: '轴hoverOn-bottom'
+  },
+  {
+    path: 'axis-hoverOn-label-left',
+    name: '轴hoverOn-left'
+  },
   {
     path: 'cartesian-axis-label-align',
     name: '轴标签整体对齐'
diff --git a/packages/vrender-components/src/axis/constant.ts b/packages/vrender-components/src/axis/constant.ts
index 264fc9dc6..ea2b10120 100644
--- a/packages/vrender-components/src/axis/constant.ts
+++ b/packages/vrender-components/src/axis/constant.ts
@@ -7,6 +7,7 @@ export enum AXIS_ELEMENT_NAME {
   subTick = 'axis-sub-tick',
   label = 'axis-label',
   title = 'axis-title',
+  labelHoverOnAxis = 'axis-label-hover-on-axis',
   gridContainer = 'axis-grid-container',
   grid = 'axis-grid',
   gridRegion = 'axis-grid-region',
diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index 9f85ccbf9..ce907ad59 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -15,15 +15,33 @@ import {
   mixin,
   last as peek
 } from '@visactor/vutils';
-import { diff, graphicCreator } from '@visactor/vrender-core';
+import { graphicCreator } from '@visactor/vrender-core';
 // eslint-disable-next-line no-duplicate-imports
-import type { TextAlignType, IGroup, INode, IText, TextBaselineType, IGraphic } from '@visactor/vrender-core';
+import type {
+  TextAlignType,
+  IGroup,
+  INode,
+  IText,
+  TextBaselineType,
+  IGraphic,
+  ITextAttribute,
+  IRectGraphicAttribute,
+  IFillType,
+  IGraphicAttribute
+} from '@visactor/vrender-core';
 import type { SegmentAttributes } from '../segment';
 // eslint-disable-next-line no-duplicate-imports
 import { Segment } from '../segment';
 import { angleTo } from '../util/matrix';
-import type { TagAttributes } from '../tag';
-import type { LineAttributes, LineAxisAttributes, TitleAttributes, AxisItem, TransformedAxisBreak } from './type';
+import { Tag, type TagAttributes } from '../tag';
+import type {
+  LineAttributes,
+  LineAxisAttributes,
+  TitleAttributes,
+  AxisItem,
+  TransformedAxisBreak,
+  LabelHoverOnAxisAttributes
+} from './type';
 import { AxisBase } from './base';
 import { DEFAULT_AXIS_THEME } from './config';
 import { AXIS_ELEMENT_NAME, DEFAULT_STATES, TopZIndex } from './constant';
@@ -46,13 +64,12 @@ export interface LineAxis
 
 export class LineAxis extends AxisBase<LineAxisAttributes> {
   static defaultAttributes = DEFAULT_AXIS_THEME;
-
+  private _breaks: TransformedAxisBreak[];
+  private labelHoverOnAxisGroup: IGroup | null = null;
   constructor(attributes: LineAxisAttributes, options?: ComponentOptions) {
     super(options?.skipDefault ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
   }
 
-  private _breaks: TransformedAxisBreak[];
-
   protected _renderInner(container: IGroup) {
     this._breaks = null; // 置空，防止轴更新时缓存了旧值
     if (this.attribute.breaks && this.attribute.breaks.length) {
@@ -126,6 +143,20 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
       bgRect.states = merge({}, DEFAULT_STATES, panel.state ?? {});
       axisContainer.insertBefore(bgRect, axisContainer.firstChild);
     }
+    const { labelHoverOnAxis } = this.attribute;
+    if (labelHoverOnAxis && labelHoverOnAxis.visible) {
+      this.renderLabelHoverOnAxis();
+    }
+  }
+  protected renderLabelHoverOnAxis() {
+    const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute();
+    const hoverOnLabel = new Tag({
+      ...hoverOnLabelAttributes
+    });
+    hoverOnLabel.name = AXIS_ELEMENT_NAME.title;
+    hoverOnLabel.id = this._getNodeId('hover-on-label');
+    this.labelHoverOnAxisGroup = hoverOnLabel;
+    this.axisContainer.add(hoverOnLabel as unknown as INode);
   }
 
   protected renderLine(container: IGroup): void {
@@ -241,8 +272,8 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
                   ? Math.min(bounds.x2 - baseX, bounds.width())
                   : 0
                 : bounds.x1 < baseX
-                  ? Math.min(baseX - bounds.x1, bounds.width())
-                  : 0) +
+                ? Math.min(baseX - bounds.x1, bounds.width())
+                : 0) +
               (layerCount - 1) * space;
           } else {
             labelLength = 0;
@@ -362,6 +393,114 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     return attrs;
   }
 
+  protected getLabelHoverOnAxisAttribute() {
+    const { orient } = this.attribute;
+    const {
+      position = 0,
+      space = 4,
+      autoRotate = true,
+      textStyle = {},
+      background = {},
+      formatMethod,
+      text: textContent = '' as string,
+      ...restAttrs
+    } = this.attribute.labelHoverOnAxis as LabelHoverOnAxisAttributes;
+    const point = this.getTickCoord(0);
+    /** 指定的位置position与轴的方位有关系 */
+    if (orient === 'bottom' || orient === 'top') {
+      point.x = position;
+    } else {
+      point.y = position;
+    }
+
+    // HACK;
+
+    // 计算悬浮标签的偏移量（距离轴线的距离）
+    let tickLength = 0;
+    if (this.attribute.tick?.visible && this.attribute.tick.inside === false) {
+      tickLength = this.attribute.tick.length || 4;
+    }
+    if (this.attribute.subTick?.visible && this.attribute.subTick.inside === false) {
+      tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
+    }
+    const labelLength = 0;
+    const offset = tickLength + labelLength + space;
+    const labelPoint = this.getVerticalCoord(point, offset, false);
+    const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
+
+    let { angle } = restAttrs; // 用户设置的是角度
+    let textAlign = 'center';
+
+    let textBaseline;
+    if (isNil(angle) && autoRotate) {
+      const axisVector = this.getRelativeVector();
+      const v1: [number, number] = [1, 0]; // 水平方向的向量
+      const radian = angleTo(axisVector, v1, true);
+      angle = radian;
+      const { verticalFactor = 1 } = this.attribute;
+      const factor = -1 * verticalFactor;
+      if (factor === 1) {
+        textBaseline = 'bottom';
+      } else {
+        textBaseline = 'top';
+      }
+    } else {
+      textAlign = this.getTextAlign(vector as number[]);
+      textBaseline = this.getTextBaseline(vector as number[], false);
+    }
+
+    // 计算悬浮标签的缩略
+    let maxTagWidth = 100; // maxWidth;
+    if (isNil(maxTagWidth)) {
+      const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
+      const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
+      if (isValidNumber(limitSize)) {
+        const isX = orient === 'bottom' || orient === 'top';
+        if (isX) {
+          if (angle !== Math.PI / 2) {
+            const cosValue = Math.abs(Math.cos(angle ?? 0));
+            maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
+          } else {
+            maxTagWidth = limitSize - offset;
+          }
+        } else {
+          if (angle && angle !== 0) {
+            const sinValue = Math.abs(Math.sin(angle));
+            maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
+          } else {
+            maxTagWidth = limitSize - offset;
+          }
+        }
+      }
+    }
+    const text = formatMethod ? formatMethod(textContent as string) : (textContent as string);
+    const attrs: TagAttributes = {
+      ...labelPoint,
+      ...restAttrs,
+      maxWidth: maxTagWidth,
+      textStyle: {
+        // @ts-ignore
+        textAlign,
+        // @ts-ignore
+        textBaseline,
+
+        ...textStyle
+      },
+      text
+    };
+    attrs.angle = angle;
+
+    if (background && background.visible) {
+      attrs.panel = {
+        visible: true,
+        ...(restAttrs as any).panel,
+        ...background.style
+      };
+    }
+
+    return attrs;
+  }
+
   protected getTextBaseline(vector: number[], inside?: boolean): TextBaselineType {
     let base: TextBaselineType = 'middle';
     const { verticalFactor = 1 } = this.attribute;
@@ -552,8 +691,8 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
         const verticalLimitLength = isVertical
           ? axisLength / labelShapes.length
           : !autoHide && !autoRotate
-            ? axisLength / labelShapes.length
-            : Infinity;
+          ? axisLength / labelShapes.length
+          : Infinity;
 
         autoLimitFunc(labelShapes, {
           limitLength,
@@ -646,8 +785,8 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     let limitLength = limitSize;
     let titleHeight = 0;
     let titleSpacing = 0;
-    const axisLineWidth = line && line.visible ? (line.style.lineWidth ?? 1) : 0;
-    const tickLength = tick && tick.visible ? (tick.length ?? 4) : 0;
+    const axisLineWidth = line && line.visible ? line.style.lineWidth ?? 1 : 0;
+    const tickLength = tick && tick.visible ? tick.length ?? 4 : 0;
     if (title && title.visible && typeof title.text === 'string') {
       titleHeight = measureTextSize(title.text, title.textStyle, this.stage?.getTheme()?.text).height;
       const padding = normalizePadding(title.padding);
@@ -658,7 +797,50 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     }
     return limitLength;
   }
-
+  /** 显示交互中的悬浮标签 */
+  showLabelHoverOnAxis(position: number, text: string) {
+    if (this.attribute.labelHoverOnAxis) {
+      if (this.labelHoverOnAxisGroup) {
+        const { formatMethod } = this.attribute.labelHoverOnAxis as LabelHoverOnAxisAttributes;
+        const textStr = formatMethod ? formatMethod(text) : text;
+        this.labelHoverOnAxisGroup.setAttributes({
+          text: textStr,
+          visible: true
+        });
+        if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
+          this.labelHoverOnAxisGroup.setAttributes({
+            y: position
+          });
+        } else {
+          this.labelHoverOnAxisGroup.setAttributes({
+            x: position
+          });
+        }
+      } else {
+        this.attribute.labelHoverOnAxis.visible = true;
+        this.attribute.labelHoverOnAxis.position = position;
+        this.attribute.labelHoverOnAxis.text = text;
+        this.renderLabelHoverOnAxis();
+      }
+    }
+  }
+  /** 隐藏交互中的悬浮标签 */
+  hideLabelHoverOnAxis() {
+    if (this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup) {
+      this.labelHoverOnAxisGroup.setAttributes({
+        visible: false
+      });
+      if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
+        this.labelHoverOnAxisGroup.setAttributes({
+          y: -100000
+        });
+      } else {
+        this.labelHoverOnAxisGroup.setAttributes({
+          x: -100000
+        });
+      }
+    }
+  }
   release(): void {
     super.release();
     this._breaks = null;
diff --git a/packages/vrender-components/src/axis/type.ts b/packages/vrender-components/src/axis/type.ts
index 356ce5540..1861fc2e6 100644
--- a/packages/vrender-components/src/axis/type.ts
+++ b/packages/vrender-components/src/axis/type.ts
@@ -99,6 +99,10 @@ export interface AxisBaseAttributes extends IGroupGraphicAttribute {
    * 轴标签配置
    */
   label?: LabelAttributes;
+  /**
+   * 轴上悬浮label标签配置
+   */
+  labelHoverOnAxis?: LabelHoverOnAxisAttributes;
   /**
    * 轴刻度线配置
    */
@@ -534,6 +538,41 @@ export type LabelAttributes = Omit<AxisLabelOverlap, 'text'> &
     dataFilter?: (data: AxisItem[], layer: number) => AxisItem[];
   };
 
+export type LabelHoverOnAxisAttributes = Omit<TagAttributes, 'shape' | 'space' | 'panel' | 'state'> & {
+  /**
+   * 是否展示悬浮标签
+   */
+  visible?: boolean;
+  /** 标签同 tick 之间的间距 */
+  space?: number;
+  /**
+   * 悬浮标签的位置 ，与轴的方位有关系,如果是水平轴，则position代表x的位置，如果是垂直轴，则position代表y的位置
+   */
+  position?: number;
+  /**
+   * 是否自动旋转以和坐标轴平行
+   */
+  autoRotate?: boolean;
+  /**
+   * 背景设置
+   */
+  background?: {
+    /**
+     * 是否绘制背景层
+     */
+    visible?: boolean;
+    /**
+     * 背景层样式
+     */
+    style?: Omit<Partial<IRectGraphicAttribute>, 'visible' | 'width' | 'height'>;
+  };
+  /**
+   * 格式化文本回调
+   * @param value 文本原始值
+   * @returns 格式化文本
+   */
+  formatMethod?: (value: string) => string;
+};
 export type CoordinateType = 'cartesian' | 'polar' | 'geo' | 'none';
 export type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z';
 export type IPolarOrientType = 'radius' | 'angle';

From f66c7410073937bab90bfe116765eb5d40441611 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 13 Nov 2025 18:05:37 +0800
Subject: [PATCH 2/7] docs: update changlog of rush

---
 ...belHoverOnAxis_axisComponent_2025-11-13-10-05.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vrender-components/feat-add_labelHoverOnAxis_axisComponent_2025-11-13-10-05.json

diff --git a/common/changes/@visactor/vrender-components/feat-add_labelHoverOnAxis_axisComponent_2025-11-13-10-05.json b/common/changes/@visactor/vrender-components/feat-add_labelHoverOnAxis_axisComponent_2025-11-13-10-05.json
new file mode 100644
index 000000000..29991d63c
--- /dev/null
+++ b/common/changes/@visactor/vrender-components/feat-add_labelHoverOnAxis_axisComponent_2025-11-13-10-05.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add labelHoverOnAxis for axis component\n\n",
+      "type": "none",
+      "packageName": "@visactor/vrender-components"
+    }
+  ],
+  "packageName": "@visactor/vrender-components",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 5fb11f3a8a0200563c63b4c09b53cece3ec2ba9a Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 13 Nov 2025 18:14:13 +0800
Subject: [PATCH 3/7] feat: add labelHoverOnAxis for axis component

---
 packages/vrender-components/src/axis/line.ts | 23 +++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index ce907ad59..4be2b03bb 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -17,18 +17,7 @@ import {
 } from '@visactor/vutils';
 import { graphicCreator } from '@visactor/vrender-core';
 // eslint-disable-next-line no-duplicate-imports
-import type {
-  TextAlignType,
-  IGroup,
-  INode,
-  IText,
-  TextBaselineType,
-  IGraphic,
-  ITextAttribute,
-  IRectGraphicAttribute,
-  IFillType,
-  IGraphicAttribute
-} from '@visactor/vrender-core';
+import type { TextAlignType, IGroup, INode, IText, TextBaselineType } from '@visactor/vrender-core';
 import type { SegmentAttributes } from '../segment';
 // eslint-disable-next-line no-duplicate-imports
 import { Segment } from '../segment';
@@ -45,7 +34,7 @@ import type {
 import { AxisBase } from './base';
 import { DEFAULT_AXIS_THEME } from './config';
 import { AXIS_ELEMENT_NAME, DEFAULT_STATES, TopZIndex } from './constant';
-import { measureTextSize, traverseGroup } from '../util';
+import { measureTextSize } from '../util';
 import { autoHide as autoHideFunc } from './overlap/auto-hide';
 import { autoRotate as autoRotateFunc, getXAxisLabelAlign, getYAxisLabelAlign } from './overlap/auto-rotate';
 import { autoLimit as autoLimitFunc } from './overlap/auto-limit';
@@ -65,7 +54,7 @@ export interface LineAxis
 export class LineAxis extends AxisBase<LineAxisAttributes> {
   static defaultAttributes = DEFAULT_AXIS_THEME;
   private _breaks: TransformedAxisBreak[];
-  private labelHoverOnAxisGroup: IGroup | null = null;
+  private labelHoverOnAxisGroup: Tag | null = null;
   constructor(attributes: LineAxisAttributes, options?: ComponentOptions) {
     super(options?.skipDefault ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
   }
@@ -803,10 +792,8 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
       if (this.labelHoverOnAxisGroup) {
         const { formatMethod } = this.attribute.labelHoverOnAxis as LabelHoverOnAxisAttributes;
         const textStr = formatMethod ? formatMethod(text) : text;
-        this.labelHoverOnAxisGroup.setAttributes({
-          text: textStr,
-          visible: true
-        });
+        this.labelHoverOnAxisGroup.setAttribute('text', textStr);
+        this.labelHoverOnAxisGroup.setAttribute('visible', true);
         if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
           this.labelHoverOnAxisGroup.setAttributes({
             y: position

From 091ac375cfa963b66a184154f35319f04feb82a6 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 13 Nov 2025 19:46:30 +0800
Subject: [PATCH 4/7] feat: add labelHoverOnAxis for axis component

---
 packages/vrender-components/src/axis/line.ts | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index 4be2b03bb..8e0ef66f0 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -794,6 +794,7 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
         const textStr = formatMethod ? formatMethod(text) : text;
         this.labelHoverOnAxisGroup.setAttribute('text', textStr);
         this.labelHoverOnAxisGroup.setAttribute('visible', true);
+        this.labelHoverOnAxisGroup.setAttribute('visibleAll', true);
         if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
           this.labelHoverOnAxisGroup.setAttributes({
             y: position
@@ -815,17 +816,9 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
   hideLabelHoverOnAxis() {
     if (this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup) {
       this.labelHoverOnAxisGroup.setAttributes({
-        visible: false
+        visible: false,
+        visibleAll: false
       });
-      if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
-        this.labelHoverOnAxisGroup.setAttributes({
-          y: -100000
-        });
-      } else {
-        this.labelHoverOnAxisGroup.setAttributes({
-          x: -100000
-        });
-      }
     }
   }
   release(): void {

From fe5882293b1968f19398892f26fd4b649fa9e607 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 17 Nov 2025 16:25:41 +0800
Subject: [PATCH 5/7] feat: add default labelHoverOnAxis config

---
 .../examples/axis-hoverOn-label-bottom.ts     | 33 +++++++++--------
 .../examples/axis-hoverOn-label-left.ts       | 36 +++++++++----------
 .../browser/examples/axis-overlap.ts          |  5 +++
 .../vrender-components/src/axis/config.ts     | 19 ++++++++++
 packages/vrender-components/src/axis/line.ts  | 11 +++++-
 5 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
index 339d9e5b9..2e02dddbb 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
@@ -57,26 +57,25 @@ const axis = new LineAxis({
   },
   labelHoverOnAxis: {
     autoRotate: true,
-    position: 10,
-    space: 0,
-    padding: 2,
+    position: 130,
+    // space: 0,
+    // padding: 2,
     textStyle: {
-      fontSize: 12,
-      fill: '#363839',
-      fontWeight: 'normal',
-      fillOpacity: 1,
-      textAlign: 'center',
-      textBaseline: 'top'
+      //   fontSize: 12,
+      //   fill: '#363839',
+      //   fontWeight: 'normal',
+      //   fillOpacity: 1,
+      textAlign: 'center'
+      //   textBaseline: 'top'
     },
     visible: true,
-    background: {
-      visible: true,
-      style: {
-        fill: 'red'
-      }
-    },
-    text: '细分 rewqutiREWITrewt范德萨发',
-    maxWidth: 100
+    // background: {
+    //   visible: true,
+    //   style: {
+    //     fill: 'red'
+    //   }
+    // },
+    text: '细分细分细分细分细分细分'
   },
   // tick: {
   //   visible: true,
diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
index e6222d82a..1cbdb687c 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
@@ -56,24 +56,24 @@ const axis = new LineAxis({
   },
   labelHoverOnAxis: {
     visible: true,
-    position: 50,
-    autoRotate: false,
-    space: 10,
-    padding: 2,
-    textStyle: {
-      fontSize: 12,
-      fill: '#363839',
-      fontWeight: 'normal',
-      fillOpacity: 1,
-      textAlign: 'right',
-      textBaseline: 'middle'
-    },
-    background: {
-      visible: true,
-      style: {
-        fill: 'red'
-      }
-    },
+    // position: 50,
+    // autoRotate: false,
+    // space: 10,
+    // padding: 2,
+    // textStyle: {
+    //   fontSize: 12,
+    //   fill: '#363839',
+    //   fontWeight: 'normal',
+    //   fillOpacity: 1,
+    //   textAlign: 'right',
+    //   textBaseline: 'middle'
+    // },
+    // background: {
+    //   visible: true,
+    //   style: {
+    //     fill: 'red'
+    //   }
+    // },
     text: '细分'
     // maxWidth: 100
   },
diff --git a/packages/vrender-components/__tests__/browser/examples/axis-overlap.ts b/packages/vrender-components/__tests__/browser/examples/axis-overlap.ts
index cd01dc01d..e45c4240d 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-overlap.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-overlap.ts
@@ -57,6 +57,11 @@ const axisBottom = new LineAxis({
     //   angle: Math.PI * 0.5
     // }
   },
+  labelHoverOnAxis: {
+    visible: true,
+    position: 150,
+    text: 'BBBBBBBBBBBBBB'
+  },
   orient: 'bottom',
   verticalLimitSize: 100
 });
diff --git a/packages/vrender-components/src/axis/config.ts b/packages/vrender-components/src/axis/config.ts
index 4a170aae7..60c202ea1 100644
--- a/packages/vrender-components/src/axis/config.ts
+++ b/packages/vrender-components/src/axis/config.ts
@@ -21,6 +21,25 @@ export const DEFAULT_AXIS_THEME = {
       fillOpacity: 1
     }
   },
+  labelHoverOnAxis: {
+    visible: false,
+    space: 4,
+    position: 0,
+    autoRotate: false,
+    textStyle: {
+      fontSize: 12,
+      fill: 'white',
+      fontWeight: 'normal',
+      fillOpacity: 1
+    },
+    background: {
+      visible: true,
+      style: {
+        cornerRadius: 2,
+        fill: 'black'
+      }
+    }
+  },
   tick: {
     visible: true,
     inside: false,
diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index 8e0ef66f0..f896792d1 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -56,6 +56,14 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
   private _breaks: TransformedAxisBreak[];
   private labelHoverOnAxisGroup: Tag | null = null;
   constructor(attributes: LineAxisAttributes, options?: ComponentOptions) {
+    if (attributes.labelHoverOnAxis) {
+      attributes.labelHoverOnAxis.textStyle = Object.assign(
+        {},
+        attributes.label.style,
+        attributes.labelHoverOnAxis.textStyle
+      );
+      attributes.labelHoverOnAxis.space = attributes.labelHoverOnAxis.space ?? attributes.label.space;
+    }
     super(options?.skipDefault ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
   }
 
@@ -392,6 +400,7 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
       background = {},
       formatMethod,
       text: textContent = '' as string,
+      maxWidth,
       ...restAttrs
     } = this.attribute.labelHoverOnAxis as LabelHoverOnAxisAttributes;
     const point = this.getTickCoord(0);
@@ -439,7 +448,7 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     }
 
     // 计算悬浮标签的缩略
-    let maxTagWidth = 100; // maxWidth;
+    let maxTagWidth = maxWidth; // maxWidth;
     if (isNil(maxTagWidth)) {
       const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
       const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);

From f43c7a69a1ec667539f37ac9bfd4a8c9d7f14765 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 17 Nov 2025 19:46:53 +0800
Subject: [PATCH 6/7] feat: labelHoverOnAxis compute space value

---
 .../browser/examples/axis-hoverOn-label-bottom.ts        | 7 +++----
 packages/vrender-components/src/axis/config.ts           | 5 +++--
 packages/vrender-components/src/axis/line.ts             | 9 ++++++++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
index 2e02dddbb..ebcd00a19 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
@@ -38,8 +38,7 @@ const axis = new LineAxis({
   label: {
     visible: true,
     inside: false,
-    space: 10,
-    padding: 0,
+    space: 20,
     style: {
       fontSize: 12,
       fill: '#6F6F6F',
@@ -58,8 +57,8 @@ const axis = new LineAxis({
   labelHoverOnAxis: {
     autoRotate: true,
     position: 130,
-    // space: 0,
-    // padding: 2,
+    // space: 10,
+    padding: 6,
     textStyle: {
       //   fontSize: 12,
       //   fill: '#363839',
diff --git a/packages/vrender-components/src/axis/config.ts b/packages/vrender-components/src/axis/config.ts
index 60c202ea1..3a228a645 100644
--- a/packages/vrender-components/src/axis/config.ts
+++ b/packages/vrender-components/src/axis/config.ts
@@ -23,12 +23,13 @@ export const DEFAULT_AXIS_THEME = {
   },
   labelHoverOnAxis: {
     visible: false,
-    space: 4,
+    space: 7,
+    padding: 2,
     position: 0,
     autoRotate: false,
     textStyle: {
       fontSize: 12,
-      fill: 'white',
+      fill: 'red',
       fontWeight: 'normal',
       fillOpacity: 1
     },
diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index f896792d1..a304f7110 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -62,7 +62,13 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
         attributes.label.style,
         attributes.labelHoverOnAxis.textStyle
       );
-      attributes.labelHoverOnAxis.space = attributes.labelHoverOnAxis.space ?? attributes.label.space;
+      if (attributes.labelHoverOnAxis.space === undefined) {
+        const { padding = 2 } = attributes.labelHoverOnAxis;
+        const parsedPadding = normalizePadding(padding as any);
+        const topPadding = parsedPadding[0];
+        const space = (attributes.label.space ?? LineAxis.defaultAttributes.label.space) - topPadding;
+        attributes.labelHoverOnAxis.space = space;
+      }
     }
     super(options?.skipDefault ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
   }
@@ -153,6 +159,7 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     hoverOnLabel.name = AXIS_ELEMENT_NAME.title;
     hoverOnLabel.id = this._getNodeId('hover-on-label');
     this.labelHoverOnAxisGroup = hoverOnLabel;
+    // hoverOnLabel.setAttributes({ globalZIndex: 1 });
     this.axisContainer.add(hoverOnLabel as unknown as INode);
   }
 

From 14e264dad809ad55f8cde7ffbb95af9e1acd5a14 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 19 Nov 2025 17:39:26 +0800
Subject: [PATCH 7/7] refactor: hover on label position

---
 .../examples/axis-hoverOn-label-bottom.ts     |   7 +-
 .../examples/axis-hoverOn-label-left.ts       | 217 ++++++++----------
 packages/vrender-components/src/axis/line.ts  | 107 ++++++---
 3 files changed, 182 insertions(+), 149 deletions(-)

diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
index ebcd00a19..8c8bda13f 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-bottom.ts
@@ -56,7 +56,7 @@ const axis = new LineAxis({
   },
   labelHoverOnAxis: {
     autoRotate: true,
-    position: 130,
+    position: 185,
     // space: 10,
     padding: 6,
     textStyle: {
@@ -74,7 +74,7 @@ const axis = new LineAxis({
     //     fill: 'red'
     //   }
     // },
-    text: '细分细分细分细分细分细分'
+    text: ''
   },
   // tick: {
   //   visible: true,
@@ -174,4 +174,7 @@ const axis = new LineAxis({
   horizontalMinSize: 150
 });
 window.axis = axis;
+setTimeout(() => {
+  axis.showLabelHoverOnAxis(490, '细分细分细分细分细分打撒规细分');
+}, 100);
 render([axis], 'main');
diff --git a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
index 1cbdb687c..1b8733225 100644
--- a/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
+++ b/packages/vrender-components/__tests__/browser/examples/axis-hoverOn-label-left.ts
@@ -5,111 +5,109 @@ import { LineAxis, GroupTransition } from '../../../src';
 import render from '../../util/render';
 
 const axis = new LineAxis({
-  title: {
-    space: -30,
-    padding: 0,
-    textStyle: {
-      fontSize: 12,
-      fill: '#363839',
-      fontWeight: 'normal',
-      fillOpacity: 1,
-      textAlign: 'center',
-      textBaseline: 'bottom'
-    },
-    visible: true,
-    autoRotate: false,
-    // angle: 1.7,
-    shape: {},
-    background: {
-      visible: true,
-      style: {
-        fill: 'red'
-      }
-    },
-    state: {
-      text: null,
-      shape: null,
-      background: null
-    },
-    text: '细分',
-    maxWidth: null
+  orient: 'left',
+  hover: true,
+  line: {
+    visible: false,
+    style: {
+      lineWidth: 1,
+      stroke: '#D9DDE4',
+      strokeOpacity: 1
+    }
   },
   label: {
-    visible: true,
-    inside: false,
-    space: 0,
-    padding: 0,
     style: {
       fontSize: 12,
-      fill: '#6F6F6F',
-      fontWeight: 'normal',
+      fill: '#BCC1CB',
+      fontWeight: 400,
       fillOpacity: 1,
-      angle: 0,
-      textAlign: 'center'
+      maxLineWidth: 80,
+      angle: 0
     },
     formatMethod: null,
     state: null,
-    autoRotate: false,
-    autoHide: false,
-    autoLimit: false,
-    containerAlign: 'center'
-  },
-  labelHoverOnAxis: {
     visible: true,
-    // position: 50,
-    // autoRotate: false,
-    // space: 10,
-    // padding: 2,
-    // textStyle: {
-    //   fontSize: 12,
-    //   fill: '#363839',
-    //   fontWeight: 'normal',
-    //   fillOpacity: 1,
-    //   textAlign: 'right',
-    //   textBaseline: 'middle'
-    // },
-    // background: {
-    //   visible: true,
-    //   style: {
-    //     fill: 'red'
-    //   }
-    // },
-    text: '细分'
-    // maxWidth: 100
+    space: 0,
+    autoLimit: false,
+    flush: true,
+    containerAlign: 'right',
+    minGap: 1,
+    autoHide: false,
+    autoHideMethod: 'greedy',
+    autoHideSeparation: 1,
+    autoRotate: false,
+    autoRotateAngle: [0, -45, -90],
+    lastVisible: true
   },
   tick: {
-    visible: true,
+    visible: false,
+    length: 4,
     inside: false,
-    alignWithLabel: true,
-    length: 2,
     style: {
       lineWidth: 1,
-      stroke: '#D9DDE4',
+      stroke: '#21252C',
       strokeOpacity: 1
     },
     state: null
   },
   subTick: {
-    visible: true,
-    inside: false,
-    count: 4,
+    visible: false,
     length: 2,
     style: {
-      lineWidth: 10,
+      lineWidth: 1,
       stroke: '#D9DDE4',
       strokeOpacity: 1
     },
     state: null
   },
-  line: {
-    visible: true,
+  grid: {
+    type: 'line',
+    visible: false,
     style: {
       lineWidth: 1,
-      stroke: '#989999',
-      strokeOpacity: 1
+      stroke: '#E3E5EB',
+      strokeOpacity: 1,
+      lineDash: [4, 2]
+    }
+  },
+  subGrid: {
+    type: 'line',
+    visible: false,
+    style: {
+      lineWidth: 1,
+      stroke: '#EBEDF2',
+      strokeOpacity: 1,
+      lineDash: [4, 4]
+    }
+  },
+  title: {
+    visible: false,
+    space: 10,
+    autoRotate: false,
+    angle: -1.5707963267948966,
+    textStyle: {
+      textAlign: 'center',
+      textBaseline: 'bottom',
+      fontSize: 12,
+      fill: '#606773',
+      fontWeight: 400,
+      fillOpacity: 1
+    },
+    shape: {},
+    background: {},
+    state: {
+      text: null,
+      shape: null,
+      background: null
     },
-    startSymbol: {},
-    endSymbol: {}
+    text: 'order_date',
+    maxWidth: null
+  },
+  panel: {
+    state: null
+  },
+  labelHoverOnAxis: {
+    visible: true
   },
   x: 140,
   y: 0,
@@ -124,55 +122,38 @@ const axis = new LineAxis({
   items: [
     [
       {
-        id: '消费者',
-        label: '消费者',
-        value: 0.8333333333333334,
-        rawValue: '消费者'
+        id: '2016-01-01',
+        label: '2016-01-01',
+        value: 0.1308139534883721,
+        rawValue: '2016-01-01'
+      },
+      {
+        id: '2017-01-01',
+        label: '2017-01-01',
+        value: 0.37693798449612403,
+        rawValue: '2017-01-01'
       },
       {
-        id: '公司',
-        label: '公司',
-        value: 0.4999999999999999,
-        rawValue: '公司'
+        id: '2018-01-01',
+        label: '2018-01-01',
+        value: 0.623062015503876,
+        rawValue: '2018-01-01'
       },
       {
-        id: '小型企业',
-        label: '小型企业',
-        value: 0.1666666666666666,
-        rawValue: '小型企业'
+        id: '2019-01-01',
+        label: '2019-',
+        value: 0.8691860465116279,
+        rawValue: '2019-01-01'
       }
     ]
   ],
-  visible: true,
-  pickable: true,
-  orient: 'left',
-  hover: true,
-  select: true,
-  panel: {
-    visible: true,
-    state: {
-      // hover: {
-      //   fillOpacity: 0.08,
-      //   fill: 'red'
-      // },
-      selected: {
-        fillOpacity: 0.08,
-        fill: 'blue'
-      },
-      selected_reverse: {
-        fillOpacity: 0.08,
-        fill: 'red'
-      }
-      // hover_reverse: {
-      //   fillOpacity: 0.08,
-      //   fill: '#141414'
-      // }
-    }
-  },
-  verticalFactor: 1,
-  verticalLimitSize: 150,
-  verticalMinSize: 150
+  verticalLimitSize: 66,
+  verticalMinSize: 66,
+  verticalFactor: 1
 });
 window.axis = axis;
-// axis.showLabelHoverOnAxis(130);
+debugger;
+setTimeout(() => {
+  axis.showLabelHoverOnAxis(390, '2016-01-01');
+}, 100);
 render([axis], 'main');
diff --git a/packages/vrender-components/src/axis/line.ts b/packages/vrender-components/src/axis/line.ts
index a304f7110..f10d78055 100644
--- a/packages/vrender-components/src/axis/line.ts
+++ b/packages/vrender-components/src/axis/line.ts
@@ -17,7 +17,14 @@ import {
 } from '@visactor/vutils';
 import { graphicCreator } from '@visactor/vrender-core';
 // eslint-disable-next-line no-duplicate-imports
-import type { TextAlignType, IGroup, INode, IText, TextBaselineType } from '@visactor/vrender-core';
+import type {
+  TextAlignType,
+  IGroup,
+  INode,
+  IText,
+  TextBaselineType,
+  ITextGraphicAttribute
+} from '@visactor/vrender-core';
 import type { SegmentAttributes } from '../segment';
 // eslint-disable-next-line no-duplicate-imports
 import { Segment } from '../segment';
@@ -65,8 +72,15 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
       if (attributes.labelHoverOnAxis.space === undefined) {
         const { padding = 2 } = attributes.labelHoverOnAxis;
         const parsedPadding = normalizePadding(padding as any);
-        const topPadding = parsedPadding[0];
-        const space = (attributes.label.space ?? LineAxis.defaultAttributes.label.space) - topPadding;
+        const toDiffPadding =
+          attributes.orient === 'bottom'
+            ? parsedPadding[0]
+            : attributes.orient === 'left'
+            ? parsedPadding[1]
+            : attributes.orient === 'top'
+            ? parsedPadding[2]
+            : parsedPadding[3];
+        const space = (attributes.label.space ?? LineAxis.defaultAttributes.label.space) - toDiffPadding;
         attributes.labelHoverOnAxis.space = space;
       }
     }
@@ -450,34 +464,40 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
         textBaseline = 'top';
       }
     } else {
-      textAlign = this.getTextAlign(vector as number[]);
-      textBaseline = this.getTextBaseline(vector as number[], false);
+      const { textAlign: textAlign2, textBaseline: textBaseline2 } = this.getLabelAlign(
+        vector,
+        false,
+        (textStyle as ITextGraphicAttribute).angle
+      );
+      textAlign = textAlign2;
+      textBaseline = textBaseline2;
+      // textBaseline = this.getTextBaseline(vector as number[], false);
     }
 
     // 计算悬浮标签的缩略
-    let maxTagWidth = maxWidth; // maxWidth;
-    if (isNil(maxTagWidth)) {
-      const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
-      const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
-      if (isValidNumber(limitSize)) {
-        const isX = orient === 'bottom' || orient === 'top';
-        if (isX) {
-          if (angle !== Math.PI / 2) {
-            const cosValue = Math.abs(Math.cos(angle ?? 0));
-            maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
-          } else {
-            maxTagWidth = limitSize - offset;
-          }
-        } else {
-          if (angle && angle !== 0) {
-            const sinValue = Math.abs(Math.sin(angle));
-            maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
-          } else {
-            maxTagWidth = limitSize - offset;
-          }
-        }
-      }
-    }
+    const maxTagWidth = maxWidth; // maxWidth;
+    // if (isNil(maxTagWidth)) {
+    //   const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
+    //   const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
+    //   if (isValidNumber(limitSize)) {
+    //     const isX = orient === 'bottom' || orient === 'top';
+    //     if (isX) {
+    //       if (angle !== Math.PI / 2) {
+    //         const cosValue = Math.abs(Math.cos(angle ?? 0));
+    //         maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
+    //       } else {
+    //         maxTagWidth = limitSize - offset;
+    //       }
+    //     } else {
+    //       if (angle && angle !== 0) {
+    //         const sinValue = Math.abs(Math.sin(angle));
+    //         maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
+    //       } else {
+    //         maxTagWidth = limitSize - offset;
+    //       }
+    //     }
+    //   }
+    // }
     const text = formatMethod ? formatMethod(textContent as string) : (textContent as string);
     const attrs: TagAttributes = {
       ...labelPoint,
@@ -803,8 +823,15 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
     return limitLength;
   }
   /** 显示交互中的悬浮标签 */
-  showLabelHoverOnAxis(position: number, text: string) {
+  showLabelHoverOnAxis(position: number, text: string, adjustPosition: boolean = true) {
     if (this.attribute.labelHoverOnAxis) {
+      const preContainerBounds = this.axisContainer.AABBBounds;
+      const preWidth = preContainerBounds.width();
+      const preHeight = preContainerBounds.height();
+      const preX1 = preContainerBounds.x1;
+      const preY1 = preContainerBounds.y1;
+      const preX2 = preContainerBounds.x2;
+      const preY2 = preContainerBounds.y2;
       if (this.labelHoverOnAxisGroup) {
         const { formatMethod } = this.attribute.labelHoverOnAxis as LabelHoverOnAxisAttributes;
         const textStr = formatMethod ? formatMethod(text) : text;
@@ -826,6 +853,28 @@ export class LineAxis extends AxisBase<LineAxisAttributes> {
         this.attribute.labelHoverOnAxis.text = text;
         this.renderLabelHoverOnAxis();
       }
+      if (adjustPosition) {
+        //防止死循环
+        const afterContainerBounds = this.axisContainer.AABBBounds;
+        const afterWidth = afterContainerBounds.width();
+        const afterHeight = afterContainerBounds.height();
+        const diffWidth = afterWidth - preWidth;
+        const diffHeight = afterHeight - preHeight;
+        if (diffWidth > 0 && (this.attribute.orient === 'top' || this.attribute.orient === 'bottom')) {
+          if (afterContainerBounds.x1 < preX1) {
+            this.showLabelHoverOnAxis(position + diffWidth, text, false);
+          } else if (afterContainerBounds.x2 > preX2) {
+            this.showLabelHoverOnAxis(position - diffWidth, text, false);
+          }
+        }
+        if (diffHeight > 0 && (this.attribute.orient === 'left' || this.attribute.orient === 'right')) {
+          if (afterContainerBounds.y1 < preY1) {
+            this.showLabelHoverOnAxis(position + diffHeight, text, false);
+          } else if (afterContainerBounds.y2 > preY2) {
+            this.showLabelHoverOnAxis(position - diffHeight, text, false);
+          }
+        }
+      }
     }
   }
   /** 隐藏交互中的悬浮标签 */