@easyv/charts 1.8.7 → 1.8.9

package/lib/components/Chart.js

@@ -64,7 +64,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     active = _useState2[0],
     setActive = _useState2[1];
   var scaleRef = (0, _react.useRef)([1, 1]);
-  var domRef = (0, _react.useRef)();
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
@@ -122,16 +121,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var data = checkData(originData);
   return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
-  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement("div", {
-    ref: domRef
-  }, /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
+  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,
     active: active
-  }, props, {
-    domRef: domRef
-  }))) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
+  }, props)) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,

package/lib/components/Legend.js

@@ -148,6 +148,24 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || 'Arial')));
   })));
   var nameMaxWidth = ((_config$name = config.name) === null || _config$name === void 0 ? void 0 : _config$name.maxWidth) || 80;
+  var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
+    display: 'flex',
+    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    flexDirection: "column",
+    position: 'absolute'
+  }, getPosition(position, _alignment, x, y)), {}, {
+    height: loop.show ? height : 'auto',
+    overflowY: loop.show ? 'scroll' : 'auto'
+  }) : _objectSpread(_objectSpread({
+    display: 'flex',
+    flexWrap: "wrap",
+    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    flexDirection: "column",
+    position: 'absolute'
+  }, getPosition(position, _alignment, x, y)), {}, {
+    height: loop.show ? height : 'auto',
+    overflowY: loop.show ? 'scroll' : 'auto'
+  });
   return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
@@ -201,16 +219,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     })));
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
-    style: _objectSpread(_objectSpread({
-      display: 'flex',
-      flexWrap: "wrap",
-      alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
-      flexDirection: "column",
-      position: 'absolute'
-    }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto'
-    }),
+    style: stylePieOrAxis,
     ref: ref_container
   }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {

package/lib/components/PieChart.js

@@ -232,8 +232,7 @@ var getCircleScale = function getCircleScale() {
   }));
 };
 var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
-  var domRef = _ref5.domRef,
-    width = _ref5.width,
+  var width = _ref5.width,
     height = _ref5.height,
     _ref5$config = _ref5.config,
     _ref5$config$chart = _ref5$config.chart,
@@ -615,8 +614,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       x: halfChartWidth,
       y: maxRadius + marginTop
     },
-    mousePos: mousePos,
-    domRef: domRef
+    mousePos: mousePos
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {
@@ -780,8 +778,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       x: halfChartWidth,
       y: maxRadius + marginTop
     },
-    mousePos: mousePos,
-    domRef: domRef
+    mousePos: mousePos
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {

package/lib/components/pieTooltip.js

@@ -17,7 +17,6 @@ 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,
@@ -43,7 +42,6 @@ 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,
@@ -99,84 +97,45 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     centerY = pieCenter.y;
   var getTipPos = function getTipPos() {
     var getBigscreenScale = function getBigscreenScale() {
-      // 优先使用全局提供的方法
-      if (typeof window.getScreenScale === 'function') {
-        try {
-          var _result = window.getScreenScale();
-          if (Array.isArray(_result) && _result.length >= 6) {
-            return _result;
+      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)];
           }
-        } catch (e) {
-          console.error('调用全局 getScreenScale 出错:', e);
+        } else {
+          return [1, 1];
         }
       }
-
-      // 获取容器元素
-      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),
+      _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
       scaleX = _getBigscreenScale2[0],
-      scaleY = _getBigscreenScale2[1],
-      screenWidth = _getBigscreenScale2[2],
-      screenHeight = _getBigscreenScale2[3],
-      screenLeft = _getBigscreenScale2[4],
-      screenTop = _getBigscreenScale2[5];
-    // const _mouseX = mouseX / scaleX
-    // const _mouseY = mouseY / scaleY
+      scaleY = _getBigscreenScale2[1];
+    var _mouseX = mouseX / scaleX;
+    var _mouseY = mouseY / scaleY;
     var tipPosMap = {
-      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)")
+      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)")
     };
-    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.7",
+  "version": "1.8.9",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Chart.js

@@ -47,7 +47,6 @@ const Chart = memo(
     const chartHeight = height - marginTop - marginBottom;
     const [active, setActive] = useState(true);
     const scaleRef = useRef([1,1]);
-    const domRef=useRef()
     const triggerOnRelative = useCallback(
       (action,data) => {
         if (!interaction) return;
@@ -116,7 +115,7 @@ const Chart = memo(
     return (
       <chartContext.Provider value={context}>
         {type == 'pie' ? (
-          <div ref={domRef}><PieChart id={id} config={config} data={data} active={active} {...props} domRef={domRef} /></div>
+          <PieChart id={id} config={config} data={data} active={active} {...props} />
         ) : (
           <CartesianChart id={id} config={config} data={data} active={active} {...props} />
          )}

package/src/components/Legend.js

@@ -123,6 +123,24 @@ export default memo(
     );
     const nameMaxWidth = config.name?.maxWidth || 80;
 
+const stylePieOrAxis=formatter?{
+  display:'flex',
+  alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+  flexDirection:"column",
+  position: 'absolute',
+  ...getPosition(position, _alignment, x, y),
+  height: loop.show ? height : 'auto',
+  overflowY: loop.show ? 'scroll' : 'auto'
+}:{
+  display:'flex',
+  flexWrap:"wrap",
+  alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+  flexDirection: "column",
+  position: 'absolute',
+  ...getPosition(position, _alignment, x, y),
+  height: loop.show ? height : 'auto',
+  overflowY: loop.show ? 'scroll' : 'auto'
+}
     return (
       LegendType=="FixedWidth"?
       <div
@@ -180,16 +198,7 @@ export default memo(
         </ul>
       </div>:<div
         className='__easyv-legend-wrapper'
-        style={{
-          display:'flex',
-          flexWrap:"wrap",
-          alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
-          flexDirection: "column",
-          position: 'absolute',
-          ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto'
-        }}
+        style={stylePieOrAxis}
         ref={ref_container}
       >
 

package/src/components/PieChart.js

@@ -247,7 +247,6 @@ const getCircleScale = ({ count, color, width, length } = tick, radius) => {
 
 const Component = memo(
   ({
-    domRef,
     width,
     height,
     config: {
@@ -636,7 +635,6 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
-                domRef={domRef}
               />
             </div>
           )}
@@ -898,7 +896,6 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
-                domRef={domRef}
               />
             </div>
           )}

package/src/components/PieTooltip.jsx

@@ -3,7 +3,7 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
 
 
 export const PieTooltip = memo((props) => {
-	const { mousePos,domRef,
+	const { mousePos,
 		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(
@@ -88,88 +88,38 @@ export const PieTooltip = memo((props) => {
 	const getTipPos = () => {
 
 		const getBigscreenScale = () => {
-			// 优先使用全局提供的方法
-			if (typeof window.getScreenScale === 'function') {
-			  try {
-				const result = window.getScreenScale();
-				if (Array.isArray(result) && result.length >= 6) {
-				  return result;
+			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]
 				}
-			  } 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 [scaleX, scaleY] = getBigscreenScale()
 		const _mouseX = mouseX / scaleX
 		const _mouseY = mouseY / scaleY
 		const tipPosMap = {
-	  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) {
+			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) {
 			return tipPosMap.leftTop
 		} else if (_mouseX > centerX && _mouseY < centerY) {
 			return tipPosMap.rightTop