@easyv/charts 1.8.12 → 1.8.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -518,7 +518,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
518
518
  hoverData = _useState6[0],
519
519
  setHoverData = _useState6[1];
520
520
  var pieWarpEl = (0, _react.useRef)(null);
521
- return outerDecorate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图,判断依据是外环装饰这个配置项(outerDecorate)
521
+ var domRef = (0, _react.useRef)();
522
+ return outerDecorate ? /*#__PURE__*/_react["default"].createElement("div", {
523
+ ref: domRef
524
+ }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图,判断依据是外环装饰这个配置项(outerDecorate)
522
525
  , {
523
526
  width: width,
524
527
  height: height,
@@ -608,6 +611,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
608
611
  }
609
612
  }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
610
613
  series: series,
614
+ domRef: domRef,
611
615
  data: hoverData,
612
616
  config: tooltip,
613
617
  pieCenter: {
@@ -624,7 +628,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
624
628
  }),
625
629
  formatter: formatter,
626
630
  judge: judgeData
627
- }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
631
+ }))) : /*#__PURE__*/_react["default"].createElement("div", {
632
+ ref: domRef
633
+ }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
628
634
  width: width,
629
635
  height: height,
630
636
  marginLeft: marginLeft,
@@ -772,6 +778,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
772
778
  }
773
779
  }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
774
780
  series: series,
781
+ domRef: domRef,
775
782
  data: hoverData,
776
783
  config: tooltip,
777
784
  pieCenter: {
@@ -940,6 +947,7 @@ var Label = function Label(_ref10) {
940
947
  _ref10$config$value = _ref10$config.value,
941
948
  showValue = _ref10$config$value.show,
942
949
  valueFont = _ref10$config$value.font,
950
+ valueSameColor = _ref10$config$value.sameColor,
943
951
  _ref10$config$value$s = _ref10$config$value.suffix,
944
952
  showSuffix = _ref10$config$value$s.show,
945
953
  text = _ref10$config$value$s.text,
@@ -949,6 +957,7 @@ var Label = function Label(_ref10) {
949
957
  suffixTranslateY = _ref10$config$value$s2.y,
950
958
  _ref10$config$percent = _ref10$config.percent,
951
959
  showPercent = _ref10$config$percent.show,
960
+ percentSameColor = _ref10$config$percent.sameColor,
952
961
  percentFont = _ref10$config$percent.font,
953
962
  precision = _ref10$config$percent.precision,
954
963
  _ref10$iosStyle = _ref10.iosStyle,
@@ -1041,7 +1050,9 @@ var Label = function Label(_ref10) {
1041
1050
  "float": mode == "horizontal" ? "left" : "none"
1042
1051
  })
1043
1052
  }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
1044
- style: (0, _utils.getFontStyle)(valueFont)
1053
+ style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
1054
+ "color": valueSameColor ? pure : valueFont.color
1055
+ })
1045
1056
  }, data.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
1046
1057
  style: {
1047
1058
  position: "relative",
@@ -1050,7 +1061,9 @@ var Label = function Label(_ref10) {
1050
1061
  top: suffixTranslateY
1051
1062
  }
1052
1063
  }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
1053
- style: (0, _utils.getFontStyle)(percentFont)
1064
+ style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
1065
+ "color": percentSameColor ? pure : percentFont.color
1066
+ })
1054
1067
  }, (_showValue ? "(" : "") + percent + "%" + (_showValue ? ")" : "")))));
1055
1068
  }));
1056
1069
  };
@@ -1196,7 +1209,8 @@ var RingLabel = function RingLabel(_ref12) {
1196
1209
  })
1197
1210
  }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
1198
1211
  style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
1199
- transform: getTranslate(valueTranslate, x3 >= 0)
1212
+ transform: getTranslate(valueTranslate, x3 >= 0),
1213
+ "color": valueSameColor ? pure : valueFont.color
1200
1214
  })
1201
1215
  }, realData.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
1202
1216
  style: {
@@ -1207,7 +1221,8 @@ var RingLabel = function RingLabel(_ref12) {
1207
1221
  }
1208
1222
  }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
1209
1223
  style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
