@easyv/charts 1.9.19 → 1.9.20

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 (3) hide show
  1. package/lib/components/CartesianChart.js +13 -2
  2. package/package.json +1 -1
  3. package/src/components/CartesianChart.js +106 -89
package/lib/components/CartesianChart.js CHANGED
@@ -352,7 +352,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
352
352
  percent = isNaN(percent) ? 1 : percent;
353
353
  var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
354
354
  curControlPercent.current = percent;
355
- seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
355
+ // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
356
356
  axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
357
357
  }
358
358
  }, [controlInfo]);
@@ -589,9 +589,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
589
589
  ref: seriesEl,
590
590
  style: {
591
591
  overflow: "visible",
592
+ // 保留原有样式，clipPath会接管裁剪
592
593
  position: "absolute",
593
594
  transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
594
595
  }
596
+ }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
597
+ id: "chart-clip-".concat(id)
598
+ }, /*#__PURE__*/_react["default"].createElement("rect", {
599
+ x: "0",
600
+ y: "0",
601
+ width: xLineRange,
602
+ height: yLineRange,
603
+ fill: "transparent"
604
+ }))), /*#__PURE__*/_react["default"].createElement("g", {
605
+ clipPath: "url(#chart-clip-".concat(id, ")")
595
606
  }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
596
607
  var x = axisX.scaler(item.tick);
597
608
  return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
@@ -662,7 +673,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
662
673
  ctlIndicatorList: ctlIndicatorList,
663
674
  manual: manual
664
675
  }));
665
- }))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
676
+ })))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
666
677
  isVertical: isVertical
667
678
  }, tooltip, {
668
679
  data: controlChartTooltipData,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@easyv/charts",
3
- "version": "1.9.19",
3
+ "version": "1.9.20",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/CartesianChart.js CHANGED
@@ -344,7 +344,7 @@ const Chart = memo(
344
344
  const translateX =
345
345
  -(controlEnd + start / cPercent - chartWidth) * percent;
346
346
  curControlPercent.current = percent;
347
- seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
347
+ // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
348
348
  axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
349
349
  }
350
350
  }, [controlInfo]);
@@ -583,112 +583,129 @@ const Chart = memo(
583
583
  : `translateY(${-marginTop}px)`,
584
584
  }}
585
585
  >
586
+ {/* 关键修改1：添加clipPath定义，限定裁剪区域 */}
586
587
  <svg
587
588
  width="100%"
588
589
  height="100%"
589
590
  ref={seriesEl}
590
591
  style={{
591
- overflow: "visible",
592
+ overflow: "visible", // 保留原有样式，clipPath会接管裁剪
592
593
  position: "absolute",
593
594
  transform: isVertical
594
595
  ? `translate(${marginRight}px,${isIOS ? marginTop : 0}px)`
595
596
  : `translate(${isIOS ? marginLeft : 0}px,${marginTop}px)`,
596
597
  }}
597
598
  >
