@easyv/charts 1.9.25 → 1.9.26

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.
Files changed (5) hide show
  1. package/lib/components/Tooltip.js +39 -14
  2. package/lib/components/pieTooltip.js +41 -15
  3. package/package.json +1 -1
  4. package/src/components/PieTooltip.jsx +70 -47
  5. package/src/components/Tooltip.js +68 -47
package/lib/components/Tooltip.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports["default"] = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _react = require("react");
10
11
  var _utils = require("../utils");
11
12
  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; }
@@ -41,9 +42,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
41
42
  bgColor = _ref$config$tip.bgColor,
42
43
  image = _ref$config$tip.image,
43
44
  margin = _ref$config$tip.margin,
44
- _ref$config$tip$size = _ref$config$tip.size,
45
- tipWidth = _ref$config$tip$size.width,
46
- tipHeight = _ref$config$tip$size.height,
47
45
  translateTip = _ref$config$tip.translate,
48
46
  formatter = _ref.formatter,
49
47
  isVertical = _ref.isVertical,
@@ -51,32 +49,57 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
51
49
  height = _ref.height,
52
50
  auto = _ref.auto,
53
51
  manual = _ref.manual;
52
+ var tooltipRef = (0, _react.useRef)(null);
53
+ var _useState = (0, _react.useState)({
54
+ width: 0,
55
+ height: 0
56
+ }),
57
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
58
+ tooltipSize = _useState2[0],
59
+ setTooltipSize = _useState2[1];
54
60
  var tipPosition = (0, _react.useMemo)(function () {
55
61
  var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
56
62
  y: translateTip.y + position + marginTop
57
63
  }) : _objectSpread(_objectSpread({}, translateTip), {}, {
58
64
  x: translateTip.x + position + marginLeft
59
65
  });