1210
- transform: getTranslate(percentTranslate, x3 >= 0)
1224
+ transform: getTranslate(percentTranslate, x3 >= 0),
1225
+ "color": percentSameColor ? pure : percentFont.color
1211
1226
  })
1212
1227
  }, (_showValue ? "(" : "") + percent + "%" + (_showValue ? ")" : "")))));
1213
1228
  }));
@@ -17,6 +17,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
17
17
  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; }
18
18
  var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (props) {
19
19
  var mousePos = props.mousePos,
20
+ domRef = props.domRef,
20
21
  pieCenter = props.pieCenter,
21
22
  _props$config$tip = props.config.tip,
22
23
  _props$config$tip$dat = _props$config$tip.data,
@@ -42,6 +43,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
42
43
  translateTip = _props$config$tip.translate,
43
44
  data = props.data,
44
45
  series = props.series;
46
+ var screenRef = domRef.current.getBoundingClientRect();
45
47
  var Item = function Item() {
46
48
  var _data$data = data.data,
47
49
  s = _data$data.s,
@@ -91,51 +93,90 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
91
93
  style: (0, _utils.getFontStyle)(percentageFont)
92
94
  }, Number(percent).toFixed(precision), percentageSuffixIsShow && renderSuffix(percentageSuffix)));
93
95
  };
94
- var mouseX = mousePos.x,
95
- mouseY = mousePos.y;
96
+ var getBigScreenScale = function getBigScreenScale() {
97
+ // 优先使用全局提供的方法
98
+ if (typeof window.getScreenScale === 'function') {
99
+ try {
100
+ var _result = window.getScreenScale();
101
+ if (Array.isArray(_result) && _result.length >= 6) {
102
+ return _result;
103
+ }
104
+ } catch (e) {
105
+ console.error('调用全局 getScreenScale 出错:', e);
106
+ }
107
+ }
108
+
109
+ // 获取容器元素
110
+ var bigscreenDom = document.getElementById('bigscreen-container');
111
+
112
+ // 元素不存在时的处理
113
+ if (!bigscreenDom) {
114
+ console.warn('未找到 bigscreen-container 元素,使用视口尺寸');
115
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
116
+ }
117
+
118
+ // 确保元素可见(未被隐藏)
119
+ var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
120
+ if (!isVisible) {
121
+ console.warn('bigscreen-container 元素不可见,使用视口尺寸');
122
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
123
+ }
124
+
125
+ // 获取元素的布局矩形(最可靠的尺寸获取方式)
126
+ var rect = bigscreenDom.getBoundingClientRect();
127
+
128
+ // 提取基础尺寸(从布局矩形获取,不受样式影响)
129
+ var screenWidth = rect.width || window.innerWidth;
130
+ var screenHeight = rect.height || window.innerHeight;
131
+ var screenLeft = rect.left || 0;
132
+ var screenTop = rect.top || 0;
133
+
134
+ // 处理缩放
135
+ var scaleX = 1;
136
+ var scaleY = 1;
137
+ try {
138
+ var computedStyle = window.getComputedStyle(bigscreenDom);
139
+ var transform = computedStyle.transform;
140
+ if (transform && transform !== 'none') {
141
+ // 解析 transform matrix
142
+ var matrix = new DOMMatrix(transform);
143
+ scaleX = matrix.a; // 缩放X因子
144
+ scaleY = matrix.d; // 缩放Y因子
145
+ }
146
+ } catch (e) {
147
+ console.error('解析缩放样式出错:', e);
148
+ }
149
+
150
+ // 最终返回值(确保不会有undefined)
151
+ 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];
152
+ return result;
153
+ };
154
+ var _getBigScreenScale = getBigScreenScale(),
155
+ _getBigScreenScale2 = (0, _slicedToArray2["default"])(_getBigScreenScale, 6),
156
+ scaleX = _getBigScreenScale2[0],
157
+ scaleY = _getBigScreenScale2[1],
158
+ screenWidth = _getBigScreenScale2[2],
159
+ screenHeight = _getBigScreenScale2[3],
160
+ screenLeft = _getBigScreenScale2[4],
161
+ screenTop = _getBigScreenScale2[5];
162
+ var x = mousePos.x,
163
+ y = mousePos.y;
164
+ var mouseX = x / scaleX;
165
+ var mouseY = y / scaleY;
96
166
  var centerX = pieCenter.x,
