@easyv/charts 1.8.4 → 1.8.6

package/lib/components/PieChart.js

@@ -305,6 +305,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     });
   });
   var prevIndex = (0, _react.useRef)(null);
+  var domRef = (0, _react.useRef)();
   var legendPrecision = legend.config.percent.precision;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     id = _useContext.id,
@@ -518,7 +519,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     hoverData = _useState6[0],
     setHoverData = _useState6[1];
   var pieWarpEl = (0, _react.useRef)(null);
-  return outerDecorate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+  return outerDecorate ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: domRef
+  }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
   , {
     width: width,
     height: height,
@@ -614,7 +617,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       x: halfChartWidth,
       y: maxRadius + marginTop
     },
-    mousePos: mousePos
+    mousePos: mousePos,
+    domRef: domRef.current ? domRef : null
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {
@@ -624,7 +628,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }),
     formatter: formatter,
     judge: judgeData
-  }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
+  }))) : /*#__PURE__*/_react["default"].createElement("div", {
+    ref: domRef
+  }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     width: width,
     height: height,
     marginLeft: marginLeft,
@@ -778,7 +784,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       x: halfChartWidth,
       y: maxRadius + marginTop
     },
-    mousePos: mousePos
+    mousePos: mousePos,
+    domRef: domRef.current ? domRef : null
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {

package/lib/components/pieTooltip.js

@@ -17,6 +17,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (props) {
   var mousePos = props.mousePos,
+    domRef = props.domRef,
     pieCenter = props.pieCenter,
     _props$config$tip = props.config.tip,
     _props$config$tip$dat = _props$config$tip.data,
@@ -42,6 +43,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     translateTip = _props$config$tip.translate,
     data = props.data,
     series = props.series;
+  var screenRef = domRef.current.getBoundingClientRect();
   var Item = function Item() {
     var _data$data = data.data,
       s = _data$data.s,
@@ -97,45 +99,84 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     centerY = pieCenter.y;
   var getTipPos = function getTipPos() {
     var getBigscreenScale = function getBigscreenScale() {
-      if (window.getScreenScale) {
-        return window.getScreenScale();
-      } else {
-        var bigscreenDom = document.getElementById('bigscreen-container');
-        if (!bigscreenDom) return [1, 1];
-        var transform = bigscreenDom.style.transform;
-        if (!transform) return [1, 1];
-        var match = transform.match(/scale\(([^)]+)\)/);
-        if (match) {
-          var scaleMatch = match[1].split(',');
-          var _scaleX = scaleMatch[0];
-          var _scaleY = scaleMatch[1];
-          if (_scaleY) {
-            return [Number(_scaleX), Number(_scaleY)];
-          } else {
-            return [Number(_scaleX), Number(_scaleX)];
+      // 优先使用全局提供的方法
+      if (typeof window.getScreenScale === 'function') {
+        try {
+          var _result = window.getScreenScale();
+          if (Array.isArray(_result) && _result.length >= 6) {
+            return _result;
           }
-        } else {
-          return [1, 1];
+        } catch (e) {
+          console.error('调用全局 getScreenScale 出错:', e);
         }
       }
+
+      // 获取容器元素
+      var bigscreenDom = document.getElementById('bigscreen-container');
+
+      // 元素不存在时的处理
+      if (!bigscreenDom) {
+        console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
+        return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+      }
+
+      // 确保元素可见（未被隐藏）
+      var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
+      if (!isVisible) {
+        console.warn('bigscreen-container 元素不可见，使用视口尺寸');
+        return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+      }
+
+      // 获取元素的布局矩形（最可靠的尺寸获取方式）
+      var rect = bigscreenDom.getBoundingClientRect();
+
+      // 提取基础尺寸（从布局矩形获取，不受样式影响）
+      var screenWidth = rect.width || window.innerWidth;
+      var screenHeight = rect.height || window.innerHeight;
+      var screenLeft = rect.left || 0;
+      var screenTop = rect.top || 0;
+
+      // 处理缩放
+      var scaleX = 1;
+      var scaleY = 1;
+      try {
+        var computedStyle = window.getComputedStyle(bigscreenDom);
+        var transform = computedStyle.transform;
+        if (transform && transform !== 'none') {
+          // 解析 transform matrix
+          var matrix = new DOMMatrix(transform);
+          scaleX = matrix.a; // 缩放X因子
+          scaleY = matrix.d; // 缩放Y因子
+        }
+      } catch (e) {
+        console.error('解析缩放样式出错:', e);
+      }
+
+      // 最终返回值（确保不会有undefined）
+      var result = [isNaN(scaleX) ? 1 : scaleX, isNaN(scaleY) ? 1 : scaleY, isNaN(screenWidth) ? window.innerWidth : screenWidth, isNaN(screenHeight) ? window.innerHeight : screenHeight, isNaN(screenLeft) ? 0 : screenLeft, isNaN(screenTop) ? 0 : screenTop];
+      return result;
     };
     var _getBigscreenScale = getBigscreenScale(),
-      _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
+      _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 6),
       scaleX = _getBigscreenScale2[0],
-      scaleY = _getBigscreenScale2[1];
-    var _mouseX = mouseX / scaleX;
-    var _mouseY = mouseY / scaleY;
+      scaleY = _getBigscreenScale2[1],
+      screenWidth = _getBigscreenScale2[2],
+      screenHeight = _getBigscreenScale2[3],
+      screenLeft = _getBigscreenScale2[4],
+      screenTop = _getBigscreenScale2[5];
+    // const _mouseX = mouseX / scaleX
+    // const _mouseY = mouseY / scaleY
     var tipPosMap = {
-      rightTop: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
-      leftTop: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
-      leftBottom: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)"),
-      rightBottom: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)")
+      rightTop: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n      ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftTop: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n      ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftBottom: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n      ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
+      rightBottom: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n      ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
     };
-    if (_mouseX < centerX && _mouseY < centerY) {
+    if (mouseX < centerX && mouseY < centerY) {
       return tipPosMap.leftTop;
-    } else if (_mouseX > centerX && _mouseY < centerY) {
+    } else if (mouseX > centerX && mouseY < centerY) {
       return tipPosMap.rightTop;
-    } else if (_mouseX >= centerX && _mouseY >= centerY) {
+    } else if (mouseX >= centerX && mouseY >= centerY) {
       return tipPosMap.rightBottom;
     } else {
       return tipPosMap.leftBottom;

package/package.json

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

package/src/components/PieChart.js

@@ -292,6 +292,7 @@ const Component = memo(
   }) => {
     const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
     const prevIndex = useRef(null);
+    const domRef=useRef()
     const { precision: legendPrecision } = legend.config.percent;
     const {
       id,
@@ -513,7 +514,7 @@ const Component = memo(
     const [hoverData, setHoverData] = useState(null);
     const pieWarpEl = useRef(null);
     return outerDecorate ? (
-      <>
+      <div ref={domRef}>
         <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
           width={width}
           height={height}
@@ -635,6 +636,7 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
+                domRef={domRef.current ? domRef : null}
               />
             </div>
           )}
@@ -648,9 +650,9 @@ const Component = memo(
           formatter={formatter}
           judge={judgeData}
         />
-      </>
+      </div>
     ) : (
-      <>
+      <div ref={domRef}>
         <ChartContainer
           width={width}
           height={height}
@@ -896,6 +898,7 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
+                domRef={domRef.current ? domRef : null}
               />
             </div>
           )}
@@ -909,7 +912,7 @@ const Component = memo(
           formatter={formatter}
           judge={judgeData}
         />
-      </>
+      </div>
     );
   }
 );

package/src/components/PieTooltip.jsx

@@ -3,7 +3,7 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
 
 
 export const PieTooltip = memo((props) => {
-	const { mousePos,
+	const { mousePos,domRef,
 		pieCenter,
 		config: {
 			tip: {
@@ -19,7 +19,7 @@ export const PieTooltip = memo((props) => {
 		},
 		data,
 		series } = props
-
+		const screenRef = domRef.current.getBoundingClientRect();
 	const Item = () => {
 		const { data: { s, y }, percent } = data
 		const { type, icon, displayName } = [...series.values()].find(
@@ -87,43 +87,93 @@ export const PieTooltip = memo((props) => {
 	const { x: centerX, y: centerY } = pieCenter
 	const getTipPos = () => {
 
-		const getBigscreenScale = () => {
-			if (window.getScreenScale) {
-				return window.getScreenScale()
-			} else {
-				const bigscreenDom = document.getElementById('bigscreen-container')
-				if (!bigscreenDom) return [1, 1]
-				const transform = bigscreenDom.style.transform
-				if (!transform) return [1, 1]
-				let match = transform.match(/scale\(([^)]+)\)/)
-				if (match) {
-					const scaleMatch = match[1].split(',')
-					let scaleX = scaleMatch[0];
-					let scaleY = scaleMatch[1];
-					if (scaleY) {
-						return [Number(scaleX), Number(scaleY)]
-					} else {
-						return [Number(scaleX), Number(scaleX)]
-					}
-				} else {
-					return [1, 1]
-				}
-			}
-		}
-		const [scaleX, scaleY] = getBigscreenScale()
-		const _mouseX = mouseX / scaleX
-		const _mouseY = mouseY / scaleY
+const getBigscreenScale = () => {
+			  // 优先使用全局提供的方法
+  if (typeof window.getScreenScale === 'function') {
+    try {
+      const result = window.getScreenScale();
+      if (Array.isArray(result) && result.length >= 6) {
+        return result;
+      }
+    } catch (e) {
+      console.error('调用全局 getScreenScale 出错:', e);
+    }
+  }
+
+  // 获取容器元素
+  const bigscreenDom = document.getElementById('bigscreen-container');
+
+  // 元素不存在时的处理
+  if (!bigscreenDom) {
+    console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
+    return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+  }
+
+  // 确保元素可见（未被隐藏）
+  const isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' 
+    && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
+  if (!isVisible) {
+    console.warn('bigscreen-container 元素不可见，使用视口尺寸');
+    return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+  }
+
+  // 获取元素的布局矩形（最可靠的尺寸获取方式）
+  const rect = bigscreenDom.getBoundingClientRect();
+
+  // 提取基础尺寸（从布局矩形获取，不受样式影响）
+  const screenWidth = rect.width || window.innerWidth;
+  const screenHeight = rect.height || window.innerHeight;
+  const screenLeft = rect.left || 0;
+  const screenTop = rect.top || 0;
+
+  // 处理缩放
+  let scaleX = 1;
+  let scaleY = 1;
+  
+  try {
+    const computedStyle = window.getComputedStyle(bigscreenDom);
+    const transform = computedStyle.transform;
+    
+    if (transform && transform !== 'none') {
+      // 解析 transform matrix
+      const matrix = new DOMMatrix(transform);
+      scaleX = matrix.a; // 缩放X因子
+      scaleY = matrix.d; // 缩放Y因子
+    }
+  } catch (e) {
+    console.error('解析缩放样式出错:', e);
+  }
+
+  // 最终返回值（确保不会有undefined）
+  const result = [
+    isNaN(scaleX) ? 1 : scaleX,
+    isNaN(scaleY) ? 1 : scaleY,
+    isNaN(screenWidth) ? window.innerWidth : screenWidth,
+    isNaN(screenHeight) ? window.innerHeight : screenHeight,
+    isNaN(screenLeft) ? 0 : screenLeft,
+    isNaN(screenTop) ? 0 : screenTop
+  ];
+  return result;
+};
+
+		const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigscreenScale()
+		// const _mouseX = mouseX / scaleX
+		// const _mouseY = mouseY / scaleY
 		const tipPosMap = {
-			rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
-			leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
-			leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
-			rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
-		}
-		if (_mouseX < centerX && _mouseY < centerY) {
+	  rightTop: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:  mouseX + translateTip.x}px,
+      ${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
+      leftTop: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
+      ${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
+      leftBottom: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
+      ${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
+      rightBottom: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
+      ${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
+		  }
+		if (mouseX < centerX && mouseY < centerY) {
 			return tipPosMap.leftTop
-		} else if (_mouseX > centerX && _mouseY < centerY) {
+		} else if (mouseX > centerX && mouseY < centerY) {
 			return tipPosMap.rightTop
-		} else if (_mouseX >= centerX && _mouseY >= centerY) {
+		} else if (mouseX >= centerX && mouseY >= centerY) {
 			return tipPosMap.rightBottom
 		} else {
 			return tipPosMap.leftBottom