@easyv/charts 1.8.11 → 1.8.13

package/lib/components/Label.js

@@ -6,18 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _d3v = require("d3v7");
 var _utils = require("../utils");
 var _context = require("../context");
-var _excluded = ["seriesIntervalWidth", "paddingInner", "showType"];
-/**
+var _excluded = ["show", "extent"],
+  _excluded2 = ["seriesIntervalWidth", "paddingInner", "showType", "highlight"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; } /**
  * 轴类图表标签
  */
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-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 getHighlightData = function getHighlightData(data, extent) {
+  switch (extent) {
+    case "min":
+      var minData = (0, _d3v.min)(data, function (d) {
+        return d.data.y;
+      });
+      return data.map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          flag: minData == item.data.y ? "min" : ""
+        });
+      });
+    case "max":
+      var maxData = (0, _d3v.max)(data, function (d) {
+        return d.data.y;
+      });
+      return data.map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          flag: maxData == item.data.y ? "max" : ""
+        });
+      });
+    default:
+      return data;
+  }
+};
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$config = _ref.config,
     _ref$config$seriesInt = _ref$config.seriesIntervalWidth,
@@ -26,7 +51,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
     _ref$config$showType = _ref$config.showType,
     seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
-    other = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
+    _ref$config$highlight = _ref$config.highlight,
+    showHighlight = _ref$config$highlight.show,
+    extent = _ref$config$highlight.extent,
+    highlightStyle = (0, _objectWithoutProperties2["default"])(_ref$config$highlight, _excluded),
+    other = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded2),
     config = _ref.config,
     curXLabel = _ref.curXLabel,
     selectStyle = _ref.selectStyle,
@@ -61,6 +90,12 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }
   }
+  var highlightConfig = other;
+  if (highlightStyle) {
+    highlightConfig = _objectSpread(_objectSpread({}, other), {}, {
+      label: highlightStyle.numlabel
+    });
+  }
   var lineType = config.hasOwnProperty("line"); //  堆叠处理
 
   if (!data.length) return null;
@@ -76,11 +111,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStep = _getSeriesInfo.seriesStep,
     seriesWidth = _getSeriesInfo.seriesWidth,
     seriesStart = _getSeriesInfo.seriesStart;
+  var _data = showHighlight ? getHighlightData(data, extent) : data;
   var isVertical = direction === "vertical";
   return /*#__PURE__*/React.createElement("g", {
     className: "__easyv-label"
-  }, data.map(function (_ref2, i) {
-    var index = _ref2.index,
+  }, _data.map(function (_ref2, i) {
+    var flag = _ref2.flag,
+      index = _ref2.index,
       _ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2),
       start = _ref2$bound[0],
       end = _ref2$bound[1],
@@ -91,7 +128,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       showY = _ref2$data.showY,
       s = _ref2$data.s;
     var y1, y2;
-    var _ref3 = x == curXLabel ? selectConfig : other,
+    var _ref3 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
       icon = _ref3.icon,
       label = _ref3.label;
     var showIcon = icon && icon.show;

package/lib/components/PieChart.js

@@ -518,7 +518,10 @@ 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)
+  var domRef = (0, _react.useRef)();
+  return outerDecorate ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: domRef
+  }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
   , {
     width: width,
     height: height,
@@ -608,6 +611,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
     series: series,
+    domRef: domRef,
     data: hoverData,
     config: tooltip,
     pieCenter: {
@@ -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,
@@ -772,6 +778,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
     series: series,
+    domRef: domRef,
     data: hoverData,
     config: tooltip,
     pieCenter: {

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,
@@ -91,51 +93,90 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
       style: (0, _utils.getFontStyle)(percentageFont)
     }, Number(percent).toFixed(precision), percentageSuffixIsShow && renderSuffix(percentageSuffix)));
   };
-  var mouseX = mousePos.x,
-    mouseY = mousePos.y;
+  var getBigScreenScale = function getBigScreenScale() {
+    // 优先使用全局提供的方法
+    if (typeof window.getScreenScale === 'function') {
+      try {
+        var _result = window.getScreenScale();
+        if (Array.isArray(_result) && _result.length >= 6) {
+          return _result;
+        }
+      } 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, 6),
+    scaleX = _getBigScreenScale2[0],
+    scaleY = _getBigScreenScale2[1],
+    screenWidth = _getBigScreenScale2[2],
+    screenHeight = _getBigScreenScale2[3],
+    screenLeft = _getBigScreenScale2[4],
+    screenTop = _getBigScreenScale2[5];
+  var x = mousePos.x,
+    y = mousePos.y;
+  var mouseX = x / scaleX;
+  var mouseY = y / scaleY;
   var centerX = pieCenter.x,
     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)];