97
167
  centerY = pieCenter.y;
98
168
  var getTipPos = function getTipPos() {
99
- var getBigscreenScale = function getBigscreenScale() {
100
- if (window.getScreenScale) {
101
- return window.getScreenScale();
102
- } else {
103
- var bigscreenDom = document.getElementById('bigscreen-container');
104
- if (!bigscreenDom) return [1, 1];
105
- var transform = bigscreenDom.style.transform;
106
- if (!transform) return [1, 1];
107
- var match = transform.match(/scale\(([^)]+)\)/);
108
- if (match) {
109
- var scaleMatch = match[1].split(',');
110
- var _scaleX = scaleMatch[0];
111
- var _scaleY = scaleMatch[1];
112
- if (_scaleY) {
113
- return [Number(_scaleX), Number(_scaleY)];
114
- } else {
115
- return [Number(_scaleX), Number(_scaleX)];
116
- }
117
- } else {
118
- return [1, 1];
119
- }
120
- }
121
- };
122
- var _getBigscreenScale = getBigscreenScale(),
123
- _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
124
- scaleX = _getBigscreenScale2[0],
125
- scaleY = _getBigscreenScale2[1];
126
- var _mouseX = mouseX / scaleX;
127
- var _mouseY = mouseY / scaleY;
128
169
  var tipPosMap = {
129
- rightTop: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
130
- leftTop: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
131
- leftBottom: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)"),
132
- rightBottom: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)")
170
+ 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)"),
171
+ 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)"),
172
+ 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)"),
173
+ 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)")
133
174
  };
