@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
|
-
|
|
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(
|
|
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
|
|
95
|
-
|
|
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(
|
|
130
|
-
leftTop: "translate(".concat(
|
|
131
|
-
leftBottom: "translate(".concat(
|
|
132
|
-
rightBottom: "translate(".concat(
|
|
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 (
|
|
175
|
+
if (mouseX < centerX && mouseY < centerY) {
|
|
135
176
|
return tipPosMap.leftTop;
|
|
136
|
-
} else if (
|
|
177
|
+
} else if (mouseX > centerX && mouseY < centerY) {
|
|
137
178
|
return tipPosMap.rightTop;
|
|
138
|
-
} else if (
|
|
179
|
+
} else if (mouseX >= centerX && mouseY >= centerY) {
|
|
139
180
|
return tipPosMap.rightBottom;
|
|
140
181
|
} else {
|
|
141
182
|
return tipPosMap.leftBottom;
|
package/package.json
CHANGED
|
@@ -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
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
if (
|
|
92
|
-
|
|
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
|
-
|
|
114
|
-
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
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
|
-
|
|
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 (
|
|
168
|
+
} else if (mouseX > centerX && mouseY < centerY) {
|
|
125
169
|
return tipPosMap.rightTop
|
|
126
|
-
} else if (
|
|
170
|
+
} else if (mouseX >= centerX && mouseY >= centerY) {
|
|
127
171
|
return tipPosMap.rightBottom
|
|
128
172
|
} else {
|
|
129
173
|
return tipPosMap.leftBottom
|