@easyv/charts 1.7.38 → 1.8.1

package/lib/components/Legend.js

@@ -162,7 +162,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     style: {
       display: 'grid',
       gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-      gridTemplateColumns: "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px")
+      gridTemplateColumns: formatter ? "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px") : 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)' //饼图或者柱状图配合不同的图例显示格式
     }
   }, _series.map(function (series, index) {
     var _series$config;

package/lib/components/PieChart.js

@@ -1054,6 +1054,16 @@ var Label = function Label(_ref10) {
     }, (_showValue ? "（" : "") + percent + "%" + (_showValue ? "）" : "")))));
   }));
 };
+function getAlign(align, reverse) {
+  if (align == "center") return "center";
+  if (align == "left") return reverse ? "flex-end" : "flex-start";
+  return reverse ? "flex-start" : "flex-end";
+}
+function getTranslate(translate, reverse) {
+  var x = translate.x,
+    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,
@@ -1064,6 +1074,8 @@ var RingLabel = function RingLabel(_ref12) {
     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,
@@ -1074,6 +1086,7 @@ var RingLabel = function RingLabel(_ref12) {
     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,
@@ -1084,10 +1097,12 @@ var RingLabel = function RingLabel(_ref12) {
     _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,
     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,
@@ -1165,7 +1180,9 @@ var RingLabel = function RingLabel(_ref12) {
         width: "max-content",
         animationDelay: "".concat((actualIndex + 1) * ringDuration - labelDuration, "ms"),
         display: "flex",
-        alignItems: "center"
+        flexDirection: mode == "horizontal" ? "row" : "column",
+        alignItems: getAlign(align, x3 >= 0),
+        justifyContent: "center"
       }
     }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
       type: textOverflow,
@@ -1174,10 +1191,13 @@ var RingLabel = function RingLabel(_ref12) {
       style: _objectSpread(_objectSpread({
         maxWidth: maxWidth
       }, (0, _utils.getFontStyle)(nameFont)), {}, {
-        "float": mode == "horizontal" ? "left" : "none"
+        "float": mode == "horizontal" ? "left" : "none",
+        transform: getTranslate(nameTranslate, x3 >= 0)
       })
     }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
-      style: (0, _utils.getFontStyle)(valueFont)
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
+        transform: getTranslate(valueTranslate, x3 >= 0)
+      })
     }, realData.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         position: "relative",
@@ -1186,7 +1206,9 @@ var RingLabel = function RingLabel(_ref12) {
         top: suffixTranslateY
       }
     }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
-      style: (0, _utils.getFontStyle)(percentFont)
+      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
+        transform: getTranslate(percentTranslate, x3 >= 0)
+      })
     }, (_showValue ? "（" : "") + percent + "%" + (_showValue ? "）" : "")))));
   }));
 };

package/package.json

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

package/src/components/Legend.js

@@ -140,7 +140,8 @@ export default memo(
           style={{
             display: 'grid',
             gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-            gridTemplateColumns: `${nameMaxWidth}px ${valueMaxWidth}px ${percentMaxWidth}px`,
+            gridTemplateColumns:formatter?`${nameMaxWidth}px ${valueMaxWidth}px ${percentMaxWidth}px`:
+              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',//饼图或者柱状图配合不同的图例显示格式
           }}
         >
           {_series.map((series, index) => {

package/src/components/PieChart.js

@@ -1241,6 +1241,15 @@ const Label = ({
   );
 };
 
+function getAlign(align, reverse){
+  if(align=="center")return "center";
+  if(align=="left")return reverse?"flex-end":"flex-start";
+  return reverse?"flex-start":"flex-end"
+}
+function getTranslate(translate, reverse){
+  const { x, y } = translate;
+  return `translate(${reverse?-x:x}px, ${y}px)`
+}
 const RingLabel = ({
   config: {
     ringDuration, 
@@ -1250,9 +1259,10 @@ const RingLabel = ({
     lineColor,
     distance,
     mode,
+    align="center",
     show,
     translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed },
+    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed, translate:nameTranslate },
     value: {
       show: showValue,
       font: valueFont,
@@ -1262,8 +1272,9 @@ const RingLabel = ({
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
       },
+      translate:valueTranslate
     },
-    percent: { show: showPercent, font: percentFont, precision },
+    percent: { show: showPercent, font: percentFont, precision, translate:percentTranslate },
   },
   iosStyle:{
     isIOS, left, top
@@ -1374,7 +1385,9 @@ const RingLabel = ({
                       width: "max-content",
                       animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
                       display:"flex",
-                      alignItems:"center"
+                      flexDirection:mode=="horizontal"?"row":"column",
+                      alignItems:getAlign(align, x3>=0),
+                      justifyContent:"center"
                     }}
                   >
                     {_showName && (
@@ -1388,11 +1401,12 @@ const RingLabel = ({
                           maxWidth,
                           ...getFontStyle(nameFont),
                           float: mode == "horizontal" ? "left" : "none",
+                          transform:getTranslate(nameTranslate, x3>=0)
                         }}
                       ></TextOverflow>
                     )}
                     {showValue && (
-                      <span style={getFontStyle(valueFont)}>
+                      <span style={{...getFontStyle(valueFont), transform:getTranslate(valueTranslate, x3>=0)}}>
                         {realData.y}
                         {showSuffix && (
                           <span
@@ -1409,7 +1423,7 @@ const RingLabel = ({
                       </span>
                     )}
                     {showPercent && (
-                      <span style={getFontStyle(percentFont)}>
+                      <span style={{...getFontStyle(percentFont), transform:getTranslate(percentTranslate, x3>=0)}}>
                         {(_showValue ? "（" : "") +
                           percent +
                           "%" +