@easyv/charts 1.8.18 → 1.8.20

package/lib/components/PieChart.js

@@ -936,6 +936,7 @@ var Label = function Label(_ref10) {
     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,
@@ -946,6 +947,7 @@ var Label = function Label(_ref10) {
     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,
@@ -957,11 +959,13 @@ var Label = function Label(_ref10) {
     _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,
@@ -1039,7 +1043,7 @@ var Label = function Label(_ref10) {
         width: "max-content",
         display: "flex",
         flexDirection: mode == "horizontal" ? "row" : "column",
-        alignItems: "center",
+        alignItems: align == "left" ? "flex-start" : align == "center" ? "center" : "flex-end",
         justifyContent: "center"
       }
     }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
@@ -1049,11 +1053,13 @@ var Label = function Label(_ref10) {
       style: _objectSpread(_objectSpread({
         maxWidth: maxWidth
       }, nameStyle), {}, {
-        "float": mode == "horizontal" ? "left" : "none"
+        "float": mode == "horizontal" ? "left" : "none",
+        transform: "translate(".concat(NameTranslate.x, "px, ").concat(NameTranslate.y, "px)")
       })
     }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
-        color: valueSameColor ? pure : valueFont.color
+        color: valueSameColor ? pure : valueFont.color,
+        transform: "translate(".concat(ValueTranslate.x, "px, ").concat(ValueTranslate.y, "px)")
       })
     }, data.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -1064,7 +1070,8 @@ var Label = function Label(_ref10) {
       }
     }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
-        color: percentSameColor ? pure : percentFont.color
+        color: percentSameColor ? pure : percentFont.color,
+        transform: "translate(".concat(PercentTranslate.x, "px, ").concat(PercentTranslate.y, "px)")
       })
     }, (_showValue ? "（" : "") + percent + "%" + (_showValue ? "）" : "")))));
   }));

package/lib/components/Tooltip.js

@@ -66,7 +66,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }
     return (0, _utils.getTranslate3d)(translate3d);
   }, [width, height, marginLeft, marginTop, position, tipWidth, tipHeight, translateTip]);
-  return /*#__PURE__*/React.createElement("div", {
+  return manual ? /*#__PURE__*/React.createElement("div", {
     className: "__easyv-tooltip",
     style: _objectSpread({
       pointerEvents: 'none',
@@ -154,5 +154,5 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         transform: (0, _utils.getTranslate3d)(suffixTranslate)
       })
     }, tmp.get(s))));
-  }))));
+  })))) : "";
 });

package/lib/utils/index.js

@@ -294,7 +294,8 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref7, type) {
     italic = _ref7.italic,
     fontSize = _ref7.fontSize,
     fontFamily = _ref7.fontFamily,
-    letterSpacing = _ref7.letterSpacing;
+    letterSpacing = _ref7.letterSpacing,
+    lineHeight = _ref7.lineHeight;
   if (type == 'svg') {
     return {
       fontSize: fontSize,
@@ -302,7 +303,8 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref7, type) {
       letterSpacing: letterSpacing,
       fill: color,
       fontWeight: bold ? 'bold' : 'normal',
-      fontStyle: italic ? 'italic' : 'normal'
+      fontStyle: italic ? 'italic' : 'normal',
+      lineHeight: lineHeight + "px"
     };
   }
   return {
@@ -311,7 +313,8 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref7, type) {
     letterSpacing: letterSpacing,
     color: color,
     fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal'
+    fontStyle: italic ? 'italic' : 'normal',
+    lineHeight: lineHeight + "px" //不加px默认是倍数关系
   };
 };
 var formatFont = exports.formatFont = function formatFont(_ref8, type) {

package/package.json

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

package/src/components/PieChart.js

@@ -1103,9 +1103,10 @@ const Label = ({
     lineColor,
     distance,
     mode,
+    align,
     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,
@@ -1116,12 +1117,14 @@ const Label = ({
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
       },
+      translate:ValueTranslate
     },
     percent: {
       show: showPercent,
       sameColor: percentSameColor,
       font: percentFont,
       precision,
+      translate:PercentTranslate
     },
   },
   iosStyle: { isIOS, left, top },
@@ -1237,7 +1240,7 @@ const Label = ({
                       width: "max-content",
                       display: "flex",
                       flexDirection: mode == "horizontal" ? "row" : "column",
-                      alignItems: "center",
+                      alignItems: align=="left"?"flex-start":align=="center"?"center":"flex-end",
                       justifyContent: "center",
                     }}
                   >
@@ -1252,6 +1255,7 @@ const Label = ({
                           maxWidth,
                           ...nameStyle,
                           float: mode == "horizontal" ? "left" : "none",
+                          transform: `translate(${NameTranslate.x}px, ${NameTranslate.y}px)`
                         }}
                       ></TextOverflow>
                     )}
@@ -1260,6 +1264,7 @@ const Label = ({
                         style={{
                           ...getFontStyle(valueFont),
                           color: valueSameColor ? pure : valueFont.color,
+                          transform: `translate(${ValueTranslate.x}px, ${ValueTranslate.y}px)`
                         }}
                       >
                         {data.y}
@@ -1282,6 +1287,7 @@ const Label = ({
                         style={{
                           ...getFontStyle(percentFont),
                           color: percentSameColor ? pure : percentFont.color,
+                          transform: `translate(${PercentTranslate.x}px, ${PercentTranslate.y}px)`,
                         }}
                       >
                         {(_showValue ? "（" : "") +

package/src/components/Tooltip.js

@@ -64,7 +64,7 @@ export default memo(
       translateTip,
     ]);
     return (
-      <div
+      manual?<div
         className='__easyv-tooltip'
         style={{
           pointerEvents: 'none',
@@ -175,7 +175,7 @@ export default memo(
             
           </div>
         )}
-      </div>
+      </div>:""
     );
   }
 );

package/src/types/index.d.ts

@@ -53,6 +53,7 @@ type Font = {
   fontSize: number;
   italic: boolean;
   letterSpacing: number;
+  lineHeight:number
 };
 
 type Align = { textAnchor: string; dominantBaseline: string };

package/src/utils/index.js

@@ -265,7 +265,7 @@ const getMousePos = (evt, dom) => {
 };
 
 const getFontStyle = (
-  { color, bold, italic, fontSize, fontFamily, letterSpacing },
+  { color, bold, italic, fontSize, fontFamily, letterSpacing,lineHeight },
   type
 ) => {
   if (type == 'svg') {
@@ -276,6 +276,7 @@ const getFontStyle = (
       fill: color,
       fontWeight: bold ? 'bold' : 'normal',
       fontStyle: italic ? 'italic' : 'normal',
+      lineHeight:lineHeight+"px"
     };
   }
   return {
@@ -285,6 +286,7 @@ const getFontStyle = (
     color,
     fontWeight: bold ? 'bold' : 'normal',
     fontStyle: italic ? 'italic' : 'normal',
+    lineHeight:lineHeight+"px"//不加px默认是倍数关系
   };
 };
 const formatFont=({ color, fill, bold, italic, ...rest },