-          }
-        } else {
-          return [1, 1];
-        }
-      }
-    };
-    var _getBigscreenScale = getBigscreenScale(),
-      _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
-      scaleX = _getBigscreenScale2[0],
-      scaleY = _getBigscreenScale2[1];
-    var _mouseX = mouseX / scaleX;
-    var _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 + translateTip.x + tipWidth) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y - translateTip.y - tipHeight) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftTop: "translate(".concat((screenRef.x - translateTip.x - tipWidth) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tipWidth, "px,").concat((screenRef.y - translateTip.y - tipHeight) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftBottom: "translate(".concat((screenRef.x - translateTip.x - tipWidth) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tipWidth, "px,").concat((screenRef.y + translateTip.y + tipHeight) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tipHeight : mouseY + translateTip.y, "px)"),
+      rightBottom: "translate(".concat((screenRef.x + translateTip.x + tipWidth) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y + translateTip.y + tipHeight) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tipHeight : 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.11",
+  "version": "1.8.13",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Label.js

@@ -2,15 +2,36 @@
  * 轴类图表标签
  */
 import { memo, useContext } from "react";
+import { min, max } from "d3v7";
 import { getTranslate2d, getSeriesInfo, getFontStyle, formatFont } from "../utils";
 import { chartContext } from "../context";
 
+const getHighlightData = (data, extent) => {
+  switch (extent) {
+    case "min":
+      const minData = min(data, (d) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: minData == item.data.y ? "min" : "",
+      }));
+    case "max":
+      const maxData = max(data, (d) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: maxData == item.data.y ? "max" : "",
+      }));
+    default:
+      return data;
+  }
+};
+
 export default memo(
   ({
     config: {
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
       showType:seriesType = 'bar',
+      highlight: { show: showHighlight, extent, ...highlightStyle },
       ...other
     },
     config,
@@ -33,6 +54,10 @@ export default memo(
         }
       }
     }
+    let highlightConfig = other;
+    if(highlightStyle){
+      highlightConfig = { ...other, label:highlightStyle.numlabel };
+    }
     const lineType = config.hasOwnProperty("line"); //  堆叠处理
     
     if (!data.length) return null;
@@ -44,17 +69,18 @@ export default memo(
       paddingInner,
       paddingOuter,
     });
+    const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
     
     return (
       <g className="__easyv-label">
-        {data.map(
+        {_data.map(
           (
-            { index, bound: [start, end], data, data: { x, y, showY, s } },
+            { flag, index, bound: [start, end], data, data: { x, y, showY, s } },
             i
           ) => {
             let y1, y2;
-            const { icon, label } = x==curXLabel?selectConfig:other;
+            const { icon, label } = x==curXLabel?selectConfig:flag?highlightConfig:other;
             const showIcon = icon && icon.show;
             const showLabel = label && label.show;
             const { position:_position="outerStart", reverse=true } = label || {};

package/src/components/PieChart.js

@@ -512,8 +512,9 @@ const Component = memo(
     const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
     const [hoverData, setHoverData] = useState(null);
     const pieWarpEl = useRef(null);
+    const domRef=useRef()
     return outerDecorate ? (
-      <>
+      <div ref={domRef}>
         <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
           width={width}
           height={height}
@@ -628,6 +629,7 @@ const Component = memo(
             <div style={{ position: "absolute", zIndex: 9999 }}>
               <PieTooltip
                 series={series}
+                domRef={domRef}
                 data={hoverData}
                 config={tooltip}
                 pieCenter={{
@@ -648,9 +650,9 @@ const Component = memo(
           formatter={formatter}
           judge={judgeData}
         />
-      </>
+      </div>
     ) : (
-      <>
+      <div ref={domRef}>
         <ChartContainer
           width={width}
           height={height}
@@ -889,6 +891,7 @@ const Component = memo(
             <div style={{ position: "absolute", zIndex: 9999 }}>
               <PieTooltip
                 series={series}
+                domRef={domRef}
                 data={hoverData}
                 config={tooltip}
                 pieCenter={{
@@ -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(
@@ -83,47 +83,91 @@ export const PieTooltip = memo((props) => {
 			</dd>
 		);
 	}
-	const { x: mouseX, y: mouseY } = mousePos
-	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 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 [scaleX, scaleY] = 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)`,
+	  
+		// 获取容器元素
+		const bigscreenDom = document.getElementById('bigscreen-container');
+	  
+		// 元素不存在时的处理
+		if (!bigscreenDom) {
+		  console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
+		  return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
 		}
-		if (_mouseX < centerX && _mouseY < centerY) {
+	  
+		// 确保元素可见（未被隐藏）
+		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 { x, y } = mousePos
+    const mouseX=x/scaleX
+    const mouseY=y/scaleY
+	const { x: centerX, y: centerY } = pieCenter
+	const getTipPos = () => {
+		const tipPosMap = {
+			rightTop: `translate(${(screenRef.x+translateTip.x+tipWidth)/scaleX+ mouseX-screenLeft/scaleX>(screenWidth/scaleX)?mouseX - tipWidth - translateTip.x:mouseX  + translateTip.x}px,${(screenRef.y-translateTip.y-tipHeight)/scaleY+ mouseY-screenTop/scaleY<0?mouseY + translateTip.y:mouseY - tipHeight - translateTip.y}px)`,
+			leftTop: `translate(${(screenRef.x-translateTip.x-tipWidth)/scaleX+ mouseX-screenLeft/scaleX<0?mouseX + translateTip.x:mouseX - translateTip.x-tipWidth}px,${(screenRef.y-translateTip.y-tipHeight)/scaleY+ mouseY-screenTop/scaleY<0?mouseY + translateTip.y:mouseY - tipHeight - translateTip.y}px)`,
+			leftBottom: `translate(${(screenRef.x-translateTip.x-tipWidth)/scaleX+ mouseX-screenLeft/scaleX<0?mouseX + translateTip.x:mouseX - translateTip.x-tipWidth}px,${(screenRef.y+translateTip.y+tipHeight)/scaleY+ mouseY-screenTop/scaleY>(screenHeight/scaleY)?mouseY - translateTip.y-tipHeight:mouseY + translateTip.y}px)`,
+			rightBottom: `translate(${(screenRef.x+translateTip.x+tipWidth)/scaleX+ mouseX-screenLeft/scaleX>(screenWidth/scaleX)?mouseX - tipWidth - translateTip.x:mouseX  + translateTip.x}px,${(screenRef.y+translateTip.y+tipHeight)/scaleY+ mouseY-screenTop/scaleY>(screenHeight/scaleY)?mouseY - translateTip.y-tipHeight: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