@easyv/charts 1.5.18 → 1.5.20

package/lib/components/PieChart.js

@@ -350,6 +350,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       id = _useContext.id,
+      isIOS = _useContext.isIOS,
       chartWidth = _useContext.width,
       chartHeight = _useContext.height,
       triggerOnRelative = _useContext.triggerOnRelative,
@@ -658,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, {
@@ -787,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", {
@@ -796,8 +807,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(Current, {
     config: current,
-    width: width,
-    height: height,
+    width: chartWidth,
+    height: chartHeight,
+    iosStyle: {
+      marginLeft: marginLeft,
+      marginTop: marginTop,
+      isIOS: isIOS
+    },
     data: _arcs,
     judge: judgeData,
     currentIndex: +currentIndex
@@ -867,6 +883,10 @@ var Current = function Current(_ref9) {
       _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,
@@ -897,17 +917,20 @@ var Current = function Current(_ref9) {
     //foreignObject标签样式，
     width: width,
     height: height,
-    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
+    position: "relative",
+    overflow: "visible",
     pointerEvents: "none"
   },
       boxStyle = {
     //弹性盒子样式，用于当前值的上下居中对齐等
     width: width,
     height: height,
+    position: "absolute",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    transform: isIOS ? "translate(".concat(marginLeft, "px,").concat(marginTop, "px)") : "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)")
   };
   var seriesColor = currentData.series.color;
   seriesColor = seriesColor.type == "pure" ? seriesColor.pure : seriesColor.linear.stops[0].color;
@@ -984,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;
@@ -1057,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,
@@ -1123,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;
 
@@ -1195,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.18",
+  "version": "1.5.20",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/PieChart.js

@@ -295,6 +295,7 @@ const Component = memo(
     const { precision: legendPrecision } = legend.config.percent;
     const {
       id,
+      isIOS,
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative,
@@ -601,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}
               />
@@ -818,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}
@@ -826,8 +828,11 @@ const Component = memo(
               >
                 <Current
                   config={current}
-                  width={width}
-                  height={height}
+                  width={chartWidth}
+                  height={chartHeight}
+                  iosStyle={{
+                    marginLeft, marginTop, isIOS
+                  }}
                   data={_arcs}
                   judge={judgeData}
                   currentIndex={+currentIndex}
@@ -910,6 +915,9 @@ const Current = ({
       },
     },
   },
+  iosStyle:{
+    isIOS, marginLeft, marginTop
+  },
   width,
   height,
   data,
@@ -939,17 +947,20 @@ const Current = ({
       //foreignObject标签样式，
       width,
       height,
-      transform: `translate(-${width / 2}px,-${height / 2}px)`,
+      position:"relative",
+      overflow:"visible",
       pointerEvents: "none",
     },
     boxStyle = {
       //弹性盒子样式，用于当前值的上下居中对齐等
       width,
       height,
+      position:"absolute",
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
       alignItems: "center",
+      transform: isIOS?`translate(${marginLeft}px,${marginTop}px)`:`translate(-${width / 2}px,-${height / 2}px)`,
     };
   let seriesColor = currentData.series.color;
   seriesColor =
@@ -1060,6 +1071,9 @@ const Label = ({
     },
     percent: { show: showPercent, font: percentFont, precision },
   },
+  iosStyle:{
+    isIOS, left, top
+  },
   arcs,
   judge,
   animation,
@@ -1115,7 +1129,6 @@ const Label = ({
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
           const nameStyle = getFontStyle(nameFont);
-
           return (
             show &&
             (_showName || showPercent || showValue) && (
@@ -1155,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 && (
@@ -1238,6 +1254,9 @@ const RingLabel = ({
     },
     percent: { show: showPercent, font: percentFont, precision },
   },
+  iosStyle:{
+    isIOS, left, top
+  },
   judge,
   arcs,
 }) => {
@@ -1332,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 && (