@easyv/charts 1.10.33 → 1.10.35

package/lib/components/PieChart.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ = require(".");
 var _context = require("../context");
@@ -196,16 +196,116 @@ var getCoord = function getCoord(deg, radius) {
     y = Math.sin(deg) * radius;
   return [x, y];
 };
-var getRoseRadius = function getRoseRadius(_ref) {
-  var innerRadius = _ref.innerRadius,
-    baseRadius = _ref.baseRadius;
+var parseFontSize = function parseFontSize(value) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 12;
+  var n = parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+
+// 与 getFontStyle 一致：实际行盒高度取 lineHeight，否则用 fontSize
+var getFontLineHeight = function getFontLineHeight(font) {
+  var fontSize = parseFontSize(font === null || font === void 0 ? void 0 : font.fontSize);
+  var lineHeight = parseFontSize(font === null || font === void 0 ? void 0 : font.lineHeight, 0);
+  return Math.max(lineHeight, fontSize);
+};
+var getLabelRowHeight = function getLabelRowHeight(_ref) {
+  var showName = _ref.showName,
+    showValue = _ref.showValue,
+    showPercent = _ref.showPercent,
+    nameFont = _ref.nameFont,
+    valueFont = _ref.valueFont,
+    percentFont = _ref.percentFont;
+  var sizes = [];
+  if (showName) sizes.push(getFontLineHeight(nameFont));
+  if (showValue) sizes.push(getFontLineHeight(valueFont));
+  if (showPercent) sizes.push(getFontLineHeight(percentFont));
+  return sizes.length ? Math.max.apply(Math, sizes) : 12;
+};
+
+// 上下布局：名称/数值/百分比纵向排列，高度 = 各可见行的行高之和
+var getLabelColumnHeight = function getLabelColumnHeight(_ref2) {
+  var showName = _ref2.showName,
+    showValue = _ref2.showValue,
+    showPercent = _ref2.showPercent,
+    nameFont = _ref2.nameFont,
+    valueFont = _ref2.valueFont,
+    percentFont = _ref2.percentFont;
+  var height = 0;
+  if (showName) height += getFontLineHeight(nameFont);
+  if (showValue) height += getFontLineHeight(valueFont);
+  if (showPercent) height += getFontLineHeight(percentFont);
+  return height || 12;
+};
+
+// 水平布局：同侧重叠时按半高之和推开
+var resolveLabelY = function resolveLabelY(y2, side, placedYBySide, labelHeight) {
+  var placed = placedYBySide[side];
+  var finalY = y2;
+  var stackDown = y2 >= 0;
+  var isOverlap = function isOverlap(y, py, h) {
+    return Math.abs(y - py) < (labelHeight + h) / 2;
+  };
+  var guard = 0;
+  while (guard++ < 50 && placed.some(function (_ref3) {
+    var py = _ref3.y,
+      h = _ref3.height;
+    return isOverlap(finalY, py, h);
+  })) {
+    var hits = placed.filter(function (_ref4) {
+      var py = _ref4.y,
+        h = _ref4.height;
+      return isOverlap(finalY, py, h);
+    });
+    finalY = stackDown ? Math.max.apply(Math, (0, _toConsumableArray2["default"])(hits.map(function (_ref5) {
+      var py = _ref5.y,
+        h = _ref5.height;
+      return py + (labelHeight + h) / 2;
+    }))) : Math.min.apply(Math, (0, _toConsumableArray2["default"])(hits.map(function (_ref6) {
+      var py = _ref6.y,
+        h = _ref6.height;
+      return py - (labelHeight + h) / 2;
+    })));
+  }
+  placed.push({
+    y: finalY,
+    height: labelHeight
+  });
+  return finalY;
+};
+
+// 上下布局：过近时只按「自身标签高度」相对上一个已放置位置偏移
+var resolveLabelYVertical = function resolveLabelYVertical(y2, side, placedYBySide, labelHeight) {
+  var placed = placedYBySide[side];
+  var stackDown = y2 >= 0;
+  var finalY = y2;
+  if (placed.some(function (_ref7) {
+    var py = _ref7.y;
+    return Math.abs(finalY - py) < labelHeight;
+  })) {
+    finalY = stackDown ? Math.max.apply(Math, (0, _toConsumableArray2["default"])(placed.map(function (_ref8) {
+      var py = _ref8.y;
+      return py;
+    }))) + labelHeight : Math.min.apply(Math, (0, _toConsumableArray2["default"])(placed.map(function (_ref9) {
+      var py = _ref9.y;
+      return py;
+    }))) - labelHeight;
+  }
+  placed.push({
+    y: finalY,
+    height: labelHeight
+  });
+  return finalY;
+};
+var getRoseRadius = function getRoseRadius(_ref10) {
+  var innerRadius = _ref10.innerRadius,
+    baseRadius = _ref10.baseRadius;
   return innerRadius + (1 - innerRadius) * baseRadius;
 };
-var getAngle = function getAngle(_ref2) {
-  var startAngle = _ref2.startAngle,
-    endAngle = _ref2.endAngle,
-    antiClockwise = _ref2.antiClockwise,
-    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+var getAngle = function getAngle(_ref11) {
+  var startAngle = _ref11.startAngle,
+    endAngle = _ref11.endAngle,
+    antiClockwise = _ref11.antiClockwise,
+    rest = (0, _objectWithoutProperties2["default"])(_ref11, _excluded);
   if (antiClockwise) return _objectSpread(_objectSpread({}, rest), {}, {
     startAngle: endAngle - 180,
     endAngle: startAngle - 180
@@ -215,20 +315,20 @@ var getAngle = function getAngle(_ref2) {
     endAngle: endAngle
   });
 };
-var getArc = function getArc(radius, _ref3, series_, index) {
-  var _ref3$padAngle = _ref3.padAngle,
-    padAngle = _ref3$padAngle === void 0 ? 0 : _ref3$padAngle,
-    _ref3$innerRadius = _ref3.innerRadius,
-    innerRadius = _ref3$innerRadius === void 0 ? 0 : _ref3$innerRadius,
-    _ref3$outerRadius = _ref3.outerRadius,
-    outerRadius = _ref3$outerRadius === void 0 ? 1 : _ref3$outerRadius,
-    _ref3$cornerRadius = _ref3.cornerRadius,
-    cornerRadius = _ref3$cornerRadius === void 0 ? 0 : _ref3$cornerRadius,
-    _ref3$startAngle = _ref3.startAngle,
-    startAngle = _ref3$startAngle === void 0 ? 0 : _ref3$startAngle,
-    _ref3$endAngle = _ref3.endAngle,
-    endAngle = _ref3$endAngle === void 0 ? 360 : _ref3$endAngle,
-    rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+var getArc = function getArc(radius, _ref12, series_, index) {
+  var _ref12$padAngle = _ref12.padAngle,
+    padAngle = _ref12$padAngle === void 0 ? 0 : _ref12$padAngle,
+    _ref12$innerRadius = _ref12.innerRadius,
+    innerRadius = _ref12$innerRadius === void 0 ? 0 : _ref12$innerRadius,
+    _ref12$outerRadius = _ref12.outerRadius,
+    outerRadius = _ref12$outerRadius === void 0 ? 1 : _ref12$outerRadius,
+    _ref12$cornerRadius = _ref12.cornerRadius,
+    cornerRadius = _ref12$cornerRadius === void 0 ? 0 : _ref12$cornerRadius,
+    _ref12$startAngle = _ref12.startAngle,
+    startAngle = _ref12$startAngle === void 0 ? 0 : _ref12$startAngle,
+    _ref12$endAngle = _ref12.endAngle,
+    endAngle = _ref12$endAngle === void 0 ? 360 : _ref12$endAngle,
+    rest = (0, _objectWithoutProperties2["default"])(_ref12, _excluded2);
   var series = series_.find(function (s) {
     return s.fieldName == rest.data.s;
   }) || series_[index % series_.length];
@@ -243,11 +343,11 @@ var getArc = function getArc(radius, _ref3, series_, index) {
   });
 };
 var getCircleScale = function getCircleScale() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tick,
-    count = _ref4.count,
-    color = _ref4.color,
-    width = _ref4.width,
-    length = _ref4.length;
+  var _ref13 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tick,
+    count = _ref13.count,
+    color = _ref13.color,
+    width = _ref13.width,
+    length = _ref13.length;
   var radius = arguments.length > 1 ? arguments[1] : undefined;
   var data = [],
     arcs = [],
@@ -273,78 +373,78 @@ var getCircleScale = function getCircleScale() {
     });
   }));
 };