60
- if (!isVertical && translate3d.x + tipWidth > width) {
61
- var newPositon = position + marginLeft - tipWidth - translateTip.x;
66
+ if (!isVertical && translate3d.x + tooltipSize.width > width) {
67
+ var newPositon = position + marginLeft - tooltipSize.width - translateTip.x;
62
68
  translate3d.x = newPositon >= 0 ? newPositon : 0;
63
69
  }
64
- if (isVertical && translate3d.y + tipHeight > height) {
65
- var _newPositon = position + marginTop - tipHeight - translateTip.y;
66
- translate3d.y = _newPositon <= 0 ? _newPositon : height - tipHeight;
70
+ if (isVertical && translate3d.y + tooltipSize.height > height) {
71
+ var _newPositon = position + marginTop - tooltipSize.height - translateTip.y;
72
+ translate3d.y = _newPositon <= 0 ? _newPositon : height - tooltipSize.height;
67
73
  }
68
74
  return (0, _utils.getTranslate3d)(translate3d);
69
- }, [width, height, marginLeft, marginTop, position, tipWidth, tipHeight, translateTip]);
75
+ }, [width, height, marginLeft, marginTop, position, tooltipSize, translateTip]);
76
+ (0, _react.useEffect)(function () {
77
+ if (tooltipRef.current && (manual || auto)) {
78
+ var rect = tooltipRef.current.getBoundingClientRect();
79
+ setTooltipSize({
80
+ width: rect.width,
81
+ height: rect.height
82
+ });
83
+ }
84
+ }, [manual, auto, formatter, data, series, x]);
70
85
  return manual || auto ? /*#__PURE__*/React.createElement("div", {
86
+ ref: tooltipRef,
71
87
  className: "__easyv-tooltip",
72
- style: _objectSpread({
88
+ style: _objectSpread(_objectSpread({
73
89
  pointerEvents: "none",
74
90
  transform: tipPosition,
75
- width: tipWidth,
76
- minHeight: tipHeight,
91
+ display: "inline-block",
92
+ position: "absolute",
93
+ margin: 0,
94
+ boxSizing: "border-box",
77
95
  padding: (0, _utils.getMargin)(margin),
78
96
  background: bgType == "image" ? image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "transparent" : bgColor
79
- }, (0, _utils.getFontStyle)(font))
97
+ }, (0, _utils.getFontStyle)(font)), {}, {
98
+ width: "fit-content",
99
+ maxWidth: "none",
100
+ overflow: "visible",
101
+ zIndex: 9999
102
+ })
80
103
  }, formatter ? formatter({
81
104
  series: series,
82
105
  x: {
@@ -93,7 +116,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
93
116
  flexDirection: "column",
94
117
  justifyContent: "space-between",
95
118
  gap: gap,
96
- height: "100%"
119
+ height: "100%",
120
+ width: "auto",
121
+ maxWidth: "none"
97
122
  }
98
123
  }, /*#__PURE__*/React.createElement("div", {
99
124
  style: _objectSpread({
package/lib/components/pieTooltip.js CHANGED
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.PieTooltip = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _utils = require("../utils");
14
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -37,13 +37,32 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
37
37
  precision = _props$config$tip$dat3.precision,
38
38
  image = _props$config$tip.image,
39
39
  margin = _props$config$tip.margin,
40
- _props$config$tip$siz = _props$config$tip.size,
41
- tipWidth = _props$config$tip$siz.width,
42
- tipHeight = _props$config$tip$siz.height,
43
40
  translateTip = _props$config$tip.translate,
44
41
  data = props.data,
45
42
  series = props.series;
43
+ var tooltipRef = (0, _react.useRef)(null);
44
+ // 2. 存储tooltip的实际宽高
45
+ var _useState = (0, _react.useState)({
46
+ width: 0,
47
+ height: 0
48
+ }),
49
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
50
+ tooltipSize = _useState2[0],
51
+ setTooltipSize = _useState2[1];
46
52
  var screenRef = domRef.current.getBoundingClientRect();
53
+ (0, _react.useEffect)(function () {
54
+ if (tooltipRef.current && mousePos) {
55
+ try {
56
+ var rect = tooltipRef.current.getBoundingClientRect();
57
+ setTooltipSize({
58
+ width: rect.width,
59
+ height: rect.height
60
+ });
61
+ } catch (e) {
62
+ console.error("获取tooltip尺寸失败:", e);
63
+ }
64
+ }
65
+ }, [mousePos, data, series, lineHeight, iconSize]);
47
66
  var Item = function Item() {
48
67
  var _data$data = data.data,
49
68
  s = _data$data.s,
@@ -61,7 +80,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
61
80
  suffixTranslate = suffix.translate;
62
81
  return /*#__PURE__*/_react["default"].createElement("span", {
63
82
  style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(suffiixFont)), {}, {
64
- display: "inline-block",
83
+ // display: "inline-block",
65
84
  transform: (0, _utils.getTranslate3d)(suffixTranslate)
66
85
  })
67
86
  }, content);
@@ -71,7 +90,8 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
71
90
  style: {
72
91
  display: "flex",
73
92
  justifyContent: "space-between",
74
- lineHeight: lineHeight + "px"
93
+ lineHeight: lineHeight + "px",
94
+ alignItems: "center"
75
95
  }
76
96
  }, /*#__PURE__*/_react["default"].createElement("span", {
77
97
  style: {
@@ -88,9 +108,13 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
88
108
  }), /*#__PURE__*/_react["default"].createElement("span", {
89
109
  style: (0, _utils.getFontStyle)(name)
90
110
  }, displayName || s)), valueIsShow && /*#__PURE__*/_react["default"].createElement("span", {
91
- style: (0, _utils.getFontStyle)(valueFont)
111
+ style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
112
+ marginLeft: "10px"
113
+ })
92
114
  }, y, valueSuffixIsShow && renderSuffix(valueSuffix)), percentageIsShow && /*#__PURE__*/_react["default"].createElement("span", {
93
- style: (0, _utils.getFontStyle)(percentageFont)
115
+ style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentageFont)), {}, {
116
+ marginLeft: "10px"
117
+ })
94
118
  }, Number(percent).toFixed(precision), percentageSuffixIsShow && renderSuffix(percentageSuffix)));
95
119
  };
