@easyv/charts 1.0.54 → 1.0.58

package/lib/components/PieChart.js

@@ -670,6 +670,7 @@ var Current = function Current(_ref9) {
       _ref9$config$name = _ref9$config.name,
       showName = _ref9$config$name.show,
       nameFont = _ref9$config$name.font,
+      textBreak = _ref9$config$name.textBreak,
       _ref9$config$percent = _ref9$config.percent,
       showPercent = _ref9$config$percent.show,
       percentFont = _ref9$config$percent.font,
@@ -704,22 +705,69 @@ var Current = function Current(_ref9) {
       fieldName = currentData.fieldName,
       value = currentData.value,
       percent = currentData.percent;
-  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showName && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showValue && showPercent ? -1 : showValue || showPercent ? -0.5 : 0) * gap
-  }, (0, _utils.getFontStyle)(nameFont, 'svg')), displayName || fieldName), showValue && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showName && showPercent ? 0 : showName && !showPercent ? 0.5 : showPercent ? -0.5 : 0) * gap + translateValueY,
-    dx: translateValueX
-  }, (0, _utils.getFontStyle)(valueFont, 'svg')), value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("tspan", {
-    dx: translateSuffixX,
-    dy: translateSuffixY,
-    fontSize: fontSize
-  }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({
-    textAnchor: "middle",
-    dy: (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) * gap + translatePercentY,
-    dx: translatePercentX
-  }, (0, _utils.getFontStyle)(percentFont, 'svg')), percent + '%'));
+  var nameTemp = displayName ? displayName : fieldName; //类目名
+
+  var nameList = [];
+
+  if (textBreak) {
+    //如果限制了首行字符，则切割组件
+    while (nameTemp.length > textBreak) {
+      nameList.push(nameTemp.slice(0, textBreak));
+      nameTemp = nameTemp.slice(textBreak);
+    }
+  }
+
+  nameList.push(nameTemp);
+  var foreignStyle = {
+    //foreignObject标签样式，
+    width: "100%",
+    height: "100%",
+    transform: "translate(-50%,-50%)"
+  },
+      boxStyle = {
+    //弹性盒子样式，用于当前值的上下居中对齐等
+    width: "100%",
+    height: '100%',
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: foreignStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: boxStyle
+  }, //类目名称
+  showName && /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(nameFont)), {}, {
+      margin: gap / 2 + "px 0",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    })
+  }, nameList.map(function (d, i) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      key: i
+    }, d);
+  })), //真实值
+  showValue && /*#__PURE__*/_react["default"].createElement("span", {
+    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
+      transform: "translate(" + translateValueX + "px," + translateValueY + "px)",
+      margin: gap / 2 + "px 0"
+    })
+  }, value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      transform: "translate(" + translateSuffixX + "px," + translateSuffixY + "px)",
+      fontSize: fontSize
+    }
+  }, text)), //百分比值
+  showPercent && /*#__PURE__*/_react["default"].createElement("span", {
+    style: _objectSpread(_objectSpread({
+      transform: "translate(" + translatePercentX + "px," + translatePercentY + ")"
+    }, (0, _utils.getFontStyle)(percentFont)), {}, {
+      margin: gap / 2 + "px 0"
+    })
+  }, percent + '%'))));
 };
 
 var Label = function Label(_ref10) {

package/lib/components/Tooltip.js

@@ -43,20 +43,20 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       formatter = _ref.formatter,
       isVertical = _ref.isVertical;
   var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
-    y: translateTip.x + position
+    y: translateTip.y + position
   }) : _objectSpread(_objectSpread({}, translateTip), {}, {
     x: translateTip.x + position
   });
   return /*#__PURE__*/React.createElement("div", {
     className: "__easyv-tooltip",
-    style: {
+    style: _objectSpread({
       pointerEvents: 'none',
       transform: (0, _utils.getTranslate3d)(translate3d),
       width: width,
       height: height,
       padding: (0, _utils.getMargin)(margin),
       background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : 'rgba(48, 55, 66, 0.85)'
-    }
+    }, (0, _utils.getFontStyle)(font))
   }, formatter ? formatter({
     series: series,
     lineHeight: lineHeight,

package/lib/formatter/legend.js

@@ -58,9 +58,11 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
   }), /*#__PURE__*/React.createElement("span", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle
   }, showName && /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       paddingLeft: 5
-    }, (0, _utils.getFontStyle)(nameFont))
+    }, (0, _utils.getFontStyle)(nameFont)), {}, {
+      whiteSpace: "nowrap"
+    })
   }, displayName), showValue && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,

