@easyv/charts 1.9.25 → 1.9.27

package/lib/components/Axis.js

@@ -248,7 +248,7 @@ var Label = function Label(_ref5) {
       showType: config.showType
     }
   }));
-  var _getLayout = getLayout(orientation, rotate),
+  var _getLayout = getLayout(orientation, adaptive ? 0 : rotate),
     transform = _getLayout.transform,
     directionX = _getLayout.directionX,
     directionY = _getLayout.directionY;
@@ -293,10 +293,9 @@ var Label = function Label(_ref5) {
     }
   }) : /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      width: LabelWidth,
+      display: "inline-block",
       transform: transform,
-      justifyContent: "flex-start",
-      display: "block",
+      position: "absolute",
       top: translateY,
       left: translateX
     }

package/lib/components/ChartContainer.js

@@ -43,7 +43,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     onMouseMove: onMouseMove,
     ref: ref,
     style: _objectSpread({
-      overflow: "hidden",
+      overflow: "visible",
       position: "absolute",
       width: width,
       height: height

package/lib/components/Tooltip.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _utils = require("../utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -41,9 +42,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     bgColor = _ref$config$tip.bgColor,
     image = _ref$config$tip.image,
     margin = _ref$config$tip.margin,
-    _ref$config$tip$size = _ref$config$tip.size,
-    tipWidth = _ref$config$tip$size.width,
-    tipHeight = _ref$config$tip$size.height,
     translateTip = _ref$config$tip.translate,
     formatter = _ref.formatter,
     isVertical = _ref.isVertical,
@@ -51,32 +49,57 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     height = _ref.height,
     auto = _ref.auto,
     manual = _ref.manual;
+  var tooltipRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipSize = _useState2[0],
+    setTooltipSize = _useState2[1];
   var tipPosition = (0, _react.useMemo)(function () {
     var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
       y: translateTip.y + position + marginTop
     }) : _objectSpread(_objectSpread({}, translateTip), {}, {
       x: translateTip.x + position + marginLeft
     });
-    if (!isVertical && translate3d.x + tipWidth > width) {
-      var newPositon = position + marginLeft - tipWidth - translateTip.x;
+    if (!isVertical && translate3d.x + tooltipSize.width > width) {
+      var newPositon = position + marginLeft - tooltipSize.width - translateTip.x;
       translate3d.x = newPositon >= 0 ? newPositon : 0;
     }
-    if (isVertical && translate3d.y + tipHeight > height) {
-      var _newPositon = position + marginTop - tipHeight - translateTip.y;
-      translate3d.y = _newPositon <= 0 ? _newPositon : height - tipHeight;
+    if (isVertical && translate3d.y + tooltipSize.height > height) {
+      var _newPositon = position + marginTop - tooltipSize.height - translateTip.y;
+      translate3d.y = _newPositon <= 0 ? _newPositon : height - tooltipSize.height;
     }
     return (0, _utils.getTranslate3d)(translate3d);
-  }, [width, height, marginLeft, marginTop, position, tipWidth, tipHeight, translateTip]);
+  }, [width, height, marginLeft, marginTop, position, tooltipSize, translateTip]);
+  (0, _react.useEffect)(function () {
+    if (tooltipRef.current && (manual || auto)) {
+      var rect = tooltipRef.current.getBoundingClientRect();
+      setTooltipSize({
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  }, [manual, auto, formatter, data, series, x]);
   return manual || auto ? /*#__PURE__*/React.createElement("div", {
+    ref: tooltipRef,
     className: "__easyv-tooltip",
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       pointerEvents: "none",
       transform: tipPosition,
-      width: tipWidth,
-      minHeight: tipHeight,
+      display: "inline-block",
+      position: "absolute",
+      margin: 0,
+      boxSizing: "border-box",
       padding: (0, _utils.getMargin)(margin),
       background: bgType == "image" ? image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "transparent" : bgColor
-    }, (0, _utils.getFontStyle)(font))
+    }, (0, _utils.getFontStyle)(font)), {}, {
+      width: "fit-content",
+      maxWidth: "none",
+      overflow: "visible",
+      zIndex: 9999
+    })
   }, formatter ? formatter({
     series: series,
     x: {
@@ -93,7 +116,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       flexDirection: "column",
       justifyContent: "space-between",
       gap: gap,
-      height: "100%"
+      height: "100%",
+      width: "auto",
+      maxWidth: "none"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({

package/lib/components/pieTooltip.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PieTooltip = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -37,13 +37,32 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     precision = _props$config$tip$dat3.precision,
     image = _props$config$tip.image,
     margin = _props$config$tip.margin,
-    _props$config$tip$siz = _props$config$tip.size,
-    tipWidth = _props$config$tip$siz.width,
-    tipHeight = _props$config$tip$siz.height,
     translateTip = _props$config$tip.translate,
     data = props.data,
     series = props.series;
+  var tooltipRef = (0, _react.useRef)(null);
+  // 存储tooltip的实际宽高
+  var _useState = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipSize = _useState2[0],
+    setTooltipSize = _useState2[1];
   var screenRef = domRef.current.getBoundingClientRect();
+  (0, _react.useEffect)(function () {
+    if (tooltipRef.current && mousePos) {
+      try {
+        var rect = tooltipRef.current.getBoundingClientRect();
+        setTooltipSize({
+          width: rect.width,
+          height: rect.height
+        });
+      } catch (e) {
+        console.error("获取tooltip尺寸失败:", e);
+      }
+    }
+  }, [mousePos, data, series, lineHeight, iconSize]);
   var Item = function Item() {
     var _data$data = data.data,
       s = _data$data.s,
@@ -61,7 +80,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
         suffixTranslate = suffix.translate;
       return /*#__PURE__*/_react["default"].createElement("span", {
         style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(suffiixFont)), {}, {
-          display: "inline-block",
+          // display: "inline-block",
           transform: (0, _utils.getTranslate3d)(suffixTranslate)
         })
       }, content);
@@ -71,7 +90,8 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
       style: {
         display: "flex",
         justifyContent: "space-between",
-        lineHeight: lineHeight + "px"
+        lineHeight: lineHeight + "px",
+        alignItems: "center"
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -88,9 +108,13 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     }), /*#__PURE__*/_react["default"].createElement("span", {
       style: (0, _utils.getFontStyle)(name)
     }, displayName || s)), valueIsShow && /*#__PURE__*/_react["default"].createElement("span", {
-      style: (0, _utils.getFontStyle)(valueFont)
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
+        marginLeft: "10px"
+      })
     }, y, valueSuffixIsShow && renderSuffix(valueSuffix)), percentageIsShow && /*#__PURE__*/_react["default"].createElement("span", {
-      style: (0, _utils.getFontStyle)(percentageFont)
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentageFont)), {}, {
+        marginLeft: "10px"
+      })
     }, Number(percent).toFixed(precision), percentageSuffixIsShow && renderSuffix(percentageSuffix)));
   };
   var getBigScreenScale = function getBigScreenScale() {
@@ -165,10 +189,10 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     centerY = pieCenter.y;
   var getTipPos = function getTipPos() {
     var tipPosMap = {
-      rightTop: "translate(".concat((screenRef.x + translateTip.x + tipWidth) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y - translateTip.y - tipHeight) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
-      leftTop: "translate(".concat((screenRef.x - translateTip.x - tipWidth) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tipWidth, "px,").concat((screenRef.y - translateTip.y - tipHeight) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
-      leftBottom: "translate(".concat((screenRef.x - translateTip.x - tipWidth) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tipWidth, "px,").concat((screenRef.y + translateTip.y + tipHeight) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tipHeight : mouseY + translateTip.y, "px)"),
-      rightBottom: "translate(".concat((screenRef.x + translateTip.x + tipWidth) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y + translateTip.y + tipHeight) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tipHeight : mouseY + translateTip.y, "px)")
+      rightTop: "translate(".concat((screenRef.x + translateTip.x + tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tooltipSize.width - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y - translateTip.y - tooltipSize.height) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tooltipSize.height - translateTip.y, "px)"),
+      leftTop: "translate(".concat((screenRef.x - translateTip.x - tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tooltipSize.width, "px,").concat((screenRef.y - translateTip.y - tooltipSize.height) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tooltipSize.height - translateTip.y, "px)"),
+      leftBottom: "translate(".concat((screenRef.x - translateTip.x - tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tooltipSize.width, "px,").concat((screenRef.y + translateTip.y + tooltipSize.height) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tooltipSize.height : mouseY + translateTip.y, "px)"),
+      rightBottom: "translate(".concat((screenRef.x + translateTip.x + tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tooltipSize.width - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y + translateTip.y + tooltipSize.height) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tooltipSize.height : mouseY + translateTip.y, "px)")
     };
     if (mouseX < centerX && mouseY < centerY) {
       return tipPosMap.leftTop;
@@ -181,20 +205,22 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     }
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: tooltipRef,
     className: "__easyv-tooltip",
     style: {
       pointerEvents: "none",
       transform: getTipPos(mousePos, pieCenter),
-      width: tipWidth,
-      height: tipHeight,
+      boxSizing: "border-box",
       padding: (0, _utils.getMargin)(margin),
-      background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)"
+      background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)",
+      overflow: "hidden"
     }
   }, /*#__PURE__*/_react["default"].createElement("dl", {
     style: {
       display: "flex",
       flexDirection: "column",
       justifyContent: "space-between",
+      margin: 0,
       height: "100%"
     }
   }, Item()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.25",
+  "version": "1.9.27",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Axis.tsx

@@ -226,7 +226,7 @@ type LabelType = {
   events?: Function;
   config: {
     show: boolean;
-    adaptive:boolean;
+    adaptive: boolean;
     translate: Translate;
     font: Font;
     textAlign: TextAlign;
@@ -291,7 +291,10 @@ const Label: (
     ...config,
     format: { type: config.format, showType: config.showType },
   });
-  const { transform, directionX, directionY } = getLayout(orientation, rotate);
+  const { transform, directionX, directionY } = getLayout(
+    orientation,
+    adaptive ? 0 : rotate
+  );
   const isVertical = orientation == "left" || orientation == "right";
 
   const x =
@@ -344,10 +347,9 @@ const Label: (
         ) : (
           <span
             style={{
-              width: LabelWidth,
+              display: "inline-block",
               transform,
-              justifyContent: "flex-start",
-              display: "block",
+              position: "absolute",
               top: translateY,
               left: translateX,
             }}
@@ -396,7 +398,7 @@ export default memo(
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
       let LabelWidth = 1;
-      if (!label.adaptive&&label.appearance) {
+      if (!label.adaptive && label.appearance) {
         LabelWidth = label.appearance.width;
       } else {
         if (allTicks.length && typeof allTicks[0] == "string") {
@@ -406,18 +408,17 @@ export default memo(
       const LabelNum = Math.floor(
         ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
       );
-      const ticks: any =
-        !label.adaptive
-          ? tickss
-          : getEvenlySpacedElements(
-              allTicks,
-              LabelNum < allTicks.length
-                ? LabelNum > allTicks.length / 2
-                  ? Math.ceil(allTicks.length / 2)
-                  : LabelNum
-                : allTicks.length,
-              label.showLast
-            );
+      const ticks: any = !label.adaptive
+        ? tickss
+        : getEvenlySpacedElements(
+            allTicks,
+            LabelNum < allTicks.length
+              ? LabelNum > allTicks.length / 2
+                ? Math.ceil(allTicks.length / 2)
+                : LabelNum
+              : allTicks.length,
+            label.showLast
+          );
       if (!(on && ticks.length > 0)) return null;
 
       //数据抽取逻辑

package/src/components/CartesianChart.js

@@ -348,8 +348,9 @@ const Chart = memo(
         setClipX(-translateX);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
-        seriesEl.current.style.transform = `translate(${translateX + coreOffset
-          }px,${marginTop}px)`;
+        seriesEl.current.style.transform = `translate(${
+          translateX + coreOffset
+        }px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -458,8 +459,8 @@ const Chart = memo(
     const controlChartTooltipData =
       ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical
-      ? xLineRange + 100 + marginRight + marginLeft
-      : xLineRange,
+        ? xLineRange + 100 + marginRight + marginLeft
+        : xLineRange,
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
@@ -724,7 +725,7 @@ const Chart = memo(
                   ctlX -
                   marginLeft -
                   (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                  curControlPercent.current
+                    curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/ChartContainer.tsx

@@ -54,7 +54,7 @@ export default memo(
           onMouseMove={onMouseMove}
           ref={ref}
           style={{
-            overflow: "hidden",
+            overflow: "visible",
             position: "absolute",
             width,
             height,

package/src/components/PieTooltip.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useRef, useState, useEffect } from "react";
 import {
   getFontStyle,
   getMargin,
@@ -34,14 +34,33 @@ export const PieTooltip = memo((props) => {
         },
         image,
         margin,
-        size: { width: tipWidth, height: tipHeight },
+        // size: { width: tooltipSize.width, height: tooltipSize.height },
         translate: translateTip,
       },
     },
     data,
     series,
   } = props;
+  const tooltipRef = useRef(null);
+  // 存储tooltip的实际宽高
+  const [tooltipSize, setTooltipSize] = useState({
+    width: 0,
+    height: 0,
+  });
   const screenRef = domRef.current.getBoundingClientRect();
+  useEffect(() => {
+    if (tooltipRef.current && mousePos) {
+      try {
+        const rect = tooltipRef.current.getBoundingClientRect();
+        setTooltipSize({
+          width: rect.width,
+          height: rect.height,
+        });
+      } catch (e) {
+        console.error("获取tooltip尺寸失败:", e);
+      }
+    }
+  }, [mousePos, data, series, lineHeight, iconSize]);
   const Item = () => {
     const {
       data: { s, y },
@@ -57,7 +76,7 @@ export const PieTooltip = memo((props) => {
         <span
           style={{
             ...getFontStyle(suffiixFont),
-            display: "inline-block",
+            // display: "inline-block",
             transform: getTranslate3d(suffixTranslate),
           }}
         >
@@ -73,6 +92,7 @@ export const PieTooltip = memo((props) => {
           display: "flex",
           justifyContent: "space-between",
           lineHeight: lineHeight + "px",
+          alignItems: "center",
         }}
       >
         <span
@@ -93,13 +113,13 @@ export const PieTooltip = memo((props) => {
           <span style={getFontStyle(name)}>{displayName || s}</span>
         </span>
         {valueIsShow && (
-          <span style={getFontStyle(valueFont)}>
+          <span style={{ ...getFontStyle(valueFont), marginLeft: "10px" }}>
             {y}
             {valueSuffixIsShow && renderSuffix(valueSuffix)}
           </span>
         )}
         {percentageIsShow && (
-          <span style={getFontStyle(percentageFont)}>
+          <span style={{ ...getFontStyle(percentageFont), marginLeft: "10px" }}>
             {Number(percent).toFixed(precision)}
             {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
           </span>
@@ -183,63 +203,63 @@ export const PieTooltip = memo((props) => {
   const getTipPos = () => {
     const tipPosMap = {
       rightTop: `translate(${
-        (screenRef.x + translateTip.x + tipWidth) / scaleX +
+        (screenRef.x + translateTip.x + tooltipSize.width) / scaleX +
           mouseX -
           screenLeft / scaleX >
         screenWidth / scaleX
-          ? mouseX - tipWidth - translateTip.x
+          ? mouseX - tooltipSize.width - translateTip.x
           : mouseX + translateTip.x
       }px,${
-        (screenRef.y - translateTip.y - tipHeight) / scaleY +
+        (screenRef.y - translateTip.y - tooltipSize.height) / scaleY +
           mouseY -
           screenTop / scaleY <
         0
           ? mouseY + translateTip.y
-          : mouseY - tipHeight - translateTip.y
+          : mouseY - tooltipSize.height - translateTip.y
       }px)`,
       leftTop: `translate(${
-        (screenRef.x - translateTip.x - tipWidth) / scaleX +
+        (screenRef.x - translateTip.x - tooltipSize.width) / scaleX +
           mouseX -
           screenLeft / scaleX <
         0
           ? mouseX + translateTip.x
-          : mouseX - translateTip.x - tipWidth
+          : mouseX - translateTip.x - tooltipSize.width
       }px,${
-        (screenRef.y - translateTip.y - tipHeight) / scaleY +
+        (screenRef.y - translateTip.y - tooltipSize.height) / scaleY +
           mouseY -
           screenTop / scaleY <
         0
           ? mouseY + translateTip.y
-          : mouseY - tipHeight - translateTip.y
+          : mouseY - tooltipSize.height - translateTip.y
       }px)`,
       leftBottom: `translate(${
-        (screenRef.x - translateTip.x - tipWidth) / scaleX +
+        (screenRef.x - translateTip.x - tooltipSize.width) / scaleX +
           mouseX -
           screenLeft / scaleX <
         0
           ? mouseX + translateTip.x
-          : mouseX - translateTip.x - tipWidth
+          : mouseX - translateTip.x - tooltipSize.width
       }px,${
-        (screenRef.y + translateTip.y + tipHeight) / scaleY +
+        (screenRef.y + translateTip.y + tooltipSize.height) / scaleY +
           mouseY -
           screenTop / scaleY >
         screenHeight / scaleY
-          ? mouseY - translateTip.y - tipHeight
+          ? mouseY - translateTip.y - tooltipSize.height
           : mouseY + translateTip.y
       }px)`,
       rightBottom: `translate(${
-        (screenRef.x + translateTip.x + tipWidth) / scaleX +
+        (screenRef.x + translateTip.x + tooltipSize.width) / scaleX +
           mouseX -
           screenLeft / scaleX >
         screenWidth / scaleX
-          ? mouseX - tipWidth - translateTip.x
+          ? mouseX - tooltipSize.width - translateTip.x
           : mouseX + translateTip.x
       }px,${
-        (screenRef.y + translateTip.y + tipHeight) / scaleY +
+        (screenRef.y + translateTip.y + tooltipSize.height) / scaleY +
           mouseY -
           screenTop / scaleY >
         screenHeight / scaleY
-          ? mouseY - translateTip.y - tipHeight
+          ? mouseY - translateTip.y - tooltipSize.height
           : mouseY + translateTip.y
       }px)`,
     };
@@ -256,12 +276,12 @@ export const PieTooltip = memo((props) => {
 
   return (
     <div
+      ref={tooltipRef}
       className="__easyv-tooltip"
       style={{
         pointerEvents: "none",
         transform: getTipPos(mousePos, pieCenter),
-        width: tipWidth,
-        height: tipHeight,
+        boxSizing: "border-box",
         padding: getMargin(margin),
         background: image
           ? "50% 50% / 100% 100% no-repeat url(" +
@@ -269,6 +289,7 @@ export const PieTooltip = memo((props) => {
             image +
             ")"
           : "rgba(48, 55, 66, 0.85)",
+        overflow: "hidden",
       }}
     >
       <dl
@@ -276,6 +297,7 @@ export const PieTooltip = memo((props) => {
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
+          margin: 0,
           height: "100%",
         }}
       >

package/src/components/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * 提示框
  */
-import { memo, useMemo } from "react";
+import { memo, useMemo, useRef, useEffect, useState } from "react";
 import { getFontStyle, getMargin, getTranslate3d } from "../utils";
 import { getIcon } from "../utils";
 export default memo(
@@ -32,7 +32,6 @@ export default memo(
         bgColor,
         image,
         margin,
-        size: { width: tipWidth, height: tipHeight },
         translate: translateTip,
       },
     },
@@ -43,6 +42,11 @@ export default memo(
     auto,
     manual,
   }) => {
+    const tooltipRef = useRef(null);
+    const [tooltipSize, setTooltipSize] = useState({
+      width: 0,
+      height: 0,
+    });
     const tipPosition = useMemo(() => {
       const translate3d = isVertical
         ? {
@@ -53,13 +57,16 @@ export default memo(
             ...translateTip,
             x: translateTip.x + position + marginLeft,
           };
-      if (!isVertical && translate3d.x + tipWidth > width) {
-        const newPositon = position + marginLeft - tipWidth - translateTip.x;
+      if (!isVertical && translate3d.x + tooltipSize.width > width) {
+        const newPositon =
+          position + marginLeft - tooltipSize.width - translateTip.x;
         translate3d.x = newPositon >= 0 ? newPositon : 0;
       }
-      if (isVertical && translate3d.y + tipHeight > height) {
-        const newPositon = position + marginTop - tipHeight - translateTip.y;
-        translate3d.y = newPositon <= 0 ? newPositon : height - tipHeight;
+      if (isVertical && translate3d.y + tooltipSize.height > height) {
+        const newPositon =
+          position + marginTop - tooltipSize.height - translateTip.y;
+        translate3d.y =
+          newPositon <= 0 ? newPositon : height - tooltipSize.height;
       }
       return getTranslate3d(translate3d);
     }, [
@@ -68,18 +75,29 @@ export default memo(
       marginLeft,
       marginTop,
       position,
-      tipWidth,
-      tipHeight,
+      tooltipSize,
       translateTip,
     ]);
+    useEffect(() => {
+      if (tooltipRef.current && (manual || auto)) {
+        const rect = tooltipRef.current.getBoundingClientRect();
+        setTooltipSize({
+          width: rect.width,
+          height: rect.height,
+        });
+      }
+    }, [manual, auto, formatter, data, series, x]);
     return manual || auto ? (
       <div
+        ref={tooltipRef}
         className="__easyv-tooltip"
         style={{
           pointerEvents: "none",
           transform: tipPosition,
-          width: tipWidth,
-          minHeight: tipHeight,
+          display: "inline-block",
+          position: "absolute",
+          margin: 0,
+          boxSizing: "border-box",
           padding: getMargin(margin),
           background:
             bgType == "image"
@@ -91,6 +109,10 @@ export default memo(
                 : "transparent"
               : bgColor,
           ...getFontStyle(font),
+          width: "fit-content",
+          maxWidth: "none",
+          overflow: "visible",
+          zIndex: 9999,
         }}
       >
         {formatter ? (
@@ -107,6 +129,8 @@ export default memo(
               justifyContent: "space-between",
               gap,
               height: "100%",
+              width: "auto",
+              maxWidth: "none",
             }}
           >
             <div