96
120
  var getBigScreenScale = function getBigScreenScale() {
@@ -165,10 +189,10 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
165
189
  centerY = pieCenter.y;
166
190
  var getTipPos = function getTipPos() {
167
191
  var tipPosMap = {
168
- 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)"),
169
- 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)"),
170
- 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)"),
171
- 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)")
192
+ rightTop: "translate(".concat((screenRef.x + translateTip.x + tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tooltipSize.width - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y - translateTip.y - tooltipSize.height) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tooltipSize.height - translateTip.y, "px)"),
193
+ leftTop: "translate(".concat((screenRef.x - translateTip.x - tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tooltipSize.width, "px,").concat((screenRef.y - translateTip.y - tooltipSize.height) / scaleY + mouseY - screenTop / scaleY < 0 ? mouseY + translateTip.y : mouseY - tooltipSize.height - translateTip.y, "px)"),
194
+ leftBottom: "translate(".concat((screenRef.x - translateTip.x - tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX < 0 ? mouseX + translateTip.x : mouseX - translateTip.x - tooltipSize.width, "px,").concat((screenRef.y + translateTip.y + tooltipSize.height) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tooltipSize.height : mouseY + translateTip.y, "px)"),
195
+ rightBottom: "translate(".concat((screenRef.x + translateTip.x + tooltipSize.width) / scaleX + mouseX - screenLeft / scaleX > screenWidth / scaleX ? mouseX - tooltipSize.width - translateTip.x : mouseX + translateTip.x, "px,").concat((screenRef.y + translateTip.y + tooltipSize.height) / scaleY + mouseY - screenTop / scaleY > screenHeight / scaleY ? mouseY - translateTip.y - tooltipSize.height : mouseY + translateTip.y, "px)")
172
196
  };
173
197
  if (mouseX < centerX && mouseY < centerY) {
174
198
  return tipPosMap.leftTop;
@@ -181,20 +205,22 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
181
205
  }
182
206
  };
183
207
  return /*#__PURE__*/_react["default"].createElement("div", {
208
+ ref: tooltipRef,
184
209
  className: "__easyv-tooltip",
185
210
  style: {
186
211
  pointerEvents: "none",
187
212
  transform: getTipPos(mousePos, pieCenter),
188
- width: tipWidth,
189
- height: tipHeight,
213
+ boxSizing: "border-box",
190
214
  padding: (0, _utils.getMargin)(margin),
191
- background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)"
215
+ background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)",
216
+ overflow: "hidden"
192
217
  }
193
218
  }, /*#__PURE__*/_react["default"].createElement("dl", {
194
219
  style: {
195
220
  display: "flex",
196
221
  flexDirection: "column",
197
222
  justifyContent: "space-between",
223
+ margin: 0,
198
224
  height: "100%"
199
225
  }
200
226
  }, Item()));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/charts",
3
- "version": "1.9.25",
3
+ "version": "1.9.26",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/PieTooltip.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo } from "react";
1
+ import React, { memo,useRef,useState,useEffect } from "react";
2
2
  import {
3
3
  getFontStyle,
4
4
  getMargin,
@@ -34,14 +34,34 @@ export const PieTooltip = memo((props) => {
34
34
  },
35
35
  image,
36
36
  margin,
37
- size: { width: tipWidth, height: tipHeight },
37
+ // size: { width: tooltipSize.width, height: tooltipSize.height },
38
38
  translate: translateTip,
39
39
  },
40
40
  },
41
41
  data,
42
42
  series,
43
43
  } = props;
44
+ const tooltipRef = useRef(null);
45
+ // 2. 存储tooltip的实际宽高
46
+ const [tooltipSize, setTooltipSize] = useState({
47
+ width: 0,
48
+ height: 0,
49
+ });
44
50
  const screenRef = domRef.current.getBoundingClientRect();