package/package.json

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

package/src/components/PieChart.js

@@ -630,7 +630,7 @@ const Current = ({
   config: {
     show,
     gap,
-    name: { show: showName, font: nameFont },
+    name: { show: showName, font: nameFont, textBreak },
     percent: {
       show: showPercent,
       font: percentFont,
@@ -661,68 +661,83 @@ const Current = ({
   if (!currentData) return null;
 
   const { displayName, fieldName, value, percent } = currentData;
+  let nameTemp = displayName? displayName : fieldName;  //类目名
+  let nameList = [];
+  if(textBreak){    //如果限制了首行字符，则切割组件
+    while(nameTemp.length>textBreak){
+      nameList.push(nameTemp.slice(0,textBreak));
+      nameTemp = nameTemp.slice(textBreak)
+    }
+  }
+  nameList.push(nameTemp)
+  let foreignStyle={    //foreignObject标签样式，
+    width:"100%",
+    height:"100%",
+    transform:"translate(-50%,-50%)",
+  },
+  boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
+    width:"100%",
+    height:'100%',
+    display:"flex",
+    flexDirection:"column",
+    justifyContent:"center",
+    alignItems:"center"
+  }
 
   return (
     show && (
       <>
-        {showName && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showValue && showPercent
-                ? -1
-                : showValue || showPercent
-                ? -0.5
-                : 0) * gap
+        <foreignObject style={foreignStyle}>
+          <div style={boxStyle}>
+            { //类目名称
+              showName && <div 
+                style={{
+                  ...getFontStyle(nameFont),
+                  margin:gap/2+"px 0",
+                  display:"flex",
+                  flexDirection:"column",
+                  alignItems:"center"
+                }}>
+                {
+                  nameList.map((d,i)=>{
+                    return <span key={i}>{d}</span>
+                  })
+                }
+              </div>
             }
-            {...getFontStyle(nameFont, 'svg')}
-          >
-            {displayName || fieldName}
-          </text>
-        )}
-        {showValue && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showPercent
-                ? 0
-                : showName && !showPercent
-                ? 0.5
-                : showPercent
-                ? -0.5
-                : 0) *
-                gap +
-              translateValueY
+            { //真实值
+              showValue && <span 
+                style={{
+                  ...getFontStyle(valueFont),
+                  transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
+                  margin:gap/2+"px 0"
+                }}>
+                {value}
+                {showSuffix && text && (
+                  <span
+                    style={{
+                      transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
+                      fontSize:fontSize
+                    }}
+                  >
+                    {text}
+                  </span>
+                )}
+              </span>
             }
-            dx={translateValueX}
-            {...getFontStyle(valueFont, 'svg')}
-          >
-            {value}
-            {showSuffix && text && (
-              <tspan
-                dx={translateSuffixX}
-                dy={translateSuffixY}
-                fontSize={fontSize}
+            { //百分比值
+              showPercent && <span
+                style={{
+                  transform:"translate("+translatePercentX+"px,"+translatePercentY+")",
+                  ...getFontStyle(percentFont),
+                  margin:gap/2+"px 0"
+                }}
               >
-                {text}
-              </tspan>
-            )}
-          </text>
-        )}
-        {showPercent && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) *
-                gap +
-              translatePercentY
+                {percent + '%'}
+              </span>
             }
-            dx={translatePercentX}
-            {...getFontStyle(percentFont, 'svg')}
-          >
-            {percent + '%'}
-          </text>
-        )}
+          </div>
+        </foreignObject>
       </>
     )
   );
@@ -759,7 +774,7 @@ const Label = ({
   arcs,
   animation
 }) => {
-  // const [labels, setLabels] = useState(null);
+   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
 
   const _arcs = useMemo(
@@ -803,11 +818,11 @@ const Label = ({
   //     console.log('bbox: ', bbox);
   //   }
   // }, [labels]);
-  
+
   return (
     <g
-    // style={{ opacity }} ref={setLabels}
-    >
+       // style={{ opacity }} ref={setLabels}
+      >
       {_arcs.map(
         (
           {

package/src/components/Tooltip.js

@@ -32,7 +32,7 @@ export default memo(
     const translate3d = isVertical
       ? {
           ...translateTip,
-          y: translateTip.x + position,
+          y: translateTip.y + position,
         }
       : {
           ...translateTip,

package/src/formatter/legend.js

@@ -42,7 +42,7 @@ export const pieLegendFormatter = (
         }
       >
         {showName && (
-          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont) }}>
+          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont), whiteSpace:"nowrap" }}>
             {displayName}
           </span>
         )}