598
- {/* 控制图指示器部分 */}
599
- <g>
600
- {control &&
601
- zIndex == "bottom" &&
602
- ctlIndicatorList.map((item, index) => {
603
- const x = axisX.scaler(item.tick);
604
- return (
605
- <Indicator
599
+ {/* 定义裁剪路径：只显示指定宽高的区域 */}
600
+ <defs>
601
+ <clipPath id={`chart-clip-${id}`}>
602
+ <rect
603
+ x="0"
604
+ y="0"
605
+ width={xLineRange}
606
+ height={yLineRange}
607
+ fill="transparent"
608
+ />
609
+ </clipPath>
610
+ </defs>
611
+
612
+ {/* 关键修改2：将所有图表内容包裹在g标签中，并应用clipPath */}
613
+ <g clipPath={`url(#chart-clip-${id})`}>
614
+ {/* 控制图指示器部分 */}
615
+ <g>
616
+ {control &&
617
+ zIndex == "bottom" &&
618
+ ctlIndicatorList.map((item, index) => {
619
+ const x = axisX.scaler(item.tick);
620
+ return (
621
+ <Indicator
622
+ key={index}
623
+ {...indicator}
624
+ {...{
625
+ height: yLineRange,
626
+ width: indicatorWidth,
627
+ x: x - indicatorWidth / 2,
628
+ }}
629
+ isControlChart={!!control}
630
+ xName={item.tick}
631
+ setCtlTip={setCtlTip}
632
+ ctlIndicatorList={ctlIndicatorList}
633
+ manual={true}
634
+ />
635
+ );
636
+ })}
637
+ </g>
638
+ {/**绘制图表主体 */}
639
+ {series.map(({ Component, yOrZ, ...config }, index) => {
640
+ const yAxis = axes.get(yOrZ);
641
+ const isXRepeat = hasDuplicateX(series); //x项有重复项判断
642
+ return (
643
+ yAxis &&
644
+ Component && (
645
+ <Component
606
646
  key={index}
607
- {...indicator}
608
- {...{
609
- height: yLineRange,
610
- width: indicatorWidth,
611
- x: x - indicatorWidth / 2,
612
- }}
647
+ {...config}
648
+ bandLength={bandLength}
649
+ curXLabel={curXLabel}
650
+ selectStyle={selectStyle}
651
+ xAxis={axisX}
652
+ yAxis={yAxis}
653
+ auto={auto}
654
+ // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
613
655
  isControlChart={!!control}
614
- xName={item.tick}
656
+ indicatorWidth={indicatorWidth}
657
+ triggerEvents={onInteraction}
615
658
  setCtlTip={setCtlTip}
616
- ctlIndicatorList={ctlIndicatorList}
617
- manual={true}
659
+ isXRepeat={isXRepeat}
660
+ maxWidth={bar ? bar.maxWidth : 0}
618
661
  />
619
- );
620
- })}
621
- </g>
622
- {/**绘制图表主体 */}
623
- {series.map(({ Component, yOrZ, ...config }, index) => {
624
- const yAxis = axes.get(yOrZ);
625
- const isXRepeat = hasDuplicateX(series); //x项有重复项判断
626
- return (
627
- yAxis &&
628
- Component && (
629
- <Component
630
- key={index}
631
- {...config}
632
- bandLength={bandLength}
633
- curXLabel={curXLabel}
634
- selectStyle={selectStyle}
635
- xAxis={axisX}
636
- yAxis={yAxis}
637
- auto={auto}
638
- // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
639
- isControlChart={!!control}
640
- indicatorWidth={indicatorWidth}
641
- triggerEvents={onInteraction}
642
- setCtlTip={setCtlTip}
643
- isXRepeat={isXRepeat}
644
- maxWidth={bar ? bar.maxWidth : 0}
645
- />
646
- )
647
- );
648
- })}
649
- {/* 图表数值标签 */}
650
- {series.map(({ Component, yOrZ, ...config }, index) => {
651
- const yAxis = axes.get(yOrZ);
652
- const isXRepeat = hasDuplicateX(series); //x项有重复项判断
653
- return (
654
- yAxis && (
655
- <Label
656
- isXRepeat={isXRepeat}
657
- key={index}
658
- {...config}
659
- curXLabel={curXLabel}
660
- selectStyle={selectStyle}
661
- bandLength={bandLength}
662
- xAxis={axisX}
663
- yAxis={yAxis}
664
- triggerEvents={onInteraction}
665
- isControlChart={!!control}
666
- />
667
- )
668
- );
669
- })}
670
- <g>
671
- {control &&
672
- zIndex != "bottom" &&
673
- ctlIndicatorList.map((item, index) => {
674
- const x = axisX.scaler(item.tick);
675
- return (
676
- <Indicator
662
+ )
663
+ );
664
+ })}
665
+ {/* 图表数值标签 */}
666
+ {series.map(({ Component, yOrZ, ...config }, index) => {
667
+ const yAxis = axes.get(yOrZ);
668
+ const isXRepeat = hasDuplicateX(series); //x项有重复项判断
669
+ return (
670
+ yAxis && (
671
+ <Label
672
+ isXRepeat={isXRepeat}
677
673
  key={index}
678
- {...indicator}
679
- {...{
680
- height: yLineRange,
681
- width: indicatorWidth,
682
- x: x - indicatorWidth / 2,
683
- }}
674
+ {...config}
675
+ curXLabel={curXLabel}
676
+ selectStyle={selectStyle}
677
+ bandLength={bandLength}
678
+ xAxis={axisX}
679
+ yAxis={yAxis}
680
+ triggerEvents={onInteraction}
684
681
  isControlChart={!!control}
685
- xName={item.tick}
686
- setCtlTip={setCtlTip}
687
- ctlIndicatorList={ctlIndicatorList}
688
- manual={manual}
689
682
  />
690
- );
691
- })}
683
+ )
684
+ );
685
+ })}
686
+ <g>
687
+ {control &&
688
+ zIndex != "bottom" &&
689
+ ctlIndicatorList.map((item, index) => {
690
+ const x = axisX.scaler(item.tick);
691
+ return (
692
+ <Indicator
693
+ key={index}
694
+ {...indicator}
695
+ {...{
696
+ height: yLineRange,
697
+ width: indicatorWidth,
698
+ x: x - indicatorWidth / 2,
699
+ }}
700
+ isControlChart={!!control}
701
+ xName={item.tick}
702
+ setCtlTip={setCtlTip}
703
+ ctlIndicatorList={ctlIndicatorList}
704
+ manual={manual}
705
+ />
706
+ );
707
+ })}
708
+ </g>
692
709
  </g>
693
710
  </svg>
694
711
  {/* 控制图下的提示框 */}