134
- if (_mouseX < centerX && _mouseY < centerY) {
175
+ if (mouseX < centerX && mouseY < centerY) {
135
176
  return tipPosMap.leftTop;
136
- } else if (_mouseX > centerX && _mouseY < centerY) {
177
+ } else if (mouseX > centerX && mouseY < centerY) {
137
178
  return tipPosMap.rightTop;
138
- } else if (_mouseX >= centerX && _mouseY >= centerY) {
179
+ } else if (mouseX >= centerX && mouseY >= centerY) {
139
180
  return tipPosMap.rightBottom;
140
181
  } else {
141
182
  return tipPosMap.leftBottom;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/charts",
3
- "version": "1.8.12",
3
+ "version": "1.8.14",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -512,8 +512,9 @@ const Component = memo(
512
512
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
513
513
  const [hoverData, setHoverData] = useState(null);
514
514
  const pieWarpEl = useRef(null);
515
+ const domRef=useRef()
515
516
  return outerDecorate ? (
516
- <>
517
+ <div ref={domRef}>
517
518
  <ChartContainer //用于生成甜甜圈图,判断依据是外环装饰这个配置项(outerDecorate)
518
519
  width={width}
519
520
  height={height}
@@ -628,6 +629,7 @@ const Component = memo(
628
629
  <div style={{ position: "absolute", zIndex: 9999 }}>
629
630
  <PieTooltip
630
631
  series={series}
632
+ domRef={domRef}
631
633
  data={hoverData}
632
634
  config={tooltip}
633
635
  pieCenter={{
@@ -648,9 +650,9 @@ const Component = memo(
648
650
  formatter={formatter}
649
651
  judge={judgeData}
650
652
  />
651
- </>
653
+ </div>
652
654
  ) : (
653
- <>
655
+ <div ref={domRef}>
654
656
  <ChartContainer
655
657
  width={width}
656
658
  height={height}
@@ -889,6 +891,7 @@ const Component = memo(
889
891
  <div style={{ position: "absolute", zIndex: 9999 }}>
890
892
  <PieTooltip
891
893
  series={series}
894
+ domRef={domRef}
892
895
  data={hoverData}
893
896
  config={tooltip}
894
897
  pieCenter={{
@@ -909,7 +912,7 @@ const Component = memo(
909
912
  formatter={formatter}
910
913
  judge={judgeData}
911
914
  />
912
- </>
915
+ </div>
913
916
  );
914
917
  }
915
918
  );
@@ -1094,6 +1097,7 @@ const Label = ({
1094
1097
  value: {
1095
1098
  show: showValue,
1096
1099
  font: valueFont,
1100
+ sameColor:valueSameColor,
1097
1101
  suffix: {
1098
1102
  show: showSuffix,
1099
1103
  text,
@@ -1101,7 +1105,7 @@ const Label = ({
1101
1105
  translate: { x: suffixTranslateX, y: suffixTranslateY },
1102
1106
  },
1103
1107
  },
1104
- percent: { show: showPercent, font: percentFont, precision },
1108
+ percent: { show: showPercent,sameColor:percentSameColor, font: percentFont, precision },
1105
1109
  },
1106
1110
  iosStyle: { isIOS, left, top },
1107
1111
  arcs,
@@ -1235,7 +1239,7 @@ const Label = ({
1235
1239
  ></TextOverflow>
1236
1240
  )}
1237
1241
  {showValue && (
1238
- <span style={getFontStyle(valueFont)}>
1242
+ <span style={{...getFontStyle(valueFont),"color":valueSameColor?pure:valueFont.color}}>
1239
1243
  {data.y}
1240
1244
  {showSuffix && (
1241
1245
  <span
@@ -1252,7 +1256,7 @@ const Label = ({
1252
1256
  </span>
1253
1257
  )}
1254
1258
  {showPercent && (
1255
- <span style={getFontStyle(percentFont)}>
1259
+ <span style={{...getFontStyle(percentFont),"color":percentSameColor?pure:percentFont.color}}>
1256
1260
  {(_showValue ? "(" : "") +
1257
1261
  percent +
1258
1262
  "%" +
@@ -1457,6 +1461,7 @@ const RingLabel = ({
1457
1461
  style={{
1458
1462
  ...getFontStyle(valueFont),
1459
1463
  transform: getTranslate(valueTranslate, x3 >= 0),
1464
+ "color":valueSameColor?pure:valueFont.color
1460
1465
  }}
1461
1466
  >
1462
1467
  {realData.y}
@@ -1479,6 +1484,7 @@ const RingLabel = ({
1479
1484
  style={{
1480
1485
  ...getFontStyle(percentFont),
1481
1486
  transform: getTranslate(percentTranslate, x3 >= 0),
1487
+ "color":percentSameColor?pure:percentFont.color
1482
1488
  }}
1483
1489
  >
1484
1490
  {(_showValue ? "(" : "") +
@@ -3,7 +3,7 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
3
3
 
4
4
 
5
5
  export const PieTooltip = memo((props) => {
6
- const { mousePos,
6
+ const { mousePos,domRef,
7
7
  pieCenter,
8
8
  config: {
9
9
  tip: {
@@ -19,7 +19,7 @@ export const PieTooltip = memo((props) => {
19
19
  },
20
20
  data,
21
21
  series } = props
22
-
22
+ const screenRef = domRef.current.getBoundingClientRect();
23
23
  const Item = () => {
24
24
  const { data: { s, y }, percent } = data
25
25
  const { type, icon, displayName } = [...series.values()].find(
@@ -83,47 +83,91 @@ export const PieTooltip = memo((props) => {
83
83
  </dd>
84
84
  );
85
85
  }
86
- const { x: mouseX, y: mouseY } = mousePos
87
- const { x: centerX, y: centerY } = pieCenter
88
- const getTipPos = () => {
89
-
90
- const getBigscreenScale = () => {
91
- if (window.getScreenScale) {
92
- return window.getScreenScale()
93
- } else {
94
- const bigscreenDom = document.getElementById('bigscreen-container')
95
- if (!bigscreenDom) return [1, 1]
96
- const transform = bigscreenDom.style.transform
97
- if (!transform) return [1, 1]
98
- let match = transform.match(/scale\(([^)]+)\)/)
99
- if (match) {
100
- const scaleMatch = match[1].split(',')
101
- let scaleX = scaleMatch[0];
102
- let scaleY = scaleMatch[1];
103
- if (scaleY) {
104
- return [Number(scaleX), Number(scaleY)]
105
- } else {
106
- return [Number(scaleX), Number(scaleX)]
107
- }
108
- } else {
109
- return [1, 1]
110
- }
86
+ const getBigScreenScale = () => {
87
+ // 优先使用全局提供的方法
88
+ if (typeof window.getScreenScale === 'function') {
89
+ try {
90
+ const result = window.getScreenScale();
91
+ if (Array.isArray(result) && result.length >= 6) {
92
+ return result;
111
93
  }
94
+ } catch (e) {
95
+ console.error('调用全局 getScreenScale 出错:', e);
96
+ }
112
97
  }
113
- const [scaleX, scaleY] = getBigscreenScale()
114
- const _mouseX = mouseX / scaleX
115
- const _mouseY = mouseY / scaleY
116
- const tipPosMap = {
117
- rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
118
- leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
119
- leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
120
- rightBottom: `translate(${_mouseX + translateTip.x}px,${(_mouseY + translateTip.y)}px)`,
98
+
99
+ // 获取容器元素
100
+ const bigscreenDom = document.getElementById('bigscreen-container');
101
+
102
+ // 元素不存在时的处理
103
+ if (!bigscreenDom) {
104
+ console.warn('未找到 bigscreen-container 元素,使用视口尺寸');
105
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
121
106
  }
122
- if (_mouseX < centerX && _mouseY < centerY) {
107
+
108
+ // 确保元素可见(未被隐藏)
109
+ const isVisible = window.getComputedStyle(bigscreenDom).display !== 'none'
110
+ && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
111
+ if (!isVisible) {
112
+ console.warn('bigscreen-container 元素不可见,使用视口尺寸');
113
+ return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
114
+ }
115
+
116
+ // 获取元素的布局矩形(最可靠的尺寸获取方式)
117
+ const rect = bigscreenDom.getBoundingClientRect();
118
+
119
+ // 提取基础尺寸(从布局矩形获取,不受样式影响)
120
+ const screenWidth = rect.width || window.innerWidth;
121
+ const screenHeight = rect.height || window.innerHeight;
122
+ const screenLeft = rect.left || 0;
123
+ const screenTop = rect.top || 0;
124
+
125
+ // 处理缩放
126
+ let scaleX = 1;
127
+ let scaleY = 1;
128
+
129
+ try {
130
+ const computedStyle = window.getComputedStyle(bigscreenDom);
131
+ const transform = computedStyle.transform;
132
+
133
+ if (transform && transform !== 'none') {
134
+ // 解析 transform matrix
135
+ const matrix = new DOMMatrix(transform);
136
+ scaleX = matrix.a; // 缩放X因子
137
+ scaleY = matrix.d; // 缩放Y因子
138
+ }
139
+ } catch (e) {
140
+ console.error('解析缩放样式出错:', e);
141
+ }
142
+
143
+ // 最终返回值(确保不会有undefined)
144
+ const result = [
145
+ isNaN(scaleX) ? 1 : scaleX,
146
+ isNaN(scaleY) ? 1 : scaleY,
147
+ isNaN(screenWidth) ? window.innerWidth : screenWidth,
148
+ isNaN(screenHeight) ? window.innerHeight : screenHeight,
149
+ isNaN(screenLeft) ? 0 : screenLeft,
150
+ isNaN(screenTop) ? 0 : screenTop
151
+ ];
152
+ return result;
153
+ };
154
+ const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigScreenScale()
155
+ const { x, y } = mousePos
156
+ const mouseX=x/scaleX
157
+ const mouseY=y/scaleY
158
+ const { x: centerX, y: centerY } = pieCenter
159
+ const getTipPos = () => {
160
+ const tipPosMap = {
161
+ 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)`,
162
+ 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)`,
163
+ 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)`,
164
+ 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)`,
165
+ }
166
+ if (mouseX < centerX && mouseY < centerY) {
123
167
  return tipPosMap.leftTop
124
- } else if (_mouseX > centerX && _mouseY < centerY) {
168
+ } else if (mouseX > centerX && mouseY < centerY) {
125
169
  return tipPosMap.rightTop
126
- } else if (_mouseX >= centerX && _mouseY >= centerY) {
170
+ } else if (mouseX >= centerX && mouseY >= centerY) {
127
171
  return tipPosMap.rightBottom
128
172
  } else {
129
173
  return tipPosMap.leftBottom