@easyv/charts 1.8.3 → 1.8.5
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/Band.js +2 -1
- package/lib/components/CartesianChart.js +30 -1
- package/lib/components/PieChart.js +11 -1
- package/lib/components/pieTooltip.js +69 -29
- package/package.json +1 -1
- package/src/components/Band.tsx +2 -2
- package/src/components/CartesianChart.js +17 -1
- package/src/components/PieChart.js +5 -0
- package/src/components/PieTooltip.jsx +84 -35
package/lib/components/Band.js
CHANGED
|
@@ -92,6 +92,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
|
|
|
92
92
|
_ref3$isControlChart = _ref3.isControlChart,
|
|
93
93
|
isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
|
|
94
94
|
setCtlTip = _ref3.setCtlTip,
|
|
95
|
+
isXRepeat = _ref3.isXRepeat,
|
|
95
96
|
_ref3$config = _ref3.config,
|
|
96
97
|
_ref3$config$pattern = _ref3$config.pattern,
|
|
97
98
|
pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
|
|
@@ -197,7 +198,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
|
|
|
197
198
|
borderWidth = _ref6$borderWidth === void 0 ? 0 : _ref6$borderWidth;
|
|
198
199
|
var borderStr = "".concat(pure, " solid ").concat(borderWidth, "px");
|
|
199
200
|
var borderImageSource = (0, _utils.getMultiColorStr)(linear);
|
|
200
|
-
var positionX =
|
|
201
|
+
var positionX = isXRepeat ? xScaler(x) - step / 2 + seriesStart + index * seriesStep : xScaler(x) - seriesStart / 2;
|
|
201
202
|
var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
|
|
202
203
|
if (headDecorate) {
|
|
203
204
|
showHead = headDecorate.show, headType = headDecorate.type, headUrl = headDecorate.url, headVideo = headDecorate.video, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
|
|
@@ -19,6 +19,9 @@ var _excluded = ["Component", "yOrZ"],
|
|
|
19
19
|
_excluded2 = ["Component", "yOrZ"];
|
|
20
20
|
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); }
|
|
21
21
|
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; }
|
|
22
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
23
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
24
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
22
25
|
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; }
|
|
23
26
|
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; } /**
|
|
24
27
|
* 轴类图表
|
|
@@ -426,6 +429,30 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
426
429
|
});
|
|
427
430
|
var bodyWidth = isVertical ? xLineRange + 100 + marginRight + marginLeft : xLineRange,
|
|
428
431
|
bodyHeight = isVertical ? yLineRange : yLineRange + marginTop + marginBottom;
|
|
432
|
+
var hasDuplicateX = function hasDuplicateX(data) {
|
|
433
|
+
var xValues = new Set(); // 用Set存储已出现的x值,自动去重
|
|
434
|
+
var _iterator = _createForOfIteratorHelper(data),
|
|
435
|
+
_step;
|
|
436
|
+
try {
|
|
437
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
438
|
+
var item = _step.value;
|
|
439
|
+
// 跳过空数据项(如示例中第三个data为空的对象)
|
|
440
|
+
if (!item.data || !item.data.length) continue;
|
|
441
|
+
// 获取当前项的x值(从嵌套结构中提取)
|
|
442
|
+
var x = item.data[0].data.x;
|
|
443
|
+
// 若x已存在于Set中,说明有重复,直接返回true
|
|
444
|
+
if (xValues.has(x)) return true;
|
|
445
|
+
// 否则将x存入Set
|
|
446
|
+
xValues.add(x);
|
|
447
|
+
}
|
|
448
|
+
// 遍历完所有项都无重复,返回false
|
|
449
|
+
} catch (err) {
|
|
450
|
+
_iterator.e(err);
|
|
451
|
+
} finally {
|
|
452
|
+
_iterator.f();
|
|
453
|
+
}
|
|
454
|
+
return false;
|
|
455
|
+
};
|
|
429
456
|
(0, _react.useEffect)(function () {
|
|
430
457
|
setCtlTip(function (pre) {
|
|
431
458
|
return {
|
|
@@ -549,6 +576,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
549
576
|
yOrZ = _ref2.yOrZ,
|
|
550
577
|
config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
551
578
|
var yAxis = axes.get(yOrZ);
|
|
579
|
+
var isXRepeat = hasDuplicateX(series); //x项有重复项判断
|
|
552
580
|
return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
|
|
553
581
|
key: index
|
|
554
582
|
}, config, {
|
|
@@ -563,7 +591,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
563
591
|
isControlChart: !!control,
|
|
564
592
|
indicatorWidth: indicatorWidth,
|
|
565
593
|
triggerClick: onInteraction,
|
|
566
|
-
setCtlTip: setCtlTip
|
|
594
|
+
setCtlTip: setCtlTip,
|
|
595
|
+
isXRepeat: isXRepeat
|
|
567
596
|
}));
|
|
568
597
|
}), series.map(function (_ref3, index) {
|
|
569
598
|
var Component = _ref3.Component,
|
|
@@ -234,6 +234,8 @@ var getCircleScale = function getCircleScale() {
|
|
|
234
234
|
var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
235
235
|
var width = _ref5.width,
|
|
236
236
|
height = _ref5.height,
|
|
237
|
+
left = _ref5.left,
|
|
238
|
+
top = _ref5.top,
|
|
237
239
|
_ref5$config = _ref5.config,
|
|
238
240
|
_ref5$config$chart = _ref5$config.chart,
|
|
239
241
|
label = _ref5$config$chart.label,
|
|
@@ -299,6 +301,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
299
301
|
hoverEvent = _ref5.hoverEvent,
|
|
300
302
|
_ref5$data = _ref5.data,
|
|
301
303
|
originData = _ref5$data === void 0 ? [] : _ref5$data;
|
|
304
|
+
var attribute = {
|
|
305
|
+
width: width,
|
|
306
|
+
height: height,
|
|
307
|
+
top: top,
|
|
308
|
+
left: left
|
|
309
|
+
};
|
|
302
310
|
var data = originData.map(function (d) {
|
|
303
311
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
304
312
|
y: d.y < 0 ? 0 : d.y
|
|
@@ -614,6 +622,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
614
622
|
x: halfChartWidth,
|
|
615
623
|
y: maxRadius + marginTop
|
|
616
624
|
},
|
|
625
|
+
attribute: attribute,
|
|
617
626
|
mousePos: mousePos
|
|
618
627
|
})), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
619
628
|
height: chartHeight,
|
|
@@ -778,7 +787,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
778
787
|
x: halfChartWidth,
|
|
779
788
|
y: maxRadius + marginTop
|
|
780
789
|
},
|
|
781
|
-
mousePos: mousePos
|
|
790
|
+
mousePos: mousePos,
|
|
791
|
+
attribute: attribute
|
|
782
792
|
})), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
|
|
783
793
|
height: chartHeight,
|
|
784
794
|
series: _arcs.map(function (arc) {
|
|
@@ -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
|
+
attribute = props.attribute,
|
|
20
21
|
pieCenter = props.pieCenter,
|
|
21
22
|
_props$config$tip = props.config.tip,
|
|
22
23
|
_props$config$tip$dat = _props$config$tip.data,
|
|
@@ -97,45 +98,84 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
|
|
|
97
98
|
centerY = pieCenter.y;
|
|
98
99
|
var getTipPos = function getTipPos() {
|
|
99
100
|
var getBigscreenScale = function getBigscreenScale() {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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)];
|
|
101
|
+
// 优先使用全局提供的方法
|
|
102
|
+
if (typeof window.getScreenScale === 'function') {
|
|
103
|
+
try {
|
|
104
|
+
var _result = window.getScreenScale();
|
|
105
|
+
if (Array.isArray(_result) && _result.length >= 6) {
|
|
106
|
+
return _result;
|
|
116
107
|
}
|
|
117
|
-
}
|
|
118
|
-
|
|
108
|
+
} catch (e) {
|
|
109
|
+
console.error('调用全局 getScreenScale 出错:', e);
|
|
119
110
|
}
|
|
120
111
|
}
|
|
112
|
+
|
|
113
|
+
// 获取容器元素
|
|
114
|
+
var bigscreenDom = document.getElementById('bigscreen-container');
|
|
115
|
+
|
|
116
|
+
// 元素不存在时的处理
|
|
117
|
+
if (!bigscreenDom) {
|
|
118
|
+
console.warn('未找到 bigscreen-container 元素,使用视口尺寸');
|
|
119
|
+
return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// 确保元素可见(未被隐藏)
|
|
123
|
+
var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
|
|
124
|
+
if (!isVisible) {
|
|
125
|
+
console.warn('bigscreen-container 元素不可见,使用视口尺寸');
|
|
126
|
+
return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// 获取元素的布局矩形(最可靠的尺寸获取方式)
|
|
130
|
+
var rect = bigscreenDom.getBoundingClientRect();
|
|
131
|
+
|
|
132
|
+
// 提取基础尺寸(从布局矩形获取,不受样式影响)
|
|
133
|
+
var screenWidth = rect.width || window.innerWidth;
|
|
134
|
+
var screenHeight = rect.height || window.innerHeight;
|
|
135
|
+
var screenLeft = rect.left || 0;
|
|
136
|
+
var screenTop = rect.top || 0;
|
|
137
|
+
|
|
138
|
+
// 处理缩放
|
|
139
|
+
var scaleX = 1;
|
|
140
|
+
var scaleY = 1;
|
|
141
|
+
try {
|
|
142
|
+
var computedStyle = window.getComputedStyle(bigscreenDom);
|
|
143
|
+
var transform = computedStyle.transform;
|
|
144
|
+
if (transform && transform !== 'none') {
|
|
145
|
+
// 解析 transform matrix
|
|
146
|
+
var matrix = new DOMMatrix(transform);
|
|
147
|
+
scaleX = matrix.a; // 缩放X因子
|
|
148
|
+
scaleY = matrix.d; // 缩放Y因子
|
|
149
|
+
}
|
|
150
|
+
} catch (e) {
|
|
151
|
+
console.error('解析缩放样式出错:', e);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// 最终返回值(确保不会有undefined)
|
|
155
|
+
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];
|
|
156
|
+
return result;
|
|
121
157
|
};
|
|
122
158
|
var _getBigscreenScale = getBigscreenScale(),
|
|
123
|
-
_getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale,
|
|
159
|
+
_getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 6),
|
|
124
160
|
scaleX = _getBigscreenScale2[0],
|
|
125
|
-
scaleY = _getBigscreenScale2[1]
|
|
126
|
-
|
|
127
|
-
|
|
161
|
+
scaleY = _getBigscreenScale2[1],
|
|
162
|
+
screenWidth = _getBigscreenScale2[2],
|
|
163
|
+
screenHeight = _getBigscreenScale2[3],
|
|
164
|
+
screenLeft = _getBigscreenScale2[4],
|
|
165
|
+
screenTop = _getBigscreenScale2[5];
|
|
166
|
+
// const _mouseX = mouseX / scaleX
|
|
167
|
+
// const _mouseY = mouseY / scaleY
|
|
128
168
|
var tipPosMap = {
|
|
129
|
-
rightTop: "translate(".concat(
|
|
130
|
-
leftTop: "translate(".concat(
|
|
131
|
-
leftBottom: "translate(".concat(
|
|
132
|
-
rightBottom: "translate(".concat(
|
|
169
|
+
rightTop: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
|
|
170
|
+
leftTop: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
|
|
171
|
+
leftBottom: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
|
|
172
|
+
rightBottom: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
|
|
133
173
|
};
|
|
134
|
-
if (
|
|
174
|
+
if (mouseX < centerX && mouseY < centerY) {
|
|
135
175
|
return tipPosMap.leftTop;
|
|
136
|
-
} else if (
|
|
176
|
+
} else if (mouseX > centerX && mouseY < centerY) {
|
|
137
177
|
return tipPosMap.rightTop;
|
|
138
|
-
} else if (
|
|
178
|
+
} else if (mouseX >= centerX && mouseY >= centerY) {
|
|
139
179
|
return tipPosMap.rightBottom;
|
|
140
180
|
} else {
|
|
141
181
|
return tipPosMap.leftBottom;
|
package/package.json
CHANGED
package/src/components/Band.tsx
CHANGED
|
@@ -87,6 +87,7 @@ export default memo(
|
|
|
87
87
|
indicatorWidth,
|
|
88
88
|
isControlChart = false,
|
|
89
89
|
setCtlTip,
|
|
90
|
+
isXRepeat,
|
|
90
91
|
config: {
|
|
91
92
|
pattern = {},
|
|
92
93
|
seriesIntervalWidth: paddingInner = 0,
|
|
@@ -164,8 +165,7 @@ export default memo(
|
|
|
164
165
|
}, borderWidth=0 } = border || {};
|
|
165
166
|
const borderStr = `${pure} solid ${borderWidth}px`;
|
|
166
167
|
const borderImageSource = getMultiColorStr(linear);
|
|
167
|
-
const positionX =
|
|
168
|
-
|
|
168
|
+
const positionX =isXRepeat? xScaler(x) - step / 2 + seriesStart + index * seriesStep: xScaler(x) -seriesStart/2;
|
|
169
169
|
let showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
|
|
170
170
|
if (headDecorate) {
|
|
171
171
|
(showHead = headDecorate.show),
|
|
@@ -399,7 +399,21 @@ const Chart = memo(
|
|
|
399
399
|
const controlChartTooltipData = ctlXName && originData.filter((d) => d.x === ctlXName);
|
|
400
400
|
const bodyWidth = isVertical?xLineRange + 100 + marginRight + marginLeft:xLineRange,
|
|
401
401
|
bodyHeight = isVertical?yLineRange:yLineRange + marginTop + marginBottom;
|
|
402
|
-
|
|
402
|
+
const hasDuplicateX = (data) => {
|
|
403
|
+
const xValues = new Set(); // 用Set存储已出现的x值,自动去重
|
|
404
|
+
for (const item of data) {
|
|
405
|
+
// 跳过空数据项(如示例中第三个data为空的对象)
|
|
406
|
+
if (!item.data || !item.data.length) continue;
|
|
407
|
+
// 获取当前项的x值(从嵌套结构中提取)
|
|
408
|
+
const x = item.data[0].data.x;
|
|
409
|
+
// 若x已存在于Set中,说明有重复,直接返回true
|
|
410
|
+
if (xValues.has(x)) return true;
|
|
411
|
+
// 否则将x存入Set
|
|
412
|
+
xValues.add(x);
|
|
413
|
+
}
|
|
414
|
+
// 遍历完所有项都无重复,返回false
|
|
415
|
+
return false;
|
|
416
|
+
};
|
|
403
417
|
useEffect(()=>{
|
|
404
418
|
setCtlTip(pre=>{
|
|
405
419
|
return {
|
|
@@ -534,6 +548,7 @@ const Chart = memo(
|
|
|
534
548
|
{/**绘制图表主体 */}
|
|
535
549
|
{series.map(({ Component, yOrZ, ...config }, index) => {
|
|
536
550
|
const yAxis = axes.get(yOrZ);
|
|
551
|
+
const isXRepeat=hasDuplicateX(series);//x项有重复项判断
|
|
537
552
|
return (
|
|
538
553
|
yAxis &&
|
|
539
554
|
Component && (
|
|
@@ -551,6 +566,7 @@ const Chart = memo(
|
|
|
551
566
|
indicatorWidth={indicatorWidth}
|
|
552
567
|
triggerClick={onInteraction}
|
|
553
568
|
setCtlTip={setCtlTip}
|
|
569
|
+
isXRepeat={isXRepeat}
|
|
554
570
|
/>
|
|
555
571
|
)
|
|
556
572
|
);
|
|
@@ -249,6 +249,8 @@ const Component = memo(
|
|
|
249
249
|
({
|
|
250
250
|
width,
|
|
251
251
|
height,
|
|
252
|
+
left,
|
|
253
|
+
top,
|
|
252
254
|
config: {
|
|
253
255
|
chart: {
|
|
254
256
|
label,
|
|
@@ -290,6 +292,7 @@ const Component = memo(
|
|
|
290
292
|
hoverEvent,
|
|
291
293
|
data: originData = [],
|
|
292
294
|
}) => {
|
|
295
|
+
const attribute={width,height,top,left}
|
|
293
296
|
const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
|
|
294
297
|
const prevIndex = useRef(null);
|
|
295
298
|
const { precision: legendPrecision } = legend.config.percent;
|
|
@@ -634,6 +637,7 @@ const Component = memo(
|
|
|
634
637
|
x: halfChartWidth,
|
|
635
638
|
y: maxRadius + marginTop,
|
|
636
639
|
}}
|
|
640
|
+
attribute={attribute}
|
|
637
641
|
mousePos={mousePos}
|
|
638
642
|
/>
|
|
639
643
|
</div>
|
|
@@ -896,6 +900,7 @@ const Component = memo(
|
|
|
896
900
|
y: maxRadius + marginTop,
|
|
897
901
|
}}
|
|
898
902
|
mousePos={mousePos}
|
|
903
|
+
attribute={attribute}
|
|
899
904
|
/>
|
|
900
905
|
</div>
|
|
901
906
|
)}
|
|
@@ -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,attribute,
|
|
7
7
|
pieCenter,
|
|
8
8
|
config: {
|
|
9
9
|
tip: {
|
|
@@ -87,43 +87,92 @@ export const PieTooltip = memo((props) => {
|
|
|
87
87
|
const { x: centerX, y: centerY } = pieCenter
|
|
88
88
|
const getTipPos = () => {
|
|
89
89
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
90
|
+
const getBigscreenScale = () => {
|
|
91
|
+
// 优先使用全局提供的方法
|
|
92
|
+
if (typeof window.getScreenScale === 'function') {
|
|
93
|
+
try {
|
|
94
|
+
const result = window.getScreenScale();
|
|
95
|
+
if (Array.isArray(result) && result.length >= 6) {
|
|
96
|
+
return result;
|
|
97
|
+
}
|
|
98
|
+
} catch (e) {
|
|
99
|
+
console.error('调用全局 getScreenScale 出错:', e);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// 获取容器元素
|
|
104
|
+
const bigscreenDom = document.getElementById('bigscreen-container');
|
|
105
|
+
|
|
106
|
+
// 元素不存在时的处理
|
|
107
|
+
if (!bigscreenDom) {
|
|
108
|
+
console.warn('未找到 bigscreen-container 元素,使用视口尺寸');
|
|
109
|
+
return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// 确保元素可见(未被隐藏)
|
|
113
|
+
const isVisible = window.getComputedStyle(bigscreenDom).display !== 'none'
|
|
114
|
+
&& window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
|
|
115
|
+
if (!isVisible) {
|
|
116
|
+
console.warn('bigscreen-container 元素不可见,使用视口尺寸');
|
|
117
|
+
return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// 获取元素的布局矩形(最可靠的尺寸获取方式)
|
|
121
|
+
const rect = bigscreenDom.getBoundingClientRect();
|
|
122
|
+
|
|
123
|
+
// 提取基础尺寸(从布局矩形获取,不受样式影响)
|
|
124
|
+
const screenWidth = rect.width || window.innerWidth;
|
|
125
|
+
const screenHeight = rect.height || window.innerHeight;
|
|
126
|
+
const screenLeft = rect.left || 0;
|
|
127
|
+
const screenTop = rect.top || 0;
|
|
128
|
+
|
|
129
|
+
// 处理缩放
|
|
130
|
+
let scaleX = 1;
|
|
131
|
+
let scaleY = 1;
|
|
132
|
+
|
|
133
|
+
try {
|
|
134
|
+
const computedStyle = window.getComputedStyle(bigscreenDom);
|
|
135
|
+
const transform = computedStyle.transform;
|
|
136
|
+
|
|
137
|
+
if (transform && transform !== 'none') {
|
|
138
|
+
// 解析 transform matrix
|
|
139
|
+
const matrix = new DOMMatrix(transform);
|
|
140
|
+
scaleX = matrix.a; // 缩放X因子
|
|
141
|
+
scaleY = matrix.d; // 缩放Y因子
|
|
142
|
+
}
|
|
143
|
+
} catch (e) {
|
|
144
|
+
console.error('解析缩放样式出错:', e);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// 最终返回值(确保不会有undefined)
|
|
148
|
+
const result = [
|
|
149
|
+
isNaN(scaleX) ? 1 : scaleX,
|
|
150
|
+
isNaN(scaleY) ? 1 : scaleY,
|
|
151
|
+
isNaN(screenWidth) ? window.innerWidth : screenWidth,
|
|
152
|
+
isNaN(screenHeight) ? window.innerHeight : screenHeight,
|
|
153
|
+
isNaN(screenLeft) ? 0 : screenLeft,
|
|
154
|
+
isNaN(screenTop) ? 0 : screenTop
|
|
155
|
+
];
|
|
156
|
+
return result;
|
|
157
|
+
};
|
|
158
|
+
const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigscreenScale()
|
|
159
|
+
// const _mouseX = mouseX / scaleX
|
|
160
|
+
// const _mouseY = mouseY / scaleY
|
|
116
161
|
const tipPosMap = {
|
|
117
|
-
rightTop: `translate(${
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
162
|
+
rightTop: `translate(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x: mouseX + translateTip.x}px,
|
|
163
|
+
${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
|
|
164
|
+
leftTop: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
|
|
165
|
+
${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
|
|
166
|
+
leftBottom: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
|
|
167
|
+
${(attribute.top+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
|
|
168
|
+
rightBottom: `translate(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
|
|
169
|
+
${(attribute.top+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
|
|
170
|
+
}
|
|
171
|
+
if (mouseX < centerX && mouseY < centerY) {
|
|
123
172
|
return tipPosMap.leftTop
|
|
124
|
-
} else if (
|
|
173
|
+
} else if (mouseX > centerX && mouseY < centerY) {
|
|
125
174
|
return tipPosMap.rightTop
|
|
126
|
-
} else if (
|
|
175
|
+
} else if (mouseX >= centerX && mouseY >= centerY) {
|
|
127
176
|
return tipPosMap.rightBottom
|
|
128
177
|
} else {
|
|
129
178
|
return tipPosMap.leftBottom
|