@easyv/charts 1.5.19 → 1.5.20

package/lib/components/PieChart.js

@@ -659,6 +659,11 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     config: _objectSpread(_objectSpread({}, label), {}, {
       maxRadius: maxRadius + 2
     }),
+    iosStyle: {
+      isIOS: isIOS,
+      left: halfChartWidth + marginLeft,
+      top: halfChartHeight + marginTop
+    },
     arcs: _arcs,
     judge: judgeData
   }))), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
@@ -788,6 +793,11 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     })));
   }), label && /*#__PURE__*/_react["default"].createElement(Label, {
     config: label,
+    iosStyle: {
+      isIOS: isIOS,
+      left: halfChartWidth + marginLeft,
+      top: halfChartHeight + marginTop
+    },
     arcs: _arcs,
     judge: judgeData
   }), current && /*#__PURE__*/_react["default"].createElement("g", {
@@ -997,6 +1007,10 @@ var Label = function Label(_ref10) {
       showPercent = _ref10$config$percent.show,
       percentFont = _ref10$config$percent.font,
       precision = _ref10$config$percent.precision,
+      _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;
@@ -1070,15 +1084,19 @@ var Label = function Label(_ref10) {
       x: _x,
       y: y2 + translateY,
       style: {
-        overflow: "visible"
+        overflow: "visible",
+        position: "relative"
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: animation ? _piechartModule["default"]["label-text"] : "",
       style: {
-        transform: "translate(0,-50%)",
+        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%)",
         whiteSpace: "nowrap",
         "float": x3 >= 0 ? "left" : "right",
-        width: "max-content"
+        width: "max-content",
+        display: "flex",
+        alignItems: "center"
       }
     }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
       type: textOverflow,
@@ -1136,6 +1154,10 @@ var RingLabel = function RingLabel(_ref12) {
       showPercent = _ref12$config$percent.show,
       percentFont = _ref12$config$percent.font,
       precision = _ref12$config$percent.precision,
+      _ref12$iosStyle = _ref12.iosStyle,
+      isIOS = _ref12$iosStyle.isIOS,
+      left = _ref12$iosStyle.left,
+      top = _ref12$iosStyle.top,
       judge = _ref12.judge,
       arcs = _ref12.arcs;
 
@@ -1208,16 +1230,20 @@ var RingLabel = function RingLabel(_ref12) {
       x: _x,
       y: y2 + translateY,
       style: {
-        overflow: "visible"
+        overflow: "visible",
+        position: "relative"
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: _piechartModule["default"]["label-text"],
       style: {
-        transform: "translate(0,-50%)",
+        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%)",
         whiteSpace: "nowrap",
         "float": x3 >= 0 ? "left" : "right",
         width: "max-content",
-        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms")
+        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms"),
+        display: "flex",
+        alignItems: "center"
       }
     }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
       type: textOverflow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.5.19",
+  "version": "1.5.20",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/PieChart.js

@@ -602,6 +602,7 @@ const Component = memo(
             {label && (
               <RingLabel
                 config={{ ...label, maxRadius: maxRadius + 2 }}
+                iosStyle={{isIOS, left:halfChartWidth+marginLeft, top:halfChartHeight+marginTop}}
                 arcs={_arcs}
                 judge={judgeData}
               />
@@ -819,7 +820,7 @@ const Component = memo(
                 );
               }
             )}
-            {label && <Label config={label} arcs={_arcs} judge={judgeData} />}
+            {label && <Label config={label} iosStyle={{isIOS, left:halfChartWidth+marginLeft, top:halfChartHeight+marginTop}} arcs={_arcs} judge={judgeData} />}
             {current && (
               <g
                 fillOpacity={y}
@@ -1070,6 +1071,9 @@ const Label = ({
     },
     percent: { show: showPercent, font: percentFont, precision },
   },
+  iosStyle:{
+    isIOS, left, top
+  },
   arcs,
   judge,
   animation,
@@ -1125,7 +1129,6 @@ const Label = ({
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
           const nameStyle = getFontStyle(nameFont);
-
           return (
             show &&
             (_showName || showPercent || showValue) && (
@@ -1165,15 +1168,18 @@ const Label = ({
                   height="1"
                   x={_x}
                   y={y2 + translateY}
-                  style={{ overflow: "visible" }}
+                  style={{ overflow: "visible", position:"relative" }}
                 >
                   <div
                     className={animation ? ringCss["label-text"] : ""}
                     style={{
-                      transform: "translate(0,-50%)",
+                      position:isIOS?"absolute":"relative",
+                      transform: isIOS?`translate(calc(${x3<0?"-100%":"0px"} + ${left+_x}px),calc(-50% + ${top+y2+translateY}px))`:"translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
                       width: "max-content",
+                      display:"flex",
+                      alignItems:"center"
                     }}
                   >
                     {_showName && (
@@ -1248,6 +1254,9 @@ const RingLabel = ({
     },
     percent: { show: showPercent, font: percentFont, precision },
   },
+  iosStyle:{
+    isIOS, left, top
+  },
   judge,
   arcs,
 }) => {
@@ -1342,16 +1351,19 @@ const RingLabel = ({
                   height="1"
                   x={_x}
                   y={y2 + translateY}
-                  style={{ overflow: "visible" }}
+                  style={{ overflow: "visible", position:"relative" }}
                 >
                   <div
                     className={ringCss["label-text"]}
                     style={{
-                      transform: "translate(0,-50%)",
+                      position:isIOS?"absolute":"relative",
+                      transform: isIOS?`translate(calc(${x3<0?"-100%":"0px"} + ${left+_x}px),calc(-50% + ${top+y2+translateY}px))`:"translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
                       width: "max-content",
                       animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                      display:"flex",
+                      alignItems:"center"
                     }}
                   >
                     {_showName && (