@easyv/charts 1.0.74 → 1.0.75

package/lib/components/PieChart.js

@@ -625,7 +625,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       textAnchor: "middle",
       style: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
         fontWeight: categoryTextStyle.bold ? "bold" : "normal",
-        fontStyle: categoryTextStyle.italic ? "italic" : "normal"
+        fontStyle: categoryTextStyle.italic ? "italic" : "normal",
+        pointerEvents: "none"
       }),
       fill: categoryTextStyle.color
     }, /*#__PURE__*/_react["default"].createElement("textPath", {
@@ -647,6 +648,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(Current, {
     config: current,
+    width: width,
+    height: height,
     data: _arcs,
     currentIndex: +currentIndex
   })))), decorate && /*#__PURE__*/_react["default"].createElement(_.ConicalGradient, {
@@ -691,6 +694,8 @@ 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,
+      width = _ref9.width,
+      height = _ref9.height,
       data = _ref9.data,
       currentIndex = _ref9.currentIndex;
 
@@ -720,20 +725,21 @@ var Current = function Current(_ref9) {
   nameList.push(nameTemp);
   var foreignStyle = {
     //foreignObject标签样式，
-    width: "100%",
-    height: "100%",
-    transform: "translate(-50%,-50%)"
+    width: width,
+    height: height,
+    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
+    pointerEvents: "none"
   },
       boxStyle = {
     //弹性盒子样式，用于当前值的上下居中对齐等
-    width: "100%",
-    height: '100%',
+    width: width,
+    height: height,
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center"
   };
-  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+  return show && /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: foreignStyle
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: boxStyle
@@ -767,7 +773,7 @@ var Current = function Current(_ref9) {
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       margin: gap / 2 + "px 0"
     })
-  }, percent + '%'))));
+  }, percent + '%')));
 };
 
 var Label = function Label(_ref10) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.0.74",
+  "version": "1.0.75",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
     "load-styles": "^2.0.0"
   },
   "dependencies": {
-    "@easyv/utils": "^0.0.26",
+    "@easyv/utils": "^0.0.33",
     "d3v7": "npm:d3@^7.0.0",
     "popmotion": "^9.3.6",
     "react": "^17.0.2",

package/src/components/PieChart.js

@@ -572,7 +572,8 @@ const Component = memo(
                           style={{
                             ...categoryTextStyle,
                             fontWeight:categoryTextStyle.bold?"bold":"normal",
-                            fontStyle:categoryTextStyle.italic?"italic":"normal"
+                            fontStyle:categoryTextStyle.italic?"italic":"normal",
+                            pointerEvents:"none"
                           }}
                           fill={categoryTextStyle.color}
                         >
@@ -599,9 +600,11 @@ const Component = memo(
             )}
             {label && <Label config={label} arcs={_arcs} />}
             {current && (
-              <g fillOpacity={y} style={{transform:"rotate("+(-rotate_)+"deg)"}}>
+              <g fillOpacity={y} style={{ transform:"rotate("+(-rotate_)+"deg)" }}>
                 <Current
                   config={current}
+                  width={width}
+                  height={height}
                   data={_arcs}
                   currentIndex={+currentIndex}
                 />
@@ -649,6 +652,8 @@ const Current = ({
       },
     },
   },
+  width,
+  height,
   data,
   currentIndex,
 }) => {
@@ -671,13 +676,14 @@ const Current = ({
   }
   nameList.push(nameTemp)
   let foreignStyle={    //foreignObject标签样式，
-    width:"100%",
-    height:"100%",
-    transform:"translate(-50%,-50%)",
+    width,
+    height,
+    transform:`translate(-${width/2}px,-${height/2}px)`,
+    pointerEvents:"none"
   },
   boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width:"100%",
-    height:'100%',
+    width,
+    height,
     display:"flex",
     flexDirection:"column",
     justifyContent:"center",
@@ -686,59 +692,57 @@ const Current = ({
 
   return (
     show && (
-      <>
-        <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>
-            }
-            { //真实值
-              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>
-            }
-            { //百分比值
-              showPercent && <span
-                style={{
-                  transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
-                  ...getFontStyle(percentFont),
-                  margin:gap/2+"px 0"
-                }}
-              >
-                {percent + '%'}
-              </span>
-            }
-          </div>
-        </foreignObject>
-      </>
+      <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>
+          }
+          { //真实值
+            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>
+          }
+          { //百分比值
+            showPercent && <span
+              style={{
+                transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
+                ...getFontStyle(percentFont),
+                margin:gap/2+"px 0"
+              }}
+            >
+              {percent + '%'}
+            </span>
+          }
+        </div>
+      </foreignObject>
     )
   );
 };