51
+ useEffect(() => {
52
+ if (tooltipRef.current && mousePos) {
53
+ try {
54
+ const rect = tooltipRef.current.getBoundingClientRect();
55
+ setTooltipSize({
56
+ width: rect.width,
57
+ height: rect.height,
58
+ });
59
+
60
+ } catch (e) {
61
+ console.error("获取tooltip尺寸失败:", e);
62
+ }
63
+ }
64
+ }, [mousePos, data, series, lineHeight, iconSize]);
45
65
  const Item = () => {
46
66
  const {
47
67
  data: { s, y },
@@ -57,7 +77,7 @@ export const PieTooltip = memo((props) => {
57
77
  <span
58
78
  style={{
59
79
  ...getFontStyle(suffiixFont),
60
- display: "inline-block",
80
+ // display: "inline-block",
61
81
  transform: getTranslate3d(suffixTranslate),
62
82
  }}
63
83
  >
@@ -73,6 +93,7 @@ export const PieTooltip = memo((props) => {
73
93
  display: "flex",
74
94
  justifyContent: "space-between",
75
95
  lineHeight: lineHeight + "px",
96
+ alignItems:"center"
76
97
  }}
77
98
  >
78
99
  <span
@@ -93,13 +114,13 @@ export const PieTooltip = memo((props) => {
93
114
  <span style={getFontStyle(name)}>{displayName || s}</span>
94
115
  </span>
95
116
  {valueIsShow && (
96
- <span style={getFontStyle(valueFont)}>
117
+ <span style={{...getFontStyle(valueFont),marginLeft:"10px"}}>
97
118
  {y}
98
119
  {valueSuffixIsShow && renderSuffix(valueSuffix)}
99
120
  </span>
100
121
  )}
101
122
  {percentageIsShow && (
102
- <span style={getFontStyle(percentageFont)}>
123
+ <span style={{...getFontStyle(percentageFont),marginLeft:"10px"}}>
103
124
  {Number(percent).toFixed(precision)}
104
125
  {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
105
126
  </span>
@@ -183,63 +204,63 @@ export const PieTooltip = memo((props) => {
183
204
  const getTipPos = () => {
184
205
  const tipPosMap = {
185
206
  rightTop: `translate(${
186
- (screenRef.x + translateTip.x + tipWidth) / scaleX +
207
+ (screenRef.x + translateTip.x + tooltipSize.width) / scaleX +
187
208
  mouseX -
188
209
  screenLeft / scaleX >
189
210
  screenWidth / scaleX
190
- ? mouseX - tipWidth - translateTip.x
211
+ ? mouseX - tooltipSize.width - translateTip.x
191
212
  : mouseX + translateTip.x
192
213
  }px,${
193
- (screenRef.y - translateTip.y - tipHeight) / scaleY +
214
+ (screenRef.y - translateTip.y - tooltipSize.height) / scaleY +
194
215
  mouseY -
195
216
  screenTop / scaleY <
196
217
  0
197
218
  ? mouseY + translateTip.y
198
- : mouseY - tipHeight - translateTip.y
219
+ : mouseY - tooltipSize.height - translateTip.y
199
220
  }px)`,
200
221
  leftTop: `translate(${
201
- (screenRef.x - translateTip.x - tipWidth) / scaleX +
222
+ (screenRef.x - translateTip.x - tooltipSize.width) / scaleX +
202
223
  mouseX -
203
224
  screenLeft / scaleX <
204
225
  0
205
226
  ? mouseX + translateTip.x
206
- : mouseX - translateTip.x - tipWidth
227
+ : mouseX - translateTip.x - tooltipSize.width
207
228
  }px,${
208
- (screenRef.y - translateTip.y - tipHeight) / scaleY +
229
+ (screenRef.y - translateTip.y - tooltipSize.height) / scaleY +
209
230
  mouseY -
210
231
  screenTop / scaleY <
211
232
  0
212
233
  ? mouseY + translateTip.y
213
- : mouseY - tipHeight - translateTip.y
234
+ : mouseY - tooltipSize.height - translateTip.y
214
235
  }px)`,
215
236
  leftBottom: `translate(${
216
- (screenRef.x - translateTip.x - tipWidth) / scaleX +
237
+ (screenRef.x - translateTip.x - tooltipSize.width) / scaleX +
217
238
  mouseX -
218
239
  screenLeft / scaleX <
219
240
  0
220
241
  ? mouseX + translateTip.x
221
- : mouseX - translateTip.x - tipWidth
242
+ : mouseX - translateTip.x - tooltipSize.width
222
243
  }px,${
223
- (screenRef.y + translateTip.y + tipHeight) / scaleY +
244
+ (screenRef.y + translateTip.y + tooltipSize.height) / scaleY +
224
245
  mouseY -
225
246
  screenTop / scaleY >
226
247
  screenHeight / scaleY
227
- ? mouseY - translateTip.y - tipHeight
248
+ ? mouseY - translateTip.y - tooltipSize.height
228
249
  : mouseY + translateTip.y
229
250
  }px)`,
230
251
  rightBottom: `translate(${
231
- (screenRef.x + translateTip.x + tipWidth) / scaleX +
252
+ (screenRef.x + translateTip.x + tooltipSize.width) / scaleX +
232
253
  mouseX -
233
254
  screenLeft / scaleX >
234
255
  screenWidth / scaleX
235
- ? mouseX - tipWidth - translateTip.x
256
+ ? mouseX - tooltipSize.width - translateTip.x
236
257
  : mouseX + translateTip.x
237
258
  }px,${
238
- (screenRef.y + translateTip.y + tipHeight) / scaleY +
259
+ (screenRef.y + translateTip.y + tooltipSize.height) / scaleY +
239
260
  mouseY -
240
261
  screenTop / scaleY >
241
262
  screenHeight / scaleY
242
- ? mouseY - translateTip.y - tipHeight
263
+ ? mouseY - translateTip.y - tooltipSize.height
243
264
  : mouseY + translateTip.y
244
265
  }px)`,
245
266
  };
@@ -256,31 +277,33 @@ export const PieTooltip = memo((props) => {
256
277
 
257
278
  return (
258
279
  <div
259
- className="__easyv-tooltip"
260
- style={{
261
- pointerEvents: "none",
262
- transform: getTipPos(mousePos, pieCenter),
263
- width: tipWidth,
264
- height: tipHeight,
265
- padding: getMargin(margin),
266
- background: image
267
- ? "50% 50% / 100% 100% no-repeat url(" +
268
- window.appConfig.ASSETS_URL +
269
- image +
270
- ")"
271
- : "rgba(48, 55, 66, 0.85)",
272
- }}
273
- >
274
- <dl
275
- style={{
276
- display: "flex",
277
- flexDirection: "column",
278
- justifyContent: "space-between",
279
- height: "100%",
280
- }}
281
- >
282
- {Item()}
283
- </dl>
284
- </div>
280
+ ref={tooltipRef}
281
+ className="__easyv-tooltip"
282
+ style={{
283
+ pointerEvents: "none",
284
+ transform: getTipPos(mousePos, pieCenter),
285
+ boxSizing: "border-box",
286
+ padding: getMargin(margin),
287
+ background: image
288
+ ? "50% 50% / 100% 100% no-repeat url(" +
289
+ window.appConfig.ASSETS_URL +
290
+ image +
291
+ ")"
292
+ : "rgba(48, 55, 66, 0.85)",
293
+ overflow: "hidden",
294
+ }}
295
+ >
296
+ <dl
297
+ style={{
298
+ display: "flex",
299
+ flexDirection: "column",
300
+ justifyContent: "space-between",
301
+ margin: 0,
302
+ height: "100%",
303
+ }}
304
+ >
305
+ {Item()}
306
+ </dl>
307
+ </div>
285
308
  );
286
309
  });
package/src/components/Tooltip.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * 提示框
3
3
  */
4
- import { memo, useMemo } from "react";
4
+ import { memo, useMemo, useRef, useEffect, useState } from "react";
5
5
  import { getFontStyle, getMargin, getTranslate3d } from "../utils";
6
6
  import { getIcon } from "../utils";
7
7
  export default memo(
@@ -32,7 +32,6 @@ export default memo(
32
32
  bgColor,
33
33
  image,
34
34
  margin,
35
- size: { width: tipWidth, height: tipHeight },
36
35
  translate: translateTip,
37
36
  },
38
37
  },
@@ -43,6 +42,11 @@ export default memo(
43
42
  auto,
44
43
  manual,
45
44
  }) => {
45
+ const tooltipRef = useRef(null);
46
+ const [tooltipSize, setTooltipSize] = useState({
47
+ width: 0,
48
+ height: 0,
49
+ });
46
50
  const tipPosition = useMemo(() => {
47
51
  const translate3d = isVertical
48
52
  ? {
@@ -53,13 +57,13 @@ export default memo(
53
57
  ...translateTip,
54
58
  x: translateTip.x + position + marginLeft,
55
59
  };
56
- if (!isVertical && translate3d.x + tipWidth > width) {
57
- const newPositon = position + marginLeft - tipWidth - translateTip.x;
60
+ if (!isVertical && translate3d.x + tooltipSize.width > width) {
61
+ const newPositon = position + marginLeft - tooltipSize.width - translateTip.x;
58
62
  translate3d.x = newPositon >= 0 ? newPositon : 0;
59
63
  }
60
- if (isVertical && translate3d.y + tipHeight > height) {
61
- const newPositon = position + marginTop - tipHeight - translateTip.y;
62
- translate3d.y = newPositon <= 0 ? newPositon : height - tipHeight;
64
+ if (isVertical && translate3d.y + tooltipSize.height > height) {
65
+ const newPositon = position + marginTop - tooltipSize.height - translateTip.y;
66
+ translate3d.y = newPositon <= 0 ? newPositon : height - tooltipSize.height;
63
67
  }
64
68
  return getTranslate3d(translate3d);
65
69
  }, [
@@ -68,48 +72,65 @@ export default memo(
68
72
  marginLeft,
69
73
  marginTop,
70
74
  position,
71
- tipWidth,
72
- tipHeight,
75
+ tooltipSize,
73
76
  translateTip,
74
77
  ]);
78
+ useEffect(() => {
79
+ if (tooltipRef.current && (manual || auto)) {
80
+ const rect = tooltipRef.current.getBoundingClientRect();
81
+ setTooltipSize({
82
+ width: rect.width,
83
+ height: rect.height,
84
+ });
85
+ }
86
+ }, [manual, auto, formatter, data, series, x]);
75
87
  return manual || auto ? (
76
88
  <div
77
- className="__easyv-tooltip"
78
- style={{
79
- pointerEvents: "none",
80
- transform: tipPosition,
81
- width: tipWidth,
82
- minHeight: tipHeight,
83
- padding: getMargin(margin),
84
- background:
85
- bgType == "image"
86
- ? image
87
- ? "50% 50% / 100% 100% no-repeat url(" +
88
- window.appConfig.ASSETS_URL +
89
- image +
90
- ")"
91
- : "transparent"
92
- : bgColor,
93
- ...getFontStyle(font),
94
- }}
95
- >
96
- {formatter ? (
97
- formatter({
98
- series,
99
- x: { x, config: xAxis },
100
- data: { data, config: dataConfig },
101
- })
102
- ) : (
89
+ ref={tooltipRef}
90
+ className="__easyv-tooltip"
91
+ style={{
92
+ pointerEvents: "none",
93
+ transform: tipPosition,
94
+ display: "inline-block",
95
+ position: "absolute",
96
+ margin: 0,
97
+ boxSizing: "border-box",
98
+ padding: getMargin(margin),
99
+ background:
100
+ bgType == "image"
101
+ ? image
102
+ ? "50% 50% / 100% 100% no-repeat url(" +
103
+ window.appConfig.ASSETS_URL +
104
+ image +
105
+ ")"
106
+ : "transparent"
107
+ : bgColor,
108
+ ...getFontStyle(font),
109
+ width: "fit-content",
110
+ maxWidth: "none",
111
+ overflow: "visible",
112
+ zIndex: 9999,
113
+ }}
114
+ >
115
+ {formatter ? (
116
+ formatter({
117
+ series,
118
+ x: { x, config: xAxis },
119
+ data: { data, config: dataConfig },
120
+ })
121
+ ) : (
122
+ <div
123
+ style={{
124
+ display: "flex",
125
+ flexDirection: "column",
126
+ justifyContent: "space-between",
127
+ gap,
128
+ height: "100%",
129
+ width: "auto",
130
+ maxWidth: "none",
131
+ }}
132
+ >
103
133
  <div
104
- style={{
105
- display: "flex",
106
- flexDirection: "column",
107
- justifyContent: "space-between",
108
- gap,
109
- height: "100%",
110
- }}
111
- >
112
- <div
113
134
  style={{
114
135
  textAlign: align,
115
136
  transform: getTranslate3d(translateXAxis),
@@ -192,9 +213,9 @@ export default memo(
192
213
  );
193
214
  })}
194
215
  </div>
195
- </div>
196
- )}
197
- </div>
216
+ </div>
217
+ )}
218
+ </div>
198
219
  ) : (
199
220
  ""
200
221
  );