-var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+var Component = /*#__PURE__*/(0, _react.memo)(function (_ref14) {
   var _legend$config2;
-  var width = _ref5.width,
-    height = _ref5.height,
-    _ref5$config = _ref5.config,
-    _ref5$config$chart = _ref5$config.chart,
-    label = _ref5$config$chart.label,
-    _ref5$config$chart$le = _ref5$config$chart.legend,
-    _ref5$config$chart$le2 = _ref5$config$chart$le.formatter,
-    formatter = _ref5$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref5$config$chart$le2,
-    legend = (0, _objectWithoutProperties2["default"])(_ref5$config$chart$le, _excluded3),
-    _ref5$config$chart$an = _ref5$config$chart.animation,
-    _ref5$config$chart$an2 = _ref5$config$chart$an === void 0 ? {} : _ref5$config$chart$an,
-    ringDuration = _ref5$config$chart$an2.ringDuration,
-    labelDuration = _ref5$config$chart$an2.labelDuration,
-    _ref5$config$chart$ma = _ref5$config$chart.margin,
-    marginLeft = _ref5$config$chart$ma.marginLeft,
-    marginTop = _ref5$config$chart$ma.marginTop,
-    marginRight = _ref5$config$chart$ma.marginRight,
-    marginBottom = _ref5$config$chart$ma.marginBottom,
-    _ref5$config$fan = _ref5$config.fan,
-    _ref5$config$fan2 = _ref5$config$fan === void 0 ? {} : _ref5$config$fan,
-    _ref5$config$fan2$cha = _ref5$config$fan2.chart,
-    chart = _ref5$config$fan2$cha === void 0 ? defaultChart : _ref5$config$fan2$cha,
-    _ref5$config$fan2$cha2 = _ref5$config$fan2.chart,
-    _ref5$config$fan2$cha3 = _ref5$config$fan2$cha2.outerRadius,
-    outerRadius = _ref5$config$fan2$cha3 === void 0 ? defaultChart.outerRadius : _ref5$config$fan2$cha3,
-    padAngle = _ref5$config$fan2$cha2.padAngle,
-    _ref5$config$fan2$ang = _ref5$config$fan2.angle,
-    angle = _ref5$config$fan2$ang === void 0 ? defaultAngle : _ref5$config$fan2$ang,
-    _ref5$config$fan2$str = _ref5$config$fan2.stroke,
-    _ref5$config$fan2$str2 = _ref5$config$fan2$str === void 0 ? {
+  var width = _ref14.width,
+    height = _ref14.height,
+    _ref14$config = _ref14.config,
+    _ref14$config$chart = _ref14$config.chart,
+    label = _ref14$config$chart.label,
+    _ref14$config$chart$l = _ref14$config$chart.legend,
+    _ref14$config$chart$l2 = _ref14$config$chart$l.formatter,
+    formatter = _ref14$config$chart$l2 === void 0 ? _formatter.pieLegendFormatter : _ref14$config$chart$l2,
+    legend = (0, _objectWithoutProperties2["default"])(_ref14$config$chart$l, _excluded3),
+    _ref14$config$chart$a = _ref14$config$chart.animation,
+    _ref14$config$chart$a2 = _ref14$config$chart$a === void 0 ? {} : _ref14$config$chart$a,
+    ringDuration = _ref14$config$chart$a2.ringDuration,
+    labelDuration = _ref14$config$chart$a2.labelDuration,
+    _ref14$config$chart$m = _ref14$config$chart.margin,
+    marginLeft = _ref14$config$chart$m.marginLeft,
+    marginTop = _ref14$config$chart$m.marginTop,
+    marginRight = _ref14$config$chart$m.marginRight,
+    marginBottom = _ref14$config$chart$m.marginBottom,
+    _ref14$config$fan = _ref14$config.fan,
+    _ref14$config$fan2 = _ref14$config$fan === void 0 ? {} : _ref14$config$fan,
+    _ref14$config$fan2$ch = _ref14$config$fan2.chart,
+    chart = _ref14$config$fan2$ch === void 0 ? defaultChart : _ref14$config$fan2$ch,
+    _ref14$config$fan2$ch2 = _ref14$config$fan2.chart,
+    _ref14$config$fan2$ch3 = _ref14$config$fan2$ch2.outerRadius,
+    outerRadius = _ref14$config$fan2$ch3 === void 0 ? defaultChart.outerRadius : _ref14$config$fan2$ch3,
+    padAngle = _ref14$config$fan2$ch2.padAngle,
+    _ref14$config$fan2$an = _ref14$config$fan2.angle,
+    angle = _ref14$config$fan2$an === void 0 ? defaultAngle : _ref14$config$fan2$an,
+    _ref14$config$fan2$st = _ref14$config$fan2.stroke,
+    _ref14$config$fan2$st2 = _ref14$config$fan2$st === void 0 ? {
       show: false
-    } : _ref5$config$fan2$str,
-    show = _ref5$config$fan2$str2.show,
-    strokeWidth = _ref5$config$fan2$str2.strokeWidth,
-    color = _ref5$config$fan2$str2.color,
-    decorate = _ref5$config$fan2.decorate,
-    decorate2 = _ref5$config$fan2.decorate2,
-    categoryText = _ref5$config$fan2.categoryText,
-    outerDecorate = _ref5$config$fan2.outerDecorate,
-    current = _ref5$config$fan2.current,
-    order = _ref5$config.order,
-    columnsSeries = _ref5$config.columnsSeries,
-    series = _ref5$config.series,
-    _ref5$config$animatio = _ref5$config.animation,
-    on = _ref5$config$animatio.on,
-    _ref5$config$animatio2 = _ref5$config$animatio.current,
-    _ref5$config$animatio3 = _ref5$config$animatio2.widthen,
-    widthen = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
-    _ref5$config$animatio4 = _ref5$config$animatio2.heighten,
-    heighten = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
-    _ref5$config$animatio5 = _ref5$config$animatio2.opacity,
-    opacity = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
-    _ref5$config$animatio6 = _ref5$config$animatio2.width,
-    radiusWidthAdd = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
-    animateColor = _ref5$config$animatio2.color,
-    animateCTS = _ref5$config$animatio2.textStyle,
-    _ref5$config$animatio7 = _ref5$config$animatio2.gap,
-    gap = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
-    _ref5$config$animatio8 = _ref5$config$animatio.rotate,
-    rotate = _ref5$config$animatio8 === void 0 ? 0 : _ref5$config$animatio8,
-    _ref5$config$tooltip = _ref5$config.tooltip,
-    tooltip = _ref5$config$tooltip === void 0 ? {} : _ref5$config$tooltip,
-    config = _ref5.config,
-    _ref5$state = _ref5.state,
-    currentIndex = _ref5$state.currentIndex,
-    trigger = _ref5$state.trigger,
-    onEvent = _ref5.onEvent,
-    hoverEvent = _ref5.hoverEvent,
-    _ref5$data = _ref5.data,
-    originData = _ref5$data === void 0 ? [] : _ref5$data;
+    } : _ref14$config$fan2$st,
+    show = _ref14$config$fan2$st2.show,
+    strokeWidth = _ref14$config$fan2$st2.strokeWidth,
+    color = _ref14$config$fan2$st2.color,
+    decorate = _ref14$config$fan2.decorate,
+    decorate2 = _ref14$config$fan2.decorate2,
+    categoryText = _ref14$config$fan2.categoryText,
+    outerDecorate = _ref14$config$fan2.outerDecorate,
+    current = _ref14$config$fan2.current,
+    order = _ref14$config.order,
+    columnsSeries = _ref14$config.columnsSeries,
+    series = _ref14$config.series,
+    _ref14$config$animati = _ref14$config.animation,
+    on = _ref14$config$animati.on,
+    _ref14$config$animati2 = _ref14$config$animati.current,
+    _ref14$config$animati3 = _ref14$config$animati2.widthen,
+    widthen = _ref14$config$animati3 === void 0 ? 0 : _ref14$config$animati3,
+    _ref14$config$animati4 = _ref14$config$animati2.heighten,
+    heighten = _ref14$config$animati4 === void 0 ? 0 : _ref14$config$animati4,
+    _ref14$config$animati5 = _ref14$config$animati2.opacity,
+    opacity = _ref14$config$animati5 === void 0 ? 0 : _ref14$config$animati5,
+    _ref14$config$animati6 = _ref14$config$animati2.width,
+    radiusWidthAdd = _ref14$config$animati6 === void 0 ? 0 : _ref14$config$animati6,
+    animateColor = _ref14$config$animati2.color,
+    animateCTS = _ref14$config$animati2.textStyle,
+    _ref14$config$animati7 = _ref14$config$animati2.gap,
+    gap = _ref14$config$animati7 === void 0 ? 0 : _ref14$config$animati7,
+    _ref14$config$animati8 = _ref14$config$animati.rotate,
+    rotate = _ref14$config$animati8 === void 0 ? 0 : _ref14$config$animati8,
+    _ref14$config$tooltip = _ref14$config.tooltip,
+    tooltip = _ref14$config$tooltip === void 0 ? {} : _ref14$config$tooltip,
+    config = _ref14.config,
+    _ref14$state = _ref14.state,
+    currentIndex = _ref14$state.currentIndex,
+    trigger = _ref14$state.trigger,
+    onEvent = _ref14.onEvent,
+    hoverEvent = _ref14.hoverEvent,
+    _ref14$data = _ref14.data,
+    originData = _ref14$data === void 0 ? [] : _ref14$data;
   var data = originData.map(function (d) {
     return _objectSpread(_objectSpread({}, d), {}, {
       y: d.y < 0 ? 0 : d.y
@@ -479,10 +579,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       var roseRadius = getRoseRadius(_chart);
       var scaler = (0, _d3v.scaleLinear)().domain(domain).range([roseRadius, 1]);
       var _angle = PI * 2 / _legendDataWithPercent.length;
-      return _legendDataWithPercent.map(function (_ref6, index) {
-        var startAngle = _ref6.startAngle,
-          endAngle = _ref6.endAngle,
-          arc = (0, _objectWithoutProperties2["default"])(_ref6, _excluded4);
+      return _legendDataWithPercent.map(function (_ref15, index) {
+        var startAngle = _ref15.startAngle,
+          endAngle = _ref15.endAngle,
+          arc = (0, _objectWithoutProperties2["default"])(_ref15, _excluded4);
         return _objectSpread(_objectSpread({}, arc), {}, {
           id: id + "_linear_" + index,
           startAngle: roseType == "area" ? _angle * index : startAngle,
@@ -635,13 +735,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     fill: "none",
     stroke: outerDecorate.color,
     strokeWidth: outerDecorate.width
-  }), _arcs.map(function (_ref7, index) {
-    var id = _ref7.id,
-      value = _ref7.value,
-      series = _ref7.series,
-      arc = _ref7.arc,
-      innerRadius = _ref7.innerRadius,
-      outerRadius = _ref7.outerRadius;
+  }), _arcs.map(function (_ref16, index) {
+    var id = _ref16.id,
+      value = _ref16.value,
+      series = _ref16.series,
+      arc = _ref16.arc,
+      innerRadius = _ref16.innerRadius,
+      outerRadius = _ref16.outerRadius;
     var arcWidth = outerRadius - innerRadius;
     var path = arc.innerRadius(centerRadius).outerRadius(centerRadius)(value);
     var dashLength = Math.ceil(Math.PI * centerRadius * 2 / _arcs.length);
@@ -744,14 +844,14 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       transition: "transform ease-in-out 0.3s",
       transform: "translate(" + halfChartWidth + "px, " + halfChartHeight + "px) rotate(" + rotate_ + "deg)"
     }
-  }, _arcs.map(function (_ref8, index) {
-    var id = _ref8.id,
-      value = _ref8.value,
-      series = _ref8.series,
-      arc = _ref8.arc,
-      innerRadius = _ref8.innerRadius,
-      outerRadius = _ref8.outerRadius,
-      dataIndex = _ref8.index;
+  }, _arcs.map(function (_ref17, index) {
+    var id = _ref17.id,
+      value = _ref17.value,
+      series = _ref17.series,
+      arc = _ref17.arc,
+      innerRadius = _ref17.innerRadius,
+      outerRadius = _ref17.outerRadius,
+      dataIndex = _ref17.index;
     var current = index == currentIndex;
     var prev = index == prevIndex.current;
     var offset = current ? y : prev ? 1 - y : 0;
@@ -901,53 +1001,53 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     mousePos: mousePos
   })));
 });
-var Current = function Current(_ref9) {
-  var _ref9$config = _ref9.config,
-    show = _ref9$config.show,
-    gap = _ref9$config.gap,
-    _ref9$config$name = _ref9$config.name,
-    showName = _ref9$config$name.show,
-    nameColor = _ref9$config$name.sameColor,
-    nameFont = _ref9$config$name.font,
-    _ref9$config$name$tra = _ref9$config$name.translate,
-    translate = _ref9$config$name$tra === void 0 ? {
+var Current = function Current(_ref18) {
+  var _ref18$config = _ref18.config,
+    show = _ref18$config.show,
+    gap = _ref18$config.gap,
+    _ref18$config$name = _ref18$config.name,
+    showName = _ref18$config$name.show,
+    nameColor = _ref18$config$name.sameColor,
+    nameFont = _ref18$config$name.font,
+    _ref18$config$name$tr = _ref18$config$name.translate,
+    translate = _ref18$config$name$tr === void 0 ? {
       x: 0,
       y: 0
-    } : _ref9$config$name$tra,
-    maxWidth = _ref9$config$name.maxWidth,
-    textOverflow = _ref9$config$name.textOverflow,
-    speed = _ref9$config$name.speed,
-    _ref9$config$percent = _ref9$config.percent,
-    showPercent = _ref9$config$percent.show,
-    percentColor = _ref9$config$percent.sameColor,
-    percentFont = _ref9$config$percent.font,
-    precision = _ref9$config$percent.precision,
-    _ref9$config$percent$ = _ref9$config$percent.translate,
-    translatePercentX = _ref9$config$percent$.x,
-    translatePercentY = _ref9$config$percent$.y,
-    _ref9$config$value = _ref9$config.value,
-    showValue = _ref9$config$value.show,
-    valueColor = _ref9$config$value.sameColor,
-    valueFont = _ref9$config$value.font,
-    _ref9$config$value$tr = _ref9$config$value.translate,
-    translateValueX = _ref9$config$value$tr.x,
-    translateValueY = _ref9$config$value$tr.y,
-    _ref9$config$value$su = _ref9$config$value.suffix,
-    showSuffix = _ref9$config$value$su.show,
-    fontSize = _ref9$config$value$su.fontSize,
-    text = _ref9$config$value$su.text,
-    _ref9$config$value$su2 = _ref9$config$value$su.translate,
-    translateSuffixX = _ref9$config$value$su2.x,
-    translateSuffixY = _ref9$config$value$su2.y,
-    _ref9$iosStyle = _ref9.iosStyle,
-    isIOS = _ref9$iosStyle.isIOS,
-    marginLeft = _ref9$iosStyle.marginLeft,
-    marginTop = _ref9$iosStyle.marginTop,
-    width = _ref9.width,
-    height = _ref9.height,
-    data = _ref9.data,
-    judge = _ref9.judge,
-    currentIndex = _ref9.currentIndex;
+    } : _ref18$config$name$tr,
+    maxWidth = _ref18$config$name.maxWidth,
+    textOverflow = _ref18$config$name.textOverflow,
+    speed = _ref18$config$name.speed,
+    _ref18$config$percent = _ref18$config.percent,
+    showPercent = _ref18$config$percent.show,
+    percentColor = _ref18$config$percent.sameColor,
+    percentFont = _ref18$config$percent.font,
+    precision = _ref18$config$percent.precision,
+    _ref18$config$percent2 = _ref18$config$percent.translate,
+    translatePercentX = _ref18$config$percent2.x,
+    translatePercentY = _ref18$config$percent2.y,
+    _ref18$config$value = _ref18$config.value,
+    showValue = _ref18$config$value.show,
+    valueColor = _ref18$config$value.sameColor,
+    valueFont = _ref18$config$value.font,
+    _ref18$config$value$t = _ref18$config$value.translate,
+    translateValueX = _ref18$config$value$t.x,
+    translateValueY = _ref18$config$value$t.y,
+    _ref18$config$value$s = _ref18$config$value.suffix,
+    showSuffix = _ref18$config$value$s.show,
+    fontSize = _ref18$config$value$s.fontSize,
+    text = _ref18$config$value$s.text,
+    _ref18$config$value$s2 = _ref18$config$value$s.translate,
+    translateSuffixX = _ref18$config$value$s2.x,
+    translateSuffixY = _ref18$config$value$s2.y,
+    _ref18$iosStyle = _ref18.iosStyle,
+    isIOS = _ref18$iosStyle.isIOS,
+    marginLeft = _ref18$iosStyle.marginLeft,
+    marginTop = _ref18$iosStyle.marginTop,
+    width = _ref18.width,
+    height = _ref18.height,
+    data = _ref18.data,
+    judge = _ref18.judge,
+    currentIndex = _ref18.currentIndex;
   var _data = (0, _react.useMemo)(function () {
     var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
     return (0, _utils.sortPie)(legendDataWithPercent, "");
@@ -1032,51 +1132,51 @@ var Current = function Current(_ref9) {
     })
   }, percent + "%")));
 };
-var Label = function Label(_ref10) {
-  var _ref10$config = _ref10.config,
-    _ref10$config$maxRadi = _ref10$config.maxRadius,
-    maxRadius = _ref10$config$maxRadi === void 0 ? 0 : _ref10$config$maxRadi,
-    lineLength = _ref10$config.lineLength,
-    lineColor = _ref10$config.lineColor,
-    distance = _ref10$config.distance,
-    mode = _ref10$config.mode,
-    align = _ref10$config.align,
-    show = _ref10$config.show,
-    _ref10$config$transla = _ref10$config.translate,
-    translateX = _ref10$config$transla.x,
-    translateY = _ref10$config$transla.y,
-    _ref10$config$name = _ref10$config.name,
-    showName = _ref10$config$name.show,
-    nameFont = _ref10$config$name.font,
-    maxWidth = _ref10$config$name.maxWidth,
-    textOverflow = _ref10$config$name.textOverflow,
-    speed = _ref10$config$name.speed,
-    NameTranslate = _ref10$config$name.translate,
-    _ref10$config$value = _ref10$config.value,
-    showValue = _ref10$config$value.show,
-    valueFont = _ref10$config$value.font,
-    valueSameColor = _ref10$config$value.sameColor,
-    _ref10$config$value$s = _ref10$config$value.suffix,
-    showSuffix = _ref10$config$value$s.show,
-    text = _ref10$config$value$s.text,
-    suffixFontSize = _ref10$config$value$s.fontSize,
-    _ref10$config$value$s2 = _ref10$config$value$s.translate,
-    suffixTranslateX = _ref10$config$value$s2.x,
-    suffixTranslateY = _ref10$config$value$s2.y,
-    ValueTranslate = _ref10$config$value.translate,
-    _ref10$config$percent = _ref10$config.percent,
-    showPercent = _ref10$config$percent.show,
-    percentSameColor = _ref10$config$percent.sameColor,
-    percentFont = _ref10$config$percent.font,
-    precision = _ref10$config$percent.precision,
-    PercentTranslate = _ref10$config$percent.translate,
-    _ref10$iosStyle = _ref10.iosStyle,
-    isIOS = _ref10$iosStyle.isIOS,
-    left = _ref10$iosStyle.left,
-    top = _ref10$iosStyle.top,
-    arcs = _ref10.arcs,
-    judge = _ref10.judge,
-    animation = _ref10.animation;
+var Label = function Label(_ref19) {
+  var _ref19$config = _ref19.config,
+    _ref19$config$maxRadi = _ref19$config.maxRadius,
+    maxRadius = _ref19$config$maxRadi === void 0 ? 0 : _ref19$config$maxRadi,
+    lineLength = _ref19$config.lineLength,
+    lineColor = _ref19$config.lineColor,
+    distance = _ref19$config.distance,
+    mode = _ref19$config.mode,
+    align = _ref19$config.align,
+    show = _ref19$config.show,
+    _ref19$config$transla = _ref19$config.translate,
+    translateX = _ref19$config$transla.x,
+    translateY = _ref19$config$transla.y,
+    _ref19$config$name = _ref19$config.name,
+    showName = _ref19$config$name.show,
+    nameFont = _ref19$config$name.font,
+    maxWidth = _ref19$config$name.maxWidth,
+    textOverflow = _ref19$config$name.textOverflow,
+    speed = _ref19$config$name.speed,
+    NameTranslate = _ref19$config$name.translate,
+    _ref19$config$value = _ref19$config.value,
+    showValue = _ref19$config$value.show,
+    valueFont = _ref19$config$value.font,
+    valueSameColor = _ref19$config$value.sameColor,
+    _ref19$config$value$s = _ref19$config$value.suffix,
+    showSuffix = _ref19$config$value$s.show,
+    text = _ref19$config$value$s.text,
+    suffixFontSize = _ref19$config$value$s.fontSize,
+    _ref19$config$value$s2 = _ref19$config$value$s.translate,
+    suffixTranslateX = _ref19$config$value$s2.x,
+    suffixTranslateY = _ref19$config$value$s2.y,
+    ValueTranslate = _ref19$config$value.translate,
+    _ref19$config$percent = _ref19$config.percent,
+    showPercent = _ref19$config$percent.show,
+    percentSameColor = _ref19$config$percent.sameColor,
+    percentFont = _ref19$config$percent.font,
+    precision = _ref19$config$percent.precision,
+    PercentTranslate = _ref19$config$percent.translate,
+    _ref19$iosStyle = _ref19.iosStyle,
+    isIOS = _ref19$iosStyle.isIOS,
+    left = _ref19$iosStyle.left,
+    top = _ref19$iosStyle.top,
+    arcs = _ref19.arcs,
+    judge = _ref19.judge,
+    animation = _ref19.animation;
   var _arcs = (0, _react.useMemo)(function () {
     return (0, _utils.getDataWithPercent)(arcs, precision);
   }, [arcs, precision]);
@@ -1086,18 +1186,54 @@ var Label = function Label(_ref10) {
       d.percent = 0;
     });
   }
-  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref11, index) {
-    var _ref11$series$color = _ref11.series.color,
-      type = _ref11$series$color.type,
-      pure = _ref11$series$color.pure,
-      stops = _ref11$series$color.linear.stops,
-      data = _ref11.data,
-      displayName = _ref11.displayName,
-      value = _ref11.value,
-      percent = _ref11.percent,
-      arc = _ref11.arc,
-      outerRadius = _ref11.outerRadius,
-      actualIndex = _ref11.index;
+  var isHorizontal = mode === "horizontal";
+  var labelElsRef = (0, _react.useRef)({});
+  var _useState7 = (0, _react.useState)({}),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    measuredHeights = _useState8[0],
+    setMeasuredHeights = _useState8[1];
+
+  // 上下布局：渲染后读取每个标签真实高度（仅在高度变化时更新，避免死循环）
+  (0, _react.useLayoutEffect)(function () {
+    if (isHorizontal) {
+      setMeasuredHeights(function (prev) {
+        return Object.keys(prev).length ? {} : prev;
+      });
+      return;
+    }
+    setMeasuredHeights(function (prev) {
+      var next = {};
+      var changed = false;
+      Object.keys(labelElsRef.current).forEach(function (key) {
+        var el = labelElsRef.current[key];
+        if (!el) return;
+        var h = Math.round(el.getBoundingClientRect().height);
+        if (!h) return;
+        next[key] = h;
+        if (prev[key] !== h) changed = true;
+      });
+      var prevKeys = Object.keys(prev);
+      var nextKeys = Object.keys(next);
+      if (prevKeys.length !== nextKeys.length) changed = true;
+      return changed ? next : prev;
+    });
+  }, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
+  var placedYBySide = {
+    left: [],
+    right: []
+  };
+  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref20, index) {
+    var _ref20$series$color = _ref20.series.color,
+      type = _ref20$series$color.type,
+      pure = _ref20$series$color.pure,
+      stops = _ref20$series$color.linear.stops,
+      data = _ref20.data,
+      displayName = _ref20.displayName,
+      value = _ref20.value,
+      percent = _ref20.percent,
+      arc = _ref20.arc,
+      outerRadius = _ref20.outerRadius,
+      actualIndex = _ref20.index;
     var _arc$centroid = arc.centroid(),
       _arc$centroid2 = (0, _slicedToArray2["default"])(_arc$centroid, 2),
       x = _arc$centroid2[0],
@@ -1118,30 +1254,48 @@ var Label = function Label(_ref10) {
     var _showName = showName && displayName;
     var _showValue = showValue && (value || showSuffix);
     var nameStyle = (0, _utils.getFontStyle)(nameFont);
-    return show && (_showName || showPercent || showValue) && /*#__PURE__*/_react["default"].createElement("g", {
+    var shouldShow = show && (_showName || showPercent || showValue);
+    // 与真实渲染一致：showValue 开启时值为 0 也会渲染
+    var labelSizeOptions = {
+      showName: _showName,
+      showValue: showValue,
+      showPercent: showPercent,
+      nameFont: nameFont,
+      valueFont: valueFont,
+      percentFont: percentFont
+    };
+    var estimatedHeight = isHorizontal ? getLabelRowHeight(labelSizeOptions) : getLabelColumnHeight(labelSizeOptions);
+    // 上下布局优先用 DOM 实测高度
+    var labelHeight = !isHorizontal && measuredHeights[index] != null ? measuredHeights[index] : estimatedHeight;
+    var side = x2 < 0 ? "left" : "right";
+    var finalY = shouldShow ? isHorizontal ? resolveLabelY(y2, side, placedYBySide, labelHeight) : resolveLabelYVertical(y2, side, placedYBySide, labelHeight) : y2;
+    return shouldShow && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("path", {
       className: animation ? _piechartModule["default"]["label-line"] : "",
       style: {
         animationDelay: "".concat(animation ? (actualIndex + 1) * ringDuration - labelDuration : 0, "ms")
       },
-      d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + y2 + "L" + x3 + ", " + y2,
+      d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + finalY + "L" + x3 + ", " + finalY,
       stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
       fill: "none"
     }), /*#__PURE__*/_react["default"].createElement("foreignObject", {
       width: "1",
       height: "1",
       x: _x,
-      y: y2 + translateY,
+      y: finalY + translateY,
       style: {
         overflow: "visible",
         position: "relative"
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
+      ref: function ref(el) {
+        if (el) labelElsRef.current[index] = el;else delete labelElsRef.current[index];
+      },
       className: animation ? _piechartModule["default"]["label-text"] : "",
       style: {
         position: isIOS ? "absolute" : "relative",
-        transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + y2 + translateY, "px))") : "translate(0,-50%)",
+        transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + finalY + translateY, "px))") : "translate(0,-50%)",
         whiteSpace: "nowrap",
         "float": x3 >= 0 ? "left" : "right",
         width: "max-content",
@@ -1190,53 +1344,53 @@ function getTranslate(translate, reverse) {
     y = translate.y;
   return "translate(".concat(reverse ? -x : x, "px, ").concat(y, "px)");
 }
-var RingLabel = function RingLabel(_ref12) {
-  var _ref12$config = _ref12.config,
-    ringDuration = _ref12$config.ringDuration,
-    labelDuration = _ref12$config.labelDuration,
-    _ref12$config$maxRadi = _ref12$config.maxRadius,
-    maxRadius = _ref12$config$maxRadi === void 0 ? 0 : _ref12$config$maxRadi,
-    lineLength = _ref12$config.lineLength,
-    lineColor = _ref12$config.lineColor,
-    distance = _ref12$config.distance,
-    mode = _ref12$config.mode,
-    _ref12$config$align = _ref12$config.align,
-    align = _ref12$config$align === void 0 ? "center" : _ref12$config$align,
-    show = _ref12$config.show,
-    _ref12$config$transla = _ref12$config.translate,
-    translateX = _ref12$config$transla.x,
-    translateY = _ref12$config$transla.y,
-    _ref12$config$name = _ref12$config.name,
-    showName = _ref12$config$name.show,
-    nameFont = _ref12$config$name.font,
-    maxWidth = _ref12$config$name.maxWidth,
-    textOverflow = _ref12$config$name.textOverflow,
-    speed = _ref12$config$name.speed,
-    nameTranslate = _ref12$config$name.translate,
-    _ref12$config$value = _ref12$config.value,
-    showValue = _ref12$config$value.show,
-    valueFont = _ref12$config$value.font,
-    valueSameColor = _ref12$config$value.sameColor,
-    _ref12$config$value$s = _ref12$config$value.suffix,
-    showSuffix = _ref12$config$value$s.show,
-    text = _ref12$config$value$s.text,
-    suffixFontSize = _ref12$config$value$s.fontSize,
-    _ref12$config$value$s2 = _ref12$config$value$s.translate,
-    suffixTranslateX = _ref12$config$value$s2.x,
-    suffixTranslateY = _ref12$config$value$s2.y,
-    valueTranslate = _ref12$config$value.translate,
-    _ref12$config$percent = _ref12$config.percent,
-    showPercent = _ref12$config$percent.show,
-    percentSameColor = _ref12$config$percent.sameColor,
-    percentFont = _ref12$config$percent.font,
-    precision = _ref12$config$percent.precision,
-    percentTranslate = _ref12$config$percent.translate,
-    _ref12$iosStyle = _ref12.iosStyle,
-    isIOS = _ref12$iosStyle.isIOS,
-    left = _ref12$iosStyle.left,
-    top = _ref12$iosStyle.top,
-    judge = _ref12.judge,
-    arcs = _ref12.arcs;
+var RingLabel = function RingLabel(_ref21) {
+  var _ref21$config = _ref21.config,
+    ringDuration = _ref21$config.ringDuration,
+    labelDuration = _ref21$config.labelDuration,
+    _ref21$config$maxRadi = _ref21$config.maxRadius,
+    maxRadius = _ref21$config$maxRadi === void 0 ? 0 : _ref21$config$maxRadi,
+    lineLength = _ref21$config.lineLength,
+    lineColor = _ref21$config.lineColor,
+    distance = _ref21$config.distance,
+    mode = _ref21$config.mode,
+    _ref21$config$align = _ref21$config.align,
+    align = _ref21$config$align === void 0 ? "center" : _ref21$config$align,
+    show = _ref21$config.show,
+    _ref21$config$transla = _ref21$config.translate,
+    translateX = _ref21$config$transla.x,
+    translateY = _ref21$config$transla.y,
+    _ref21$config$name = _ref21$config.name,
+    showName = _ref21$config$name.show,
+    nameFont = _ref21$config$name.font,
+    maxWidth = _ref21$config$name.maxWidth,
+    textOverflow = _ref21$config$name.textOverflow,
+    speed = _ref21$config$name.speed,
+    nameTranslate = _ref21$config$name.translate,
+    _ref21$config$value = _ref21$config.value,
+    showValue = _ref21$config$value.show,
+    valueFont = _ref21$config$value.font,
+    valueSameColor = _ref21$config$value.sameColor,
+    _ref21$config$value$s = _ref21$config$value.suffix,
+    showSuffix = _ref21$config$value$s.show,
+    text = _ref21$config$value$s.text,
+    suffixFontSize = _ref21$config$value$s.fontSize,
+    _ref21$config$value$s2 = _ref21$config$value$s.translate,
+    suffixTranslateX = _ref21$config$value$s2.x,
+    suffixTranslateY = _ref21$config$value$s2.y,
+    valueTranslate = _ref21$config$value.translate,
+    _ref21$config$percent = _ref21$config.percent,
+    showPercent = _ref21$config$percent.show,
+    percentSameColor = _ref21$config$percent.sameColor,
+    percentFont = _ref21$config$percent.font,
+    precision = _ref21$config$percent.precision,
+    percentTranslate = _ref21$config$percent.translate,
+    _ref21$iosStyle = _ref21.iosStyle,
+    isIOS = _ref21$iosStyle.isIOS,
+    left = _ref21$iosStyle.left,
+    top = _ref21$iosStyle.top,
+    judge = _ref21.judge,
+    arcs = _ref21.arcs;
   var _arcs = (0, _react.useMemo)(function () {
     return (0, _utils.getDataWithPercent)(arcs, precision);
   }, [arcs, precision]);
@@ -1247,18 +1401,54 @@ var RingLabel = function RingLabel(_ref12) {
       d.percent = 0;
     });
   }
-  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref13, index) {
-    var _ref13$series$color = _ref13.series.color,
-      type = _ref13$series$color.type,
-      pure = _ref13$series$color.pure,
-      stops = _ref13$series$color.linear.stops,
-      realData = _ref13.data,
-      displayName = _ref13.displayName,
-      value = _ref13.value,
-      percent = _ref13.percent,
-      arc = _ref13.arc,
-      outerRadius = _ref13.outerRadius,
-      actualIndex = _ref13.index;
+  var isHorizontal = mode === "horizontal";
+  var labelElsRef = (0, _react.useRef)({});
+  var _useState9 = (0, _react.useState)({}),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    measuredHeights = _useState10[0],
+    setMeasuredHeights = _useState10[1];
+
+  // 上下布局：渲染后读取每个标签真实高度（仅在高度变化时更新，避免死循环）
+  (0, _react.useLayoutEffect)(function () {
+    if (isHorizontal) {
+      setMeasuredHeights(function (prev) {
+        return Object.keys(prev).length ? {} : prev;
+      });
+      return;
+    }
+    setMeasuredHeights(function (prev) {
+      var next = {};
+      var changed = false;
+      Object.keys(labelElsRef.current).forEach(function (key) {
+        var el = labelElsRef.current[key];
+        if (!el) return;
+        var h = Math.round(el.getBoundingClientRect().height);
+        if (!h) return;
+        next[key] = h;
+        if (prev[key] !== h) changed = true;
+      });
+      var prevKeys = Object.keys(prev);
+      var nextKeys = Object.keys(next);
+      if (prevKeys.length !== nextKeys.length) changed = true;
+      return changed ? next : prev;
+    });
+  }, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
+  var placedYBySide = {
+    left: [],
+    right: []
+  };
+  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref22, index) {
+    var _ref22$series$color = _ref22.series.color,
+      type = _ref22$series$color.type,
+      pure = _ref22$series$color.pure,
+      stops = _ref22$series$color.linear.stops,
+      realData = _ref22.data,
+      displayName = _ref22.displayName,
+      value = _ref22.value,
+      percent = _ref22.percent,
+      arc = _ref22.arc,
+      outerRadius = _ref22.outerRadius,
+      actualIndex = _ref22.index;
     var _arc$centroid3 = arc.centroid(),
       _arc$centroid4 = (0, _slicedToArray2["default"])(_arc$centroid3, 2),
       x = _arc$centroid4[0],
@@ -1274,35 +1464,52 @@ var RingLabel = function RingLabel(_ref12) {
       x2 = _getCoord8[0],
       y2 = _getCoord8[1];
     var directionX = x2 < 0 ? -1 : 1;
-    var directionY = y2 < 0 ? -1 : 1;
     var x3 = x2 + lineLength * directionX;
     var _x = x3 + (translateX + 6) * directionX;
     var _showName = showName && displayName;
     var _showValue = showValue && (value || showSuffix);
-    return show && (_showName || showPercent || _showValue) && /*#__PURE__*/_react["default"].createElement("g", {
+    var shouldShow = show && (_showName || showPercent || _showValue);
+    // 与真实渲染一致：showValue 开启时值为 0 也会渲染
+    var labelSizeOptions = {
+      showName: _showName,
+      showValue: showValue,
+      showPercent: showPercent,
+      nameFont: nameFont,
+      valueFont: valueFont,
+      percentFont: percentFont
+    };
+    var estimatedHeight = isHorizontal ? getLabelRowHeight(labelSizeOptions) : getLabelColumnHeight(labelSizeOptions);
+    // 上下布局优先用 DOM 实测高度
+    var labelHeight = !isHorizontal && measuredHeights[index] != null ? measuredHeights[index] : estimatedHeight;
+    var side = x2 < 0 ? "left" : "right";
+    var finalY = shouldShow ? isHorizontal ? resolveLabelY(y2, side, placedYBySide, labelHeight) : resolveLabelYVertical(y2, side, placedYBySide, labelHeight) : y2;
+    return shouldShow && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("path", {
       className: _piechartModule["default"]["label-line"],
       style: {
         animationDelay: "".concat((actualIndex + 1) * ringDuration - labelDuration, "ms")
       },
-      d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + y2 + "L" + x3 + ", " + y2,
+      d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + finalY + "L" + x3 + ", " + finalY,
       stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
       fill: "none"
     }), /*#__PURE__*/_react["default"].createElement("foreignObject", {
       width: "1",
       height: "1",
       x: _x,
-      y: y2 + translateY,
+      y: finalY + translateY,
       style: {
         overflow: "visible",
         position: "relative"
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
+      ref: function ref(el) {
+        if (el) labelElsRef.current[index] = el;else delete labelElsRef.current[index];
+      },
       className: _piechartModule["default"]["label-text"],
       style: {
         position: isIOS ? "absolute" : "relative",
-        transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + y2 + translateY, "px))") : "translate(0,-50%)",
+        transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + finalY + translateY, "px))") : "translate(0,-50%)",
         whiteSpace: "nowrap",
         "float": x3 >= 0 ? "left" : "right",
         width: "max-content",