@easyv/charts 1.10.34 → 1.10.36
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.
- package/lib/components/PieChart.js +507 -289
- package/package.json +2 -2
- package/src/components/PieChart.js +1835 -1629
|
@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
11
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
14
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
15
|
var _ = require(".");
|
|
16
16
|
var _context = require("../context");
|
|
@@ -27,8 +27,8 @@ var _excluded = ["startAngle", "endAngle", "antiClockwise"],
|
|
|
27
27
|
_excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
|
|
28
28
|
_excluded3 = ["formatter"],
|
|
29
29
|
_excluded4 = ["startAngle", "endAngle"];
|
|
30
|
-
/**
|
|
31
|
-
* 饼环图
|
|
30
|
+
/**
|
|
31
|
+
* 饼环图
|
|
32
32
|
*/
|
|
33
33
|
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); }
|
|
34
34
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -196,16 +196,127 @@ var getCoord = function getCoord(deg, radius) {
|
|
|
196
196
|
y = Math.sin(deg) * radius;
|
|
197
197
|
return [x, y];
|
|
198
198
|
};
|
|
199
|
-
var
|
|
200
|
-
var
|
|
201
|
-
|
|
199
|
+
var parseFontSize = function parseFontSize(value) {
|
|
200
|
+
var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 12;
|
|
201
|
+
var n = parseFloat(value);
|
|
202
|
+
return Number.isFinite(n) ? n : fallback;
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
// 与 getFontStyle 一致:实际行盒高度取 lineHeight,否则用 fontSize
|
|
206
|
+
var getFontLineHeight = function getFontLineHeight(font) {
|
|
207
|
+
var fontSize = parseFontSize(font === null || font === void 0 ? void 0 : font.fontSize);
|
|
208
|
+
var lineHeight = parseFontSize(font === null || font === void 0 ? void 0 : font.lineHeight, 0);
|
|
209
|
+
return Math.max(lineHeight, fontSize);
|
|
210
|
+
};
|
|
211
|
+
var getLabelRowHeight = function getLabelRowHeight(_ref) {
|
|
212
|
+
var showName = _ref.showName,
|
|
213
|
+
showValue = _ref.showValue,
|
|
214
|
+
showPercent = _ref.showPercent,
|
|
215
|
+
nameFont = _ref.nameFont,
|
|
216
|
+
valueFont = _ref.valueFont,
|
|
217
|
+
percentFont = _ref.percentFont;
|
|
218
|
+
var sizes = [];
|
|
219
|
+
if (showName) sizes.push(getFontLineHeight(nameFont));
|
|
220
|
+
if (showValue) sizes.push(getFontLineHeight(valueFont));
|
|
221
|
+
if (showPercent) sizes.push(getFontLineHeight(percentFont));
|
|
222
|
+
return sizes.length ? Math.max.apply(Math, sizes) : 12;
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
// 上下布局:名称/数值/百分比纵向排列,高度 = 各可见行的行高之和
|
|
226
|
+
var getLabelColumnHeight = function getLabelColumnHeight(_ref2) {
|
|
227
|
+
var showName = _ref2.showName,
|
|
228
|
+
showValue = _ref2.showValue,
|
|
229
|
+
showPercent = _ref2.showPercent,
|
|
230
|
+
nameFont = _ref2.nameFont,
|
|
231
|
+
valueFont = _ref2.valueFont,
|
|
232
|
+
percentFont = _ref2.percentFont;
|
|
233
|
+
var height = 0;
|
|
234
|
+
if (showName) height += getFontLineHeight(nameFont);
|
|
235
|
+
if (showValue) height += getFontLineHeight(valueFont);
|
|
236
|
+
if (showPercent) height += getFontLineHeight(percentFont);
|
|
237
|
+
return height || 12;
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
// 大屏 transform:scale 后 getBoundingClientRect 会带缩放;offsetHeight 不受 transform 影响,与 SVG 坐标一致
|
|
241
|
+
var getLabelDomHeight = function getLabelDomHeight(el) {
|
|
242
|
+
if (!el) return 0;
|
|
243
|
+
if (el.offsetHeight) return el.offsetHeight;
|
|
244
|
+
var rect = el.getBoundingClientRect();
|
|
245
|
+
if (!rect.height) return 0;
|
|
246
|
+
// offsetHeight 不可用时,用宽高比估算当前 scaleY 再还原
|
|
247
|
+
var scaleY = el.offsetWidth > 0 && rect.width > 0 ? rect.width / el.offsetWidth : 1;
|
|
248
|
+
return Math.round(rect.height / (scaleY || 1));
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
// 水平布局:同侧重叠时按半高之和推开
|
|
252
|
+
var resolveLabelY = function resolveLabelY(y2, side, placedYBySide, labelHeight) {
|
|
253
|
+
var placed = placedYBySide[side];
|
|
254
|
+
var finalY = y2;
|
|
255
|
+
var stackDown = y2 >= 0;
|
|
256
|
+
var isOverlap = function isOverlap(y, py, h) {
|
|
257
|
+
return Math.abs(y - py) < (labelHeight + h) / 2;
|
|
258
|
+
};
|
|
259
|
+
var guard = 0;
|
|
260
|
+
while (guard++ < 50 && placed.some(function (_ref3) {
|
|
261
|
+
var py = _ref3.y,
|
|
262
|
+
h = _ref3.height;
|
|
263
|
+
return isOverlap(finalY, py, h);
|
|
264
|
+
})) {
|
|
265
|
+
var hits = placed.filter(function (_ref4) {
|
|
266
|
+
var py = _ref4.y,
|
|
267
|
+
h = _ref4.height;
|
|
268
|
+
return isOverlap(finalY, py, h);
|
|
269
|
+
});
|
|
270
|
+
finalY = stackDown ? Math.max.apply(Math, (0, _toConsumableArray2["default"])(hits.map(function (_ref5) {
|
|
271
|
+
var py = _ref5.y,
|
|
272
|
+
h = _ref5.height;
|
|
273
|
+
return py + (labelHeight + h) / 2;
|
|
274
|
+
}))) : Math.min.apply(Math, (0, _toConsumableArray2["default"])(hits.map(function (_ref6) {
|
|
275
|
+
var py = _ref6.y,
|
|
276
|
+
h = _ref6.height;
|
|
277
|
+
return py - (labelHeight + h) / 2;
|
|
278
|
+
})));
|
|
279
|
+
}
|
|
280
|
+
placed.push({
|
|
281
|
+
y: finalY,
|
|
282
|
+
height: labelHeight
|
|
283
|
+
});
|
|
284
|
+
return finalY;
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
// 上下布局:过近时只按「自身标签高度」相对上一个已放置位置偏移
|
|
288
|
+
var resolveLabelYVertical = function resolveLabelYVertical(y2, side, placedYBySide, labelHeight) {
|
|
289
|
+
var placed = placedYBySide[side];
|
|
290
|
+
var stackDown = y2 >= 0;
|
|
291
|
+
var finalY = y2;
|
|
292
|
+
if (placed.some(function (_ref7) {
|
|
293
|
+
var py = _ref7.y;
|
|
294
|
+
return Math.abs(finalY - py) < labelHeight;
|
|
295
|
+
})) {
|
|
296
|
+
finalY = stackDown ? Math.max.apply(Math, (0, _toConsumableArray2["default"])(placed.map(function (_ref8) {
|
|
297
|
+
var py = _ref8.y;
|
|
298
|
+
return py;
|
|
299
|
+
}))) + labelHeight : Math.min.apply(Math, (0, _toConsumableArray2["default"])(placed.map(function (_ref9) {
|
|
300
|
+
var py = _ref9.y;
|
|
301
|
+
return py;
|
|
302
|
+
}))) - labelHeight;
|
|
303
|
+
}
|
|
304
|
+
placed.push({
|
|
305
|
+
y: finalY,
|
|
306
|
+
height: labelHeight
|
|
307
|
+
});
|
|
308
|
+
return finalY;
|
|
309
|
+
};
|
|
310
|
+
var getRoseRadius = function getRoseRadius(_ref10) {
|
|
311
|
+
var innerRadius = _ref10.innerRadius,
|
|
312
|
+
baseRadius = _ref10.baseRadius;
|
|
202
313
|
return innerRadius + (1 - innerRadius) * baseRadius;
|
|
203
314
|
};
|
|
204
|
-
var getAngle = function getAngle(
|
|
205
|
-
var startAngle =
|
|
206
|
-
endAngle =
|
|
207
|
-
antiClockwise =
|
|
208
|
-
rest = (0, _objectWithoutProperties2["default"])(
|
|
315
|
+
var getAngle = function getAngle(_ref11) {
|
|
316
|
+
var startAngle = _ref11.startAngle,
|
|
317
|
+
endAngle = _ref11.endAngle,
|
|
318
|
+
antiClockwise = _ref11.antiClockwise,
|
|
319
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref11, _excluded);
|
|
209
320
|
if (antiClockwise) return _objectSpread(_objectSpread({}, rest), {}, {
|
|
210
321
|
startAngle: endAngle - 180,
|
|
211
322
|
endAngle: startAngle - 180
|
|
@@ -215,20 +326,20 @@ var getAngle = function getAngle(_ref2) {
|
|
|
215
326
|
endAngle: endAngle
|
|
216
327
|
});
|
|
217
328
|
};
|
|
218
|
-
var getArc = function getArc(radius,
|
|
219
|
-
var
|
|
220
|
-
padAngle =
|
|
221
|
-
|
|
222
|
-
innerRadius =
|
|
223
|
-
|
|
224
|
-
outerRadius =
|
|
225
|
-
|
|
226
|
-
cornerRadius =
|
|
227
|
-
|
|
228
|
-
startAngle =
|
|
229
|
-
|
|
230
|
-
endAngle =
|
|
231
|
-
rest = (0, _objectWithoutProperties2["default"])(
|
|
329
|
+
var getArc = function getArc(radius, _ref12, series_, index) {
|
|
330
|
+
var _ref12$padAngle = _ref12.padAngle,
|
|
331
|
+
padAngle = _ref12$padAngle === void 0 ? 0 : _ref12$padAngle,
|
|
332
|
+
_ref12$innerRadius = _ref12.innerRadius,
|
|
333
|
+
innerRadius = _ref12$innerRadius === void 0 ? 0 : _ref12$innerRadius,
|
|
334
|
+
_ref12$outerRadius = _ref12.outerRadius,
|
|
335
|
+
outerRadius = _ref12$outerRadius === void 0 ? 1 : _ref12$outerRadius,
|
|
336
|
+
_ref12$cornerRadius = _ref12.cornerRadius,
|
|
337
|
+
cornerRadius = _ref12$cornerRadius === void 0 ? 0 : _ref12$cornerRadius,
|
|
338
|
+
_ref12$startAngle = _ref12.startAngle,
|
|
339
|
+
startAngle = _ref12$startAngle === void 0 ? 0 : _ref12$startAngle,
|
|
340
|
+
_ref12$endAngle = _ref12.endAngle,
|
|
341
|
+
endAngle = _ref12$endAngle === void 0 ? 360 : _ref12$endAngle,
|
|
342
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref12, _excluded2);
|
|
232
343
|
var series = series_.find(function (s) {
|
|
233
344
|
return s.fieldName == rest.data.s;
|
|
234
345
|
}) || series_[index % series_.length];
|
|
@@ -243,11 +354,11 @@ var getArc = function getArc(radius, _ref3, series_, index) {
|
|
|
243
354
|
});
|
|
244
355
|
};
|
|
245
356
|
var getCircleScale = function getCircleScale() {
|
|
246
|
-
var
|
|
247
|
-
count =
|
|
248
|
-
color =
|
|
249
|
-
width =
|
|
250
|
-
length =
|
|
357
|
+
var _ref13 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tick,
|
|
358
|
+
count = _ref13.count,
|
|
359
|
+
color = _ref13.color,
|
|
360
|
+
width = _ref13.width,
|
|
361
|
+
length = _ref13.length;
|
|
251
362
|
var radius = arguments.length > 1 ? arguments[1] : undefined;
|
|
252
363
|
var data = [],
|
|
253
364
|
arcs = [],
|
|
@@ -273,78 +384,78 @@ var getCircleScale = function getCircleScale() {
|
|
|
273
384
|
});
|
|
274
385
|
}));
|
|
275
386
|
};
|
|
276
|
-
var Component = /*#__PURE__*/(0, _react.memo)(function (
|
|
387
|
+
var Component = /*#__PURE__*/(0, _react.memo)(function (_ref14) {
|
|
277
388
|
var _legend$config2;
|
|
278
|
-
var width =
|
|
279
|
-
height =
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
label =
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
formatter =
|
|
286
|
-
legend = (0, _objectWithoutProperties2["default"])(
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
ringDuration =
|
|
290
|
-
labelDuration =
|
|
291
|
-
|
|
292
|
-
marginLeft =
|
|
293
|
-
marginTop =
|
|
294
|
-
marginRight =
|
|
295
|
-
marginBottom =
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
chart =
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
outerRadius =
|
|
303
|
-
padAngle =
|
|
304
|
-
|
|
305
|
-
angle =
|
|
306
|
-
|
|
307
|
-
|
|
389
|
+
var width = _ref14.width,
|
|
390
|
+
height = _ref14.height,
|
|
391
|
+
_ref14$config = _ref14.config,
|
|
392
|
+
_ref14$config$chart = _ref14$config.chart,
|
|
393
|
+
label = _ref14$config$chart.label,
|
|
394
|
+
_ref14$config$chart$l = _ref14$config$chart.legend,
|
|
395
|
+
_ref14$config$chart$l2 = _ref14$config$chart$l.formatter,
|
|
396
|
+
formatter = _ref14$config$chart$l2 === void 0 ? _formatter.pieLegendFormatter : _ref14$config$chart$l2,
|
|
397
|
+
legend = (0, _objectWithoutProperties2["default"])(_ref14$config$chart$l, _excluded3),
|
|
398
|
+
_ref14$config$chart$a = _ref14$config$chart.animation,
|
|
399
|
+
_ref14$config$chart$a2 = _ref14$config$chart$a === void 0 ? {} : _ref14$config$chart$a,
|
|
400
|
+
ringDuration = _ref14$config$chart$a2.ringDuration,
|
|
401
|
+
labelDuration = _ref14$config$chart$a2.labelDuration,
|
|
402
|
+
_ref14$config$chart$m = _ref14$config$chart.margin,
|
|
403
|
+
marginLeft = _ref14$config$chart$m.marginLeft,
|
|
404
|
+
marginTop = _ref14$config$chart$m.marginTop,
|
|
405
|
+
marginRight = _ref14$config$chart$m.marginRight,
|
|
406
|
+
marginBottom = _ref14$config$chart$m.marginBottom,
|
|
407
|
+
_ref14$config$fan = _ref14$config.fan,
|
|
408
|
+
_ref14$config$fan2 = _ref14$config$fan === void 0 ? {} : _ref14$config$fan,
|
|
409
|
+
_ref14$config$fan2$ch = _ref14$config$fan2.chart,
|
|
410
|
+
chart = _ref14$config$fan2$ch === void 0 ? defaultChart : _ref14$config$fan2$ch,
|
|
411
|
+
_ref14$config$fan2$ch2 = _ref14$config$fan2.chart,
|
|
412
|
+
_ref14$config$fan2$ch3 = _ref14$config$fan2$ch2.outerRadius,
|
|
413
|
+
outerRadius = _ref14$config$fan2$ch3 === void 0 ? defaultChart.outerRadius : _ref14$config$fan2$ch3,
|
|
414
|
+
padAngle = _ref14$config$fan2$ch2.padAngle,
|
|
415
|
+
_ref14$config$fan2$an = _ref14$config$fan2.angle,
|
|
416
|
+
angle = _ref14$config$fan2$an === void 0 ? defaultAngle : _ref14$config$fan2$an,
|
|
417
|
+
_ref14$config$fan2$st = _ref14$config$fan2.stroke,
|
|
418
|
+
_ref14$config$fan2$st2 = _ref14$config$fan2$st === void 0 ? {
|
|
308
419
|
show: false
|
|
309
|
-
} :
|
|
310
|
-
show =
|
|
311
|
-
strokeWidth =
|
|
312
|
-
color =
|
|
313
|
-
decorate =
|
|
314
|
-
decorate2 =
|
|
315
|
-
categoryText =
|
|
316
|
-
outerDecorate =
|
|
317
|
-
current =
|
|
318
|
-
order =
|
|
319
|
-
columnsSeries =
|
|
320
|
-
series =
|
|
321
|
-
|
|
322
|
-
on =
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
widthen =
|
|
326
|
-
|
|
327
|
-
heighten =
|
|
328
|
-
|
|
329
|
-
opacity =
|
|
330
|
-
|
|
331
|
-
radiusWidthAdd =
|
|
332
|
-
animateColor =
|
|
333
|
-
animateCTS =
|
|
334
|
-
|
|
335
|
-
gap =
|
|
336
|
-
|
|
337
|
-
rotate =
|
|
338
|
-
|
|
339
|
-
tooltip =
|
|
340
|
-
config =
|
|
341
|
-
|
|
342
|
-
currentIndex =
|
|
343
|
-
trigger =
|
|
344
|
-
onEvent =
|
|
345
|
-
hoverEvent =
|
|
346
|
-
|
|
347
|
-
originData =
|
|
420
|
+
} : _ref14$config$fan2$st,
|
|
421
|
+
show = _ref14$config$fan2$st2.show,
|
|
422
|
+
strokeWidth = _ref14$config$fan2$st2.strokeWidth,
|
|
423
|
+
color = _ref14$config$fan2$st2.color,
|
|
424
|
+
decorate = _ref14$config$fan2.decorate,
|
|
425
|
+
decorate2 = _ref14$config$fan2.decorate2,
|
|
426
|
+
categoryText = _ref14$config$fan2.categoryText,
|
|
427
|
+
outerDecorate = _ref14$config$fan2.outerDecorate,
|
|
428
|
+
current = _ref14$config$fan2.current,
|
|
429
|
+
order = _ref14$config.order,
|
|
430
|
+
columnsSeries = _ref14$config.columnsSeries,
|
|
431
|
+
series = _ref14$config.series,
|
|
432
|
+
_ref14$config$animati = _ref14$config.animation,
|
|
433
|
+
on = _ref14$config$animati.on,
|
|
434
|
+
_ref14$config$animati2 = _ref14$config$animati.current,
|
|
435
|
+
_ref14$config$animati3 = _ref14$config$animati2.widthen,
|
|
436
|
+
widthen = _ref14$config$animati3 === void 0 ? 0 : _ref14$config$animati3,
|
|
437
|
+
_ref14$config$animati4 = _ref14$config$animati2.heighten,
|
|
438
|
+
heighten = _ref14$config$animati4 === void 0 ? 0 : _ref14$config$animati4,
|
|
439
|
+
_ref14$config$animati5 = _ref14$config$animati2.opacity,
|
|
440
|
+
opacity = _ref14$config$animati5 === void 0 ? 0 : _ref14$config$animati5,
|
|
441
|
+
_ref14$config$animati6 = _ref14$config$animati2.width,
|
|
442
|
+
radiusWidthAdd = _ref14$config$animati6 === void 0 ? 0 : _ref14$config$animati6,
|
|
443
|
+
animateColor = _ref14$config$animati2.color,
|
|
444
|
+
animateCTS = _ref14$config$animati2.textStyle,
|
|
445
|
+
_ref14$config$animati7 = _ref14$config$animati2.gap,
|
|
446
|
+
gap = _ref14$config$animati7 === void 0 ? 0 : _ref14$config$animati7,
|
|
447
|
+
_ref14$config$animati8 = _ref14$config$animati.rotate,
|
|
448
|
+
rotate = _ref14$config$animati8 === void 0 ? 0 : _ref14$config$animati8,
|
|
449
|
+
_ref14$config$tooltip = _ref14$config.tooltip,
|
|
450
|
+
tooltip = _ref14$config$tooltip === void 0 ? {} : _ref14$config$tooltip,
|
|
451
|
+
config = _ref14.config,
|
|
452
|
+
_ref14$state = _ref14.state,
|
|
453
|
+
currentIndex = _ref14$state.currentIndex,
|
|
454
|
+
trigger = _ref14$state.trigger,
|
|
455
|
+
onEvent = _ref14.onEvent,
|
|
456
|
+
hoverEvent = _ref14.hoverEvent,
|
|
457
|
+
_ref14$data = _ref14.data,
|
|
458
|
+
originData = _ref14$data === void 0 ? [] : _ref14$data;
|
|
348
459
|
var data = originData.map(function (d) {
|
|
349
460
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
350
461
|
y: d.y < 0 ? 0 : d.y
|
|
@@ -479,10 +590,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
479
590
|
var roseRadius = getRoseRadius(_chart);
|
|
480
591
|
var scaler = (0, _d3v.scaleLinear)().domain(domain).range([roseRadius, 1]);
|
|
481
592
|
var _angle = PI * 2 / _legendDataWithPercent.length;
|
|
482
|
-
return _legendDataWithPercent.map(function (
|
|
483
|
-
var startAngle =
|
|
484
|
-
endAngle =
|
|
485
|
-
arc = (0, _objectWithoutProperties2["default"])(
|
|
593
|
+
return _legendDataWithPercent.map(function (_ref15, index) {
|
|
594
|
+
var startAngle = _ref15.startAngle,
|
|
595
|
+
endAngle = _ref15.endAngle,
|
|
596
|
+
arc = (0, _objectWithoutProperties2["default"])(_ref15, _excluded4);
|
|
486
597
|
return _objectSpread(_objectSpread({}, arc), {}, {
|
|
487
598
|
id: id + "_linear_" + index,
|
|
488
599
|
startAngle: roseType == "area" ? _angle * index : startAngle,
|
|
@@ -635,13 +746,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
635
746
|
fill: "none",
|
|
636
747
|
stroke: outerDecorate.color,
|
|
637
748
|
strokeWidth: outerDecorate.width
|
|
638
|
-
}), _arcs.map(function (
|
|
639
|
-
var id =
|
|
640
|
-
value =
|
|
641
|
-
series =
|
|
642
|
-
arc =
|
|
643
|
-
innerRadius =
|
|
644
|
-
outerRadius =
|
|
749
|
+
}), _arcs.map(function (_ref16, index) {
|
|
750
|
+
var id = _ref16.id,
|
|
751
|
+
value = _ref16.value,
|
|
752
|
+
series = _ref16.series,
|
|
753
|
+
arc = _ref16.arc,
|
|
754
|
+
innerRadius = _ref16.innerRadius,
|
|
755
|
+
outerRadius = _ref16.outerRadius;
|
|
645
756
|
var arcWidth = outerRadius - innerRadius;
|
|
646
757
|
var path = arc.innerRadius(centerRadius).outerRadius(centerRadius)(value);
|
|
647
758
|
var dashLength = Math.ceil(Math.PI * centerRadius * 2 / _arcs.length);
|
|
@@ -744,14 +855,14 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
744
855
|
transition: "transform ease-in-out 0.3s",
|
|
745
856
|
transform: "translate(" + halfChartWidth + "px, " + halfChartHeight + "px) rotate(" + rotate_ + "deg)"
|
|
746
857
|
}
|
|
747
|
-
}, _arcs.map(function (
|
|
748
|
-
var id =
|
|
749
|
-
value =
|
|
750
|
-
series =
|
|
751
|
-
arc =
|
|
752
|
-
innerRadius =
|
|
753
|
-
outerRadius =
|
|
754
|
-
dataIndex =
|
|
858
|
+
}, _arcs.map(function (_ref17, index) {
|
|
859
|
+
var id = _ref17.id,
|
|
860
|
+
value = _ref17.value,
|
|
861
|
+
series = _ref17.series,
|
|
862
|
+
arc = _ref17.arc,
|
|
863
|
+
innerRadius = _ref17.innerRadius,
|
|
864
|
+
outerRadius = _ref17.outerRadius,
|
|
865
|
+
dataIndex = _ref17.index;
|
|
755
866
|
var current = index == currentIndex;
|
|
756
867
|
var prev = index == prevIndex.current;
|
|
757
868
|
var offset = current ? y : prev ? 1 - y : 0;
|
|
@@ -901,53 +1012,53 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
901
1012
|
mousePos: mousePos
|
|
902
1013
|
})));
|
|
903
1014
|
});
|
|
904
|
-
var Current = function Current(
|
|
905
|
-
var
|
|
906
|
-
show =
|
|
907
|
-
gap =
|
|
908
|
-
|
|
909
|
-
showName =
|
|
910
|
-
nameColor =
|
|
911
|
-
nameFont =
|
|
912
|
-
|
|
913
|
-
translate =
|
|
1015
|
+
var Current = function Current(_ref18) {
|
|
1016
|
+
var _ref18$config = _ref18.config,
|
|
1017
|
+
show = _ref18$config.show,
|
|
1018
|
+
gap = _ref18$config.gap,
|
|
1019
|
+
_ref18$config$name = _ref18$config.name,
|
|
1020
|
+
showName = _ref18$config$name.show,
|
|
1021
|
+
nameColor = _ref18$config$name.sameColor,
|
|
1022
|
+
nameFont = _ref18$config$name.font,
|
|
1023
|
+
_ref18$config$name$tr = _ref18$config$name.translate,
|
|
1024
|
+
translate = _ref18$config$name$tr === void 0 ? {
|
|
914
1025
|
x: 0,
|
|
915
1026
|
y: 0
|
|
916
|
-
} :
|
|
917
|
-
maxWidth =
|
|
918
|
-
textOverflow =
|
|
919
|
-
speed =
|
|
920
|
-
|
|
921
|
-
showPercent =
|
|
922
|
-
percentColor =
|
|
923
|
-
percentFont =
|
|
924
|
-
precision =
|
|
925
|
-
|
|
926
|
-
translatePercentX =
|
|
927
|
-
translatePercentY =
|
|
928
|
-
|
|
929
|
-
showValue =
|
|
930
|
-
valueColor =
|
|
931
|
-
valueFont =
|
|
932
|
-
|
|
933
|
-
translateValueX =
|
|
934
|
-
translateValueY =
|
|
935
|
-
|
|
936
|
-
showSuffix =
|
|
937
|
-
fontSize =
|
|
938
|
-
text =
|
|
939
|
-
|
|
940
|
-
translateSuffixX =
|
|
941
|
-
translateSuffixY =
|
|
942
|
-
|
|
943
|
-
isIOS =
|
|
944
|
-
marginLeft =
|
|
945
|
-
marginTop =
|
|
946
|
-
width =
|
|
947
|
-
height =
|
|
948
|
-
data =
|
|
949
|
-
judge =
|
|
950
|
-
currentIndex =
|
|
1027
|
+
} : _ref18$config$name$tr,
|
|
1028
|
+
maxWidth = _ref18$config$name.maxWidth,
|
|
1029
|
+
textOverflow = _ref18$config$name.textOverflow,
|
|
1030
|
+
speed = _ref18$config$name.speed,
|
|
1031
|
+
_ref18$config$percent = _ref18$config.percent,
|
|
1032
|
+
showPercent = _ref18$config$percent.show,
|
|
1033
|
+
percentColor = _ref18$config$percent.sameColor,
|
|
1034
|
+
percentFont = _ref18$config$percent.font,
|
|
1035
|
+
precision = _ref18$config$percent.precision,
|
|
1036
|
+
_ref18$config$percent2 = _ref18$config$percent.translate,
|
|
1037
|
+
translatePercentX = _ref18$config$percent2.x,
|
|
1038
|
+
translatePercentY = _ref18$config$percent2.y,
|
|
1039
|
+
_ref18$config$value = _ref18$config.value,
|
|
1040
|
+
showValue = _ref18$config$value.show,
|
|
1041
|
+
valueColor = _ref18$config$value.sameColor,
|
|
1042
|
+
valueFont = _ref18$config$value.font,
|
|
1043
|
+
_ref18$config$value$t = _ref18$config$value.translate,
|
|
1044
|
+
translateValueX = _ref18$config$value$t.x,
|
|
1045
|
+
translateValueY = _ref18$config$value$t.y,
|
|
1046
|
+
_ref18$config$value$s = _ref18$config$value.suffix,
|
|
1047
|
+
showSuffix = _ref18$config$value$s.show,
|
|
1048
|
+
fontSize = _ref18$config$value$s.fontSize,
|
|
1049
|
+
text = _ref18$config$value$s.text,
|
|
1050
|
+
_ref18$config$value$s2 = _ref18$config$value$s.translate,
|
|
1051
|
+
translateSuffixX = _ref18$config$value$s2.x,
|
|
1052
|
+
translateSuffixY = _ref18$config$value$s2.y,
|
|
1053
|
+
_ref18$iosStyle = _ref18.iosStyle,
|
|
1054
|
+
isIOS = _ref18$iosStyle.isIOS,
|
|
1055
|
+
marginLeft = _ref18$iosStyle.marginLeft,
|
|
1056
|
+
marginTop = _ref18$iosStyle.marginTop,
|
|
1057
|
+
width = _ref18.width,
|
|
1058
|
+
height = _ref18.height,
|
|
1059
|
+
data = _ref18.data,
|
|
1060
|
+
judge = _ref18.judge,
|
|
1061
|
+
currentIndex = _ref18.currentIndex;
|
|
951
1062
|
var _data = (0, _react.useMemo)(function () {
|
|
952
1063
|
var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
|
|
953
1064
|
return (0, _utils.sortPie)(legendDataWithPercent, "");
|
|
@@ -1032,51 +1143,51 @@ var Current = function Current(_ref9) {
|
|
|
1032
1143
|
})
|
|
1033
1144
|
}, percent + "%")));
|
|
1034
1145
|
};
|
|
1035
|
-
var Label = function Label(
|
|
1036
|
-
var
|
|
1037
|
-
|
|
1038
|
-
maxRadius =
|
|
1039
|
-
lineLength =
|
|
1040
|
-
lineColor =
|
|
1041
|
-
distance =
|
|
1042
|
-
mode =
|
|
1043
|
-
align =
|
|
1044
|
-
show =
|
|
1045
|
-
|
|
1046
|
-
translateX =
|
|
1047
|
-
translateY =
|
|
1048
|
-
|
|
1049
|
-
showName =
|
|
1050
|
-
nameFont =
|
|
1051
|
-
maxWidth =
|
|
1052
|
-
textOverflow =
|
|
1053
|
-
speed =
|
|
1054
|
-
NameTranslate =
|
|
1055
|
-
|
|
1056
|
-
showValue =
|
|
1057
|
-
valueFont =
|
|
1058
|
-
valueSameColor =
|
|
1059
|
-
|
|
1060
|
-
showSuffix =
|
|
1061
|
-
text =
|
|
1062
|
-
suffixFontSize =
|
|
1063
|
-
|
|
1064
|
-
suffixTranslateX =
|
|
1065
|
-
suffixTranslateY =
|
|
1066
|
-
ValueTranslate =
|
|
1067
|
-
|
|
1068
|
-
showPercent =
|
|
1069
|
-
percentSameColor =
|
|
1070
|
-
percentFont =
|
|
1071
|
-
precision =
|
|
1072
|
-
PercentTranslate =
|
|
1073
|
-
|
|
1074
|
-
isIOS =
|
|
1075
|
-
left =
|
|
1076
|
-
top =
|
|
1077
|
-
arcs =
|
|
1078
|
-
judge =
|
|
1079
|
-
animation =
|
|
1146
|
+
var Label = function Label(_ref19) {
|
|
1147
|
+
var _ref19$config = _ref19.config,
|
|
1148
|
+
_ref19$config$maxRadi = _ref19$config.maxRadius,
|
|
1149
|
+
maxRadius = _ref19$config$maxRadi === void 0 ? 0 : _ref19$config$maxRadi,
|
|
1150
|
+
lineLength = _ref19$config.lineLength,
|
|
1151
|
+
lineColor = _ref19$config.lineColor,
|
|
1152
|
+
distance = _ref19$config.distance,
|
|
1153
|
+
mode = _ref19$config.mode,
|
|
1154
|
+
align = _ref19$config.align,
|
|
1155
|
+
show = _ref19$config.show,
|
|
1156
|
+
_ref19$config$transla = _ref19$config.translate,
|
|
1157
|
+
translateX = _ref19$config$transla.x,
|
|
1158
|
+
translateY = _ref19$config$transla.y,
|
|
1159
|
+
_ref19$config$name = _ref19$config.name,
|
|
1160
|
+
showName = _ref19$config$name.show,
|
|
1161
|
+
nameFont = _ref19$config$name.font,
|
|
1162
|
+
maxWidth = _ref19$config$name.maxWidth,
|
|
1163
|
+
textOverflow = _ref19$config$name.textOverflow,
|
|
1164
|
+
speed = _ref19$config$name.speed,
|
|
1165
|
+
NameTranslate = _ref19$config$name.translate,
|
|
1166
|
+
_ref19$config$value = _ref19$config.value,
|
|
1167
|
+
showValue = _ref19$config$value.show,
|
|
1168
|
+
valueFont = _ref19$config$value.font,
|
|
1169
|
+
valueSameColor = _ref19$config$value.sameColor,
|
|
1170
|
+
_ref19$config$value$s = _ref19$config$value.suffix,
|
|
1171
|
+
showSuffix = _ref19$config$value$s.show,
|
|
1172
|
+
text = _ref19$config$value$s.text,
|
|
1173
|
+
suffixFontSize = _ref19$config$value$s.fontSize,
|
|
1174
|
+
_ref19$config$value$s2 = _ref19$config$value$s.translate,
|
|
1175
|
+
suffixTranslateX = _ref19$config$value$s2.x,
|
|
1176
|
+
suffixTranslateY = _ref19$config$value$s2.y,
|
|
1177
|
+
ValueTranslate = _ref19$config$value.translate,
|
|
1178
|
+
_ref19$config$percent = _ref19$config.percent,
|
|
1179
|
+
showPercent = _ref19$config$percent.show,
|
|
1180
|
+
percentSameColor = _ref19$config$percent.sameColor,
|
|
1181
|
+
percentFont = _ref19$config$percent.font,
|
|
1182
|
+
precision = _ref19$config$percent.precision,
|
|
1183
|
+
PercentTranslate = _ref19$config$percent.translate,
|
|
1184
|
+
_ref19$iosStyle = _ref19.iosStyle,
|
|
1185
|
+
isIOS = _ref19$iosStyle.isIOS,
|
|
1186
|
+
left = _ref19$iosStyle.left,
|
|
1187
|
+
top = _ref19$iosStyle.top,
|
|
1188
|
+
arcs = _ref19.arcs,
|
|
1189
|
+
judge = _ref19.judge,
|
|
1190
|
+
animation = _ref19.animation;
|
|
1080
1191
|
var _arcs = (0, _react.useMemo)(function () {
|
|
1081
1192
|
return (0, _utils.getDataWithPercent)(arcs, precision);
|
|
1082
1193
|
}, [arcs, precision]);
|
|
@@ -1086,18 +1197,54 @@ var Label = function Label(_ref10) {
|
|
|
1086
1197
|
d.percent = 0;
|
|
1087
1198
|
});
|
|
1088
1199
|
}
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1200
|
+
var isHorizontal = mode === "horizontal";
|
|
1201
|
+
var labelElsRef = (0, _react.useRef)({});
|
|
1202
|
+
var _useState7 = (0, _react.useState)({}),
|
|
1203
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
1204
|
+
measuredHeights = _useState8[0],
|
|
1205
|
+
setMeasuredHeights = _useState8[1];
|
|
1206
|
+
|
|
1207
|
+
// 上下布局:渲染后读取每个标签真实高度(仅在高度变化时更新,避免死循环)
|
|
1208
|
+
(0, _react.useLayoutEffect)(function () {
|
|
1209
|
+
if (isHorizontal) {
|
|
1210
|
+
setMeasuredHeights(function (prev) {
|
|
1211
|
+
return Object.keys(prev).length ? {} : prev;
|
|
1212
|
+
});
|
|
1213
|
+
return;
|
|
1214
|
+
}
|
|
1215
|
+
setMeasuredHeights(function (prev) {
|
|
1216
|
+
var next = {};
|
|
1217
|
+
var changed = false;
|
|
1218
|
+
Object.keys(labelElsRef.current).forEach(function (key) {
|
|
1219
|
+
var el = labelElsRef.current[key];
|
|
1220
|
+
if (!el) return;
|
|
1221
|
+
var h = getLabelDomHeight(el);
|
|
1222
|
+
if (!h) return;
|
|
1223
|
+
next[key] = h;
|
|
1224
|
+
if (prev[key] !== h) changed = true;
|
|
1225
|
+
});
|
|
1226
|
+
var prevKeys = Object.keys(prev);
|
|
1227
|
+
var nextKeys = Object.keys(next);
|
|
1228
|
+
if (prevKeys.length !== nextKeys.length) changed = true;
|
|
1229
|
+
return changed ? next : prev;
|
|
1230
|
+
});
|
|
1231
|
+
}, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
|
|
1232
|
+
var placedYBySide = {
|
|
1233
|
+
left: [],
|
|
1234
|
+
right: []
|
|
1235
|
+
};
|
|
1236
|
+
return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref20, index) {
|
|
1237
|
+
var _ref20$series$color = _ref20.series.color,
|
|
1238
|
+
type = _ref20$series$color.type,
|
|
1239
|
+
pure = _ref20$series$color.pure,
|
|
1240
|
+
stops = _ref20$series$color.linear.stops,
|
|
1241
|
+
data = _ref20.data,
|
|
1242
|
+
displayName = _ref20.displayName,
|
|
1243
|
+
value = _ref20.value,
|
|
1244
|
+
percent = _ref20.percent,
|
|
1245
|
+
arc = _ref20.arc,
|
|
1246
|
+
outerRadius = _ref20.outerRadius,
|
|
1247
|
+
actualIndex = _ref20.index;
|
|
1101
1248
|
var _arc$centroid = arc.centroid(),
|
|
1102
1249
|
_arc$centroid2 = (0, _slicedToArray2["default"])(_arc$centroid, 2),
|
|
1103
1250
|
x = _arc$centroid2[0],
|
|
@@ -1118,30 +1265,48 @@ var Label = function Label(_ref10) {
|
|
|
1118
1265
|
var _showName = showName && displayName;
|
|
1119
1266
|
var _showValue = showValue && (value || showSuffix);
|
|
1120
1267
|
var nameStyle = (0, _utils.getFontStyle)(nameFont);
|
|
1121
|
-
|
|
1268
|
+
var shouldShow = show && (_showName || showPercent || showValue);
|
|
1269
|
+
// 与真实渲染一致:showValue 开启时值为 0 也会渲染
|
|
1270
|
+
var labelSizeOptions = {
|
|
1271
|
+
showName: _showName,
|
|
1272
|
+
showValue: showValue,
|
|
1273
|
+
showPercent: showPercent,
|
|
1274
|
+
nameFont: nameFont,
|
|
1275
|
+
valueFont: valueFont,
|
|
1276
|
+
percentFont: percentFont
|
|
1277
|
+
};
|
|
1278
|
+
var estimatedHeight = isHorizontal ? getLabelRowHeight(labelSizeOptions) : getLabelColumnHeight(labelSizeOptions);
|
|
1279
|
+
// 上下布局优先用 DOM 实测高度
|
|
1280
|
+
var labelHeight = !isHorizontal && measuredHeights[index] != null ? measuredHeights[index] : estimatedHeight;
|
|
1281
|
+
var side = x2 < 0 ? "left" : "right";
|
|
1282
|
+
var finalY = shouldShow ? isHorizontal ? resolveLabelY(y2, side, placedYBySide, labelHeight) : resolveLabelYVertical(y2, side, placedYBySide, labelHeight) : y2;
|
|
1283
|
+
return shouldShow && /*#__PURE__*/_react["default"].createElement("g", {
|
|
1122
1284
|
key: index
|
|
1123
1285
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
1124
1286
|
className: animation ? _piechartModule["default"]["label-line"] : "",
|
|
1125
1287
|
style: {
|
|
1126
1288
|
animationDelay: "".concat(animation ? (actualIndex + 1) * ringDuration - labelDuration : 0, "ms")
|
|
1127
1289
|
},
|
|
1128
|
-
d: "M" + x1 + ", " + y1 + "L" + x2 + ", " +
|
|
1290
|
+
d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + finalY + "L" + x3 + ", " + finalY,
|
|
1129
1291
|
stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
|
|
1130
1292
|
fill: "none"
|
|
1131
1293
|
}), /*#__PURE__*/_react["default"].createElement("foreignObject", {
|
|
1132
1294
|
width: "1",
|
|
1133
1295
|
height: "1",
|
|
1134
1296
|
x: _x,
|
|
1135
|
-
y:
|
|
1297
|
+
y: finalY + translateY,
|
|
1136
1298
|
style: {
|
|
1137
1299
|
overflow: "visible",
|
|
1138
1300
|
position: "relative"
|
|
1139
1301
|
}
|
|
1140
1302
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1303
|
+
ref: function ref(el) {
|
|
1304
|
+
if (el) labelElsRef.current[index] = el;else delete labelElsRef.current[index];
|
|
1305
|
+
},
|
|
1141
1306
|
className: animation ? _piechartModule["default"]["label-text"] : "",
|
|
1142
1307
|
style: {
|
|
1143
1308
|
position: isIOS ? "absolute" : "relative",
|
|
1144
|
-
transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top +
|
|
1309
|
+
transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + finalY + translateY, "px))") : "translate(0,-50%)",
|
|
1145
1310
|
whiteSpace: "nowrap",
|
|
1146
1311
|
"float": x3 >= 0 ? "left" : "right",
|
|
1147
1312
|
width: "max-content",
|
|
@@ -1190,53 +1355,53 @@ function getTranslate(translate, reverse) {
|
|
|
1190
1355
|
y = translate.y;
|
|
1191
1356
|
return "translate(".concat(reverse ? -x : x, "px, ").concat(y, "px)");
|
|
1192
1357
|
}
|
|
1193
|
-
var RingLabel = function RingLabel(
|
|
1194
|
-
var
|
|
1195
|
-
ringDuration =
|
|
1196
|
-
labelDuration =
|
|
1197
|
-
|
|
1198
|
-
maxRadius =
|
|
1199
|
-
lineLength =
|
|
1200
|
-
lineColor =
|
|
1201
|
-
distance =
|
|
1202
|
-
mode =
|
|
1203
|
-
|
|
1204
|
-
align =
|
|
1205
|
-
show =
|
|
1206
|
-
|
|
1207
|
-
translateX =
|
|
1208
|
-
translateY =
|
|
1209
|
-
|
|
1210
|
-
showName =
|
|
1211
|
-
nameFont =
|
|
1212
|
-
maxWidth =
|
|
1213
|
-
textOverflow =
|
|
1214
|
-
speed =
|
|
1215
|
-
nameTranslate =
|
|
1216
|
-
|
|
1217
|
-
showValue =
|
|
1218
|
-
valueFont =
|
|
1219
|
-
valueSameColor =
|
|
1220
|
-
|
|
1221
|
-
showSuffix =
|
|
1222
|
-
text =
|
|
1223
|
-
suffixFontSize =
|
|
1224
|
-
|
|
1225
|
-
suffixTranslateX =
|
|
1226
|
-
suffixTranslateY =
|
|
1227
|
-
valueTranslate =
|
|
1228
|
-
|
|
1229
|
-
showPercent =
|
|
1230
|
-
percentSameColor =
|
|
1231
|
-
percentFont =
|
|
1232
|
-
precision =
|
|
1233
|
-
percentTranslate =
|
|
1234
|
-
|
|
1235
|
-
isIOS =
|
|
1236
|
-
left =
|
|
1237
|
-
top =
|
|
1238
|
-
judge =
|
|
1239
|
-
arcs =
|
|
1358
|
+
var RingLabel = function RingLabel(_ref21) {
|
|
1359
|
+
var _ref21$config = _ref21.config,
|
|
1360
|
+
ringDuration = _ref21$config.ringDuration,
|
|
1361
|
+
labelDuration = _ref21$config.labelDuration,
|
|
1362
|
+
_ref21$config$maxRadi = _ref21$config.maxRadius,
|
|
1363
|
+
maxRadius = _ref21$config$maxRadi === void 0 ? 0 : _ref21$config$maxRadi,
|
|
1364
|
+
lineLength = _ref21$config.lineLength,
|
|
1365
|
+
lineColor = _ref21$config.lineColor,
|
|
1366
|
+
distance = _ref21$config.distance,
|
|
1367
|
+
mode = _ref21$config.mode,
|
|
1368
|
+
_ref21$config$align = _ref21$config.align,
|
|
1369
|
+
align = _ref21$config$align === void 0 ? "center" : _ref21$config$align,
|
|
1370
|
+
show = _ref21$config.show,
|
|
1371
|
+
_ref21$config$transla = _ref21$config.translate,
|
|
1372
|
+
translateX = _ref21$config$transla.x,
|
|
1373
|
+
translateY = _ref21$config$transla.y,
|
|
1374
|
+
_ref21$config$name = _ref21$config.name,
|
|
1375
|
+
showName = _ref21$config$name.show,
|
|
1376
|
+
nameFont = _ref21$config$name.font,
|
|
1377
|
+
maxWidth = _ref21$config$name.maxWidth,
|
|
1378
|
+
textOverflow = _ref21$config$name.textOverflow,
|
|
1379
|
+
speed = _ref21$config$name.speed,
|
|
1380
|
+
nameTranslate = _ref21$config$name.translate,
|
|
1381
|
+
_ref21$config$value = _ref21$config.value,
|
|
1382
|
+
showValue = _ref21$config$value.show,
|
|
1383
|
+
valueFont = _ref21$config$value.font,
|
|
1384
|
+
valueSameColor = _ref21$config$value.sameColor,
|
|
1385
|
+
_ref21$config$value$s = _ref21$config$value.suffix,
|
|
1386
|
+
showSuffix = _ref21$config$value$s.show,
|
|
1387
|
+
text = _ref21$config$value$s.text,
|
|
1388
|
+
suffixFontSize = _ref21$config$value$s.fontSize,
|
|
1389
|
+
_ref21$config$value$s2 = _ref21$config$value$s.translate,
|
|
1390
|
+
suffixTranslateX = _ref21$config$value$s2.x,
|
|
1391
|
+
suffixTranslateY = _ref21$config$value$s2.y,
|
|
1392
|
+
valueTranslate = _ref21$config$value.translate,
|
|
1393
|
+
_ref21$config$percent = _ref21$config.percent,
|
|
1394
|
+
showPercent = _ref21$config$percent.show,
|
|
1395
|
+
percentSameColor = _ref21$config$percent.sameColor,
|
|
1396
|
+
percentFont = _ref21$config$percent.font,
|
|
1397
|
+
precision = _ref21$config$percent.precision,
|
|
1398
|
+
percentTranslate = _ref21$config$percent.translate,
|
|
1399
|
+
_ref21$iosStyle = _ref21.iosStyle,
|
|
1400
|
+
isIOS = _ref21$iosStyle.isIOS,
|
|
1401
|
+
left = _ref21$iosStyle.left,
|
|
1402
|
+
top = _ref21$iosStyle.top,
|
|
1403
|
+
judge = _ref21.judge,
|
|
1404
|
+
arcs = _ref21.arcs;
|
|
1240
1405
|
var _arcs = (0, _react.useMemo)(function () {
|
|
1241
1406
|
return (0, _utils.getDataWithPercent)(arcs, precision);
|
|
1242
1407
|
}, [arcs, precision]);
|
|
@@ -1247,18 +1412,54 @@ var RingLabel = function RingLabel(_ref12) {
|
|
|
1247
1412
|
d.percent = 0;
|
|
1248
1413
|
});
|
|
1249
1414
|
}
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1415
|
+
var isHorizontal = mode === "horizontal";
|
|
1416
|
+
var labelElsRef = (0, _react.useRef)({});
|
|
1417
|
+
var _useState9 = (0, _react.useState)({}),
|
|
1418
|
+
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
1419
|
+
measuredHeights = _useState10[0],
|
|
1420
|
+
setMeasuredHeights = _useState10[1];
|
|
1421
|
+
|
|
1422
|
+
// 上下布局:渲染后读取每个标签真实高度(仅在高度变化时更新,避免死循环)
|
|
1423
|
+
(0, _react.useLayoutEffect)(function () {
|
|
1424
|
+
if (isHorizontal) {
|
|
1425
|
+
setMeasuredHeights(function (prev) {
|
|
1426
|
+
return Object.keys(prev).length ? {} : prev;
|
|
1427
|
+
});
|
|
1428
|
+
return;
|
|
1429
|
+
}
|
|
1430
|
+
setMeasuredHeights(function (prev) {
|
|
1431
|
+
var next = {};
|
|
1432
|
+
var changed = false;
|
|
1433
|
+
Object.keys(labelElsRef.current).forEach(function (key) {
|
|
1434
|
+
var el = labelElsRef.current[key];
|
|
1435
|
+
if (!el) return;
|
|
1436
|
+
var h = getLabelDomHeight(el);
|
|
1437
|
+
if (!h) return;
|
|
1438
|
+
next[key] = h;
|
|
1439
|
+
if (prev[key] !== h) changed = true;
|
|
1440
|
+
});
|
|
1441
|
+
var prevKeys = Object.keys(prev);
|
|
1442
|
+
var nextKeys = Object.keys(next);
|
|
1443
|
+
if (prevKeys.length !== nextKeys.length) changed = true;
|
|
1444
|
+
return changed ? next : prev;
|
|
1445
|
+
});
|
|
1446
|
+
}, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
|
|
1447
|
+
var placedYBySide = {
|
|
1448
|
+
left: [],
|
|
1449
|
+
right: []
|
|
1450
|
+
};
|
|
1451
|
+
return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref22, index) {
|
|
1452
|
+
var _ref22$series$color = _ref22.series.color,
|
|
1453
|
+
type = _ref22$series$color.type,
|
|
1454
|
+
pure = _ref22$series$color.pure,
|
|
1455
|
+
stops = _ref22$series$color.linear.stops,
|
|
1456
|
+
realData = _ref22.data,
|
|
1457
|
+
displayName = _ref22.displayName,
|
|
1458
|
+
value = _ref22.value,
|
|
1459
|
+
percent = _ref22.percent,
|
|
1460
|
+
arc = _ref22.arc,
|
|
1461
|
+
outerRadius = _ref22.outerRadius,
|
|
1462
|
+
actualIndex = _ref22.index;
|
|
1262
1463
|
var _arc$centroid3 = arc.centroid(),
|
|
1263
1464
|
_arc$centroid4 = (0, _slicedToArray2["default"])(_arc$centroid3, 2),
|
|
1264
1465
|
x = _arc$centroid4[0],
|
|
@@ -1274,35 +1475,52 @@ var RingLabel = function RingLabel(_ref12) {
|
|
|
1274
1475
|
x2 = _getCoord8[0],
|
|
1275
1476
|
y2 = _getCoord8[1];
|
|
1276
1477
|
var directionX = x2 < 0 ? -1 : 1;
|
|
1277
|
-
var directionY = y2 < 0 ? -1 : 1;
|
|
1278
1478
|
var x3 = x2 + lineLength * directionX;
|
|
1279
1479
|
var _x = x3 + (translateX + 6) * directionX;
|
|
1280
1480
|
var _showName = showName && displayName;
|
|
1281
1481
|
var _showValue = showValue && (value || showSuffix);
|
|
1282
|
-
|
|
1482
|
+
var shouldShow = show && (_showName || showPercent || _showValue);
|
|
1483
|
+
// 与真实渲染一致:showValue 开启时值为 0 也会渲染
|
|
1484
|
+
var labelSizeOptions = {
|
|
1485
|
+
showName: _showName,
|
|
1486
|
+
showValue: showValue,
|
|
1487
|
+
showPercent: showPercent,
|
|
1488
|
+
nameFont: nameFont,
|
|
1489
|
+
valueFont: valueFont,
|
|
1490
|
+
percentFont: percentFont
|
|
1491
|
+
};
|
|
1492
|
+
var estimatedHeight = isHorizontal ? getLabelRowHeight(labelSizeOptions) : getLabelColumnHeight(labelSizeOptions);
|
|
1493
|
+
// 上下布局优先用 DOM 实测高度
|
|
1494
|
+
var labelHeight = !isHorizontal && measuredHeights[index] != null ? measuredHeights[index] : estimatedHeight;
|
|
1495
|
+
var side = x2 < 0 ? "left" : "right";
|
|
1496
|
+
var finalY = shouldShow ? isHorizontal ? resolveLabelY(y2, side, placedYBySide, labelHeight) : resolveLabelYVertical(y2, side, placedYBySide, labelHeight) : y2;
|
|
1497
|
+
return shouldShow && /*#__PURE__*/_react["default"].createElement("g", {
|
|
1283
1498
|
key: index
|
|
1284
1499
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
1285
1500
|
className: _piechartModule["default"]["label-line"],
|
|
1286
1501
|
style: {
|
|
1287
1502
|
animationDelay: "".concat((actualIndex + 1) * ringDuration - labelDuration, "ms")
|
|
1288
1503
|
},
|
|
1289
|
-
d: "M" + x1 + ", " + y1 + "L" + x2 + ", " +
|
|
1504
|
+
d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + finalY + "L" + x3 + ", " + finalY,
|
|
1290
1505
|
stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
|
|
1291
1506
|
fill: "none"
|
|
1292
1507
|
}), /*#__PURE__*/_react["default"].createElement("foreignObject", {
|
|
1293
1508
|
width: "1",
|
|
1294
1509
|
height: "1",
|
|
1295
1510
|
x: _x,
|
|
1296
|
-
y:
|
|
1511
|
+
y: finalY + translateY,
|
|
1297
1512
|
style: {
|
|
1298
1513
|
overflow: "visible",
|
|
1299
1514
|
position: "relative"
|
|
1300
1515
|
}
|
|
1301
1516
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1517
|
+
ref: function ref(el) {
|
|
1518
|
+
if (el) labelElsRef.current[index] = el;else delete labelElsRef.current[index];
|
|
1519
|
+
},
|
|
1302
1520
|
className: _piechartModule["default"]["label-text"],
|
|
1303
1521
|
style: {
|
|
1304
1522
|
position: isIOS ? "absolute" : "relative",
|
|
1305
|
-
transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top +
|
|
1523
|
+
transform: isIOS ? "translate(calc(".concat(x3 < 0 ? "-100%" : "0px", " + ").concat(left + _x, "px),calc(-50% + ").concat(top + finalY + translateY, "px))") : "translate(0,-50%)",
|
|
1306
1524
|
whiteSpace: "nowrap",
|
|
1307
1525
|
"float": x3 >= 0 ? "left" : "right",
|
|
1308
1526
|
width: "max-content",
|