@easyv/charts 1.9.18 → 1.9.20

package/lib/components/Axis.js

@@ -339,6 +339,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     width = _useContext.width,
     height = _useContext.height,
     isIOS = _useContext.isIOS;
+  var cHeight = controlInfo.cHeight,
+    isC = controlInfo.isC,
+    cPercent = controlInfo.cPercent;
+  var x = orientation == "right" ? width : 0;
+  var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
   if (label.labelNum == "Fixed") {
     LabelWidth = label.appearance.width;
@@ -347,53 +352,59 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
       LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
     }
   }
-  var LabelNum = Math.floor(width * (1 - paddingOuter) / LabelWidth);
-  var ticks = label.labelNum == "Fixed" ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length) / 2 : LabelNum : allTicks.length, label.showLast);
+  var LabelNum = Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth);
+  var ticks = label.labelNum == "Fixed" ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
   if (!(on && ticks.length > 0)) return null;
-  var cHeight = controlInfo.cHeight,
-    isC = controlInfo.isC,
-    cPercent = controlInfo.cPercent;
-  var x = orientation == "right" ? width : 0;
-  var y = orientation == "bottom" ? height - cHeight : 0;
+
   //数据抽取逻辑
   function getEvenlySpacedElements(arr, expectCount) {
     var acc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!arr.length || expectCount <= 0) return [];
     if (expectCount >= arr.length) return (0, _toConsumableArray2["default"])(arr);
-
-    // 如果只需要取1个，直接返回第一个
-    if (expectCount === 1) {
-      return [arr[0]];
-    }
+    if (expectCount === 1) return [arr[0]];
     if (acc) {
-      //严格均分逻辑
-      var result = [arr[0], arr[arr.length - 1]];
-      if (expectCount === 2) {
-        return result;
-      }
-      var needMiddleCount = expectCount - 2;
-      var availableMiddleLength = arr.length - 2;
-      if (needMiddleCount > 0 && availableMiddleLength >= needMiddleCount && (availableMiddleLength + 1) % (needMiddleCount + 1) === 0) {
-        var step = (availableMiddleLength + 1) / (needMiddleCount + 1);
-        result.length = 0;
-        result.push(arr[0]);
-        for (var i = 1; i <= needMiddleCount; i++) {
-          var index = i * step;
-          result.push(arr[index]);
+      var totalLength = arr.length;
+      var result = [];
+      var bestCount = 2;
+      for (var k = expectCount; k >= 2; k--) {
+        var denominator = k - 1;
+        var numerator = totalLength - 1;
+        if (denominator > 0 && numerator % denominator === 0) {
+          bestCount = k;
+          break;
         }
-        result.push(arr[arr.length - 1]);
       }
+      var step = (totalLength - 1) / (bestCount - 1);
+      for (var i = 0; i < bestCount; i++) {
+        var rawIndex = i * step;
+        var index = Math.ceil(rawIndex);
+        var safeIndex = Math.max(0, Math.min(totalLength - 1, index));
+        result.push(arr[safeIndex]);
+      }
+      if (result.length > 0) result[0] = arr[0];
+      if (result.length >= 2) result[result.length - 1] = arr[totalLength - 1];
       return result;
     } else {
+      // 重构acc=false逻辑：优先均匀分布，不强制首尾
       var _result = [];
       var arrLen = arr.length;
-      var _step = Math.max(1, Math.floor(arrLen / expectCount));
-      for (var _i = 0; _i < arrLen; _i += _step) {
-        _result.push(arr[_i]);
-        if (_result.length >= expectCount) break;
+      if (expectCount === 2) {
+        _result.push(arr[0]);
+        _result.push(arr[arrLen - 1]);
+        return _result;
       }
-      if (expectCount === 2 && _result.length >= 2) {
-        _result[1] = arr[arr.length - 1];
+      var idealStep = (arrLen - 1) / (expectCount - 1);
+      var isIdealStepInteger = Math.abs(idealStep - Math.round(idealStep)) < 1e-10;
+      if (isIdealStepInteger) {
+        for (var _i = 0; _i < expectCount; _i++) {
+          var _index = _i * idealStep;
+          _result.push(arr[_index]);
+        }
+      } else {
+        var _step = Math.max(1, Math.floor(arrLen / expectCount));
+        for (var _i2 = 0; _i2 < arrLen && _result.length < expectCount; _i2 += _step) {
+          _result.push(arr[_i2]);
+        }
       }
       return _result;
     }
@@ -474,7 +485,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
         return draw(ticks, scaler[index]);
       }));
     } else if (isC && orientation == "bottom") {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
+      // return <>{draw(rawTicks, scaler)}</>;
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }

package/lib/components/CartesianChart.js

@@ -352,7 +352,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       percent = isNaN(percent) ? 1 : percent;
       var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
       curControlPercent.current = percent;
-      seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
+      // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
       axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
     }
   }, [controlInfo]);
@@ -589,9 +589,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     ref: seriesEl,
     style: {
       overflow: "visible",
+      // 保留原有样式，clipPath会接管裁剪
       position: "absolute",
       transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
     }
+  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: "chart-clip-".concat(id)
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "0",
+    y: "0",
+    width: xLineRange,
+    height: yLineRange,
+    fill: "transparent"
+  }))), /*#__PURE__*/_react["default"].createElement("g", {
+    clipPath: "url(#chart-clip-".concat(id, ")")
   }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
@@ -662,7 +673,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ctlIndicatorList: ctlIndicatorList,
       manual: manual
     }));
-  }))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: controlChartTooltipData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.18",
+  "version": "1.9.20",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -392,6 +392,9 @@ export default memo(
       ref
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
+      const { cHeight, isC, cPercent } = controlInfo;
+      const x = orientation == "right" ? width : 0;
+      const y = orientation == "bottom" ? height - cHeight : 0;
       let LabelWidth = 1;
       if (label.labelNum == "Fixed") {
         LabelWidth = label.appearance.width;
@@ -400,7 +403,9 @@ export default memo(
           LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
         }
       }
-      const LabelNum = Math.floor((width * (1 - paddingOuter)) / LabelWidth);
+      const LabelNum = Math.floor(
+        ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
+      );
       const ticks: any =
         label.labelNum == "Fixed"
           ? tickss
@@ -408,16 +413,13 @@ export default memo(
               allTicks,
               LabelNum < allTicks.length
                 ? LabelNum > allTicks.length / 2
-                  ? Math.ceil(allTicks.length) / 2
+                  ? Math.ceil(allTicks.length / 2)
                   : LabelNum
                 : allTicks.length,
               label.showLast
             );
       if (!(on && ticks.length > 0)) return null;
 
-      const { cHeight, isC, cPercent } = controlInfo;
-      const x = orientation == "right" ? width : 0;
-      const y = orientation == "bottom" ? height - cHeight : 0;
       //数据抽取逻辑
       function getEvenlySpacedElements(
         arr: any[],
@@ -426,51 +428,63 @@ export default memo(
       ): any[] {
         if (!arr.length || expectCount <= 0) return [];
         if (expectCount >= arr.length) return [...arr];
-
-        // 如果只需要取1个，直接返回第一个
-        if (expectCount === 1) {
-          return [arr[0]];
-        }
+        if (expectCount === 1) return [arr[0]];
 
         if (acc) {
-          //严格均分逻辑
-          const result: any[] = [arr[0], arr[arr.length - 1]];
-          if (expectCount === 2) {
-            return result;
-          }
-          const needMiddleCount = expectCount - 2;
-          const availableMiddleLength = arr.length - 2;
+          const totalLength = arr.length;
+          const result: any[] = [];
 
-          if (
-            needMiddleCount > 0 &&
-            availableMiddleLength >= needMiddleCount &&
-            (availableMiddleLength + 1) % (needMiddleCount + 1) === 0
-          ) {
-            const step = (availableMiddleLength + 1) / (needMiddleCount + 1);
-            result.length = 0;
-            result.push(arr[0]);
-            for (let i = 1; i <= needMiddleCount; i++) {
-              const index = i * step;
-              result.push(arr[index]);
+          let bestCount = 2;
+          for (let k = expectCount; k >= 2; k--) {
+            const denominator = k - 1;
+            const numerator = totalLength - 1;
+            if (denominator > 0 && numerator % denominator === 0) {
+              bestCount = k;
+              break;
             }
+          }
 
-            result.push(arr[arr.length - 1]);
+          const step = (totalLength - 1) / (bestCount - 1);
+          for (let i = 0; i < bestCount; i++) {
+            const rawIndex = i * step;
+            const index = Math.ceil(rawIndex);
+            const safeIndex = Math.max(0, Math.min(totalLength - 1, index));
+            result.push(arr[safeIndex]);
           }
 
+          if (result.length > 0) result[0] = arr[0];
+          if (result.length >= 2)
+            result[result.length - 1] = arr[totalLength - 1];
+
           return result;
         } else {
+          // 重构acc=false逻辑：优先均匀分布，不强制首尾
           const result: any[] = [];
           const arrLen = arr.length;
-          const step = Math.max(1, Math.floor(arrLen / expectCount));
-
-          for (let i = 0; i < arrLen; i += step) {
-            result.push(arr[i]);
-            if (result.length >= expectCount) break;
-          }
-          if (expectCount === 2 && result.length >= 2) {
-            result[1] = arr[arr.length - 1];
+          if (expectCount === 2) {
+            result.push(arr[0]);
+            result.push(arr[arrLen - 1]);
+            return result;
           }
+          const idealStep = (arrLen - 1) / (expectCount - 1);
+          const isIdealStepInteger =
+            Math.abs(idealStep - Math.round(idealStep)) < 1e-10;
 
+          if (isIdealStepInteger) {
+            for (let i = 0; i < expectCount; i++) {
+              const index = i * idealStep;
+              result.push(arr[index]);
+            }
+          } else {
+            const step = Math.max(1, Math.floor(arrLen / expectCount));
+            for (
+              let i = 0;
+              i < arrLen && result.length < expectCount;
+              i += step
+            ) {
+              result.push(arr[i]);
+            }
+          }
           return result;
         }
       }
@@ -588,7 +602,8 @@ export default memo(
             </>
           );
         } else if (isC && orientation == "bottom") {
-          return <>{draw(rawTicks, scaler)}</>;
+          return <>{draw(ticks, scaler)}</>;
+          // return <>{draw(rawTicks, scaler)}</>;
         } else {
           return <>{draw(ticks, scaler)}</>;
         }

package/src/components/CartesianChart.js

@@ -344,7 +344,7 @@ const Chart = memo(
         const translateX =
           -(controlEnd + start / cPercent - chartWidth) * percent;
         curControlPercent.current = percent;
-        seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
+        // seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -583,112 +583,129 @@ const Chart = memo(
                 : `translateY(${-marginTop}px)`,
             }}
           >
+            {/* 关键修改1：添加clipPath定义，限定裁剪区域 */}
             <svg
               width="100%"
               height="100%"
               ref={seriesEl}
               style={{
-                overflow: "visible",
+                overflow: "visible", // 保留原有样式，clipPath会接管裁剪
                 position: "absolute",
                 transform: isVertical
                   ? `translate(${marginRight}px,${isIOS ? marginTop : 0}px)`
                   : `translate(${isIOS ? marginLeft : 0}px,${marginTop}px)`,
               }}
             >
-              {/* 控制图指示器部分 */}
-              <g>
-                {control &&
-                  zIndex == "bottom" &&
-                  ctlIndicatorList.map((item, index) => {
-                    const x = axisX.scaler(item.tick);
-                    return (
-                      <Indicator
+              {/* 定义裁剪路径：只显示指定宽高的区域 */}
+              <defs>
+                <clipPath id={`chart-clip-${id}`}>
+                  <rect
+                    x="0"
+                    y="0"
+                    width={xLineRange}
+                    height={yLineRange}
+                    fill="transparent"
+                  />
+                </clipPath>
+              </defs>
+
+              {/* 关键修改2：将所有图表内容包裹在g标签中，并应用clipPath */}
+              <g clipPath={`url(#chart-clip-${id})`}>
+                {/* 控制图指示器部分 */}
+                <g>
+                  {control &&
+                    zIndex == "bottom" &&
+                    ctlIndicatorList.map((item, index) => {
+                      const x = axisX.scaler(item.tick);
+                      return (
+                        <Indicator
+                          key={index}
+                          {...indicator}
+                          {...{
+                            height: yLineRange,
+                            width: indicatorWidth,
+                            x: x - indicatorWidth / 2,
+                          }}
+                          isControlChart={!!control}
+                          xName={item.tick}
+                          setCtlTip={setCtlTip}
+                          ctlIndicatorList={ctlIndicatorList}
+                          manual={true}
+                        />
+                      );
+                    })}
+                </g>
+                {/**绘制图表主体 */}
+                {series.map(({ Component, yOrZ, ...config }, index) => {
+                  const yAxis = axes.get(yOrZ);
+                  const isXRepeat = hasDuplicateX(series); //x项有重复项判断
+                  return (
+                    yAxis &&
+                    Component && (
+                      <Component
                         key={index}
-                        {...indicator}
-                        {...{
-                          height: yLineRange,
-                          width: indicatorWidth,
-                          x: x - indicatorWidth / 2,
-                        }}
+                        {...config}
+                        bandLength={bandLength}
+                        curXLabel={curXLabel}
+                        selectStyle={selectStyle}
+                        xAxis={axisX}
+                        yAxis={yAxis}
+                        auto={auto}
+                        // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
                         isControlChart={!!control}
-                        xName={item.tick}
+                        indicatorWidth={indicatorWidth}
+                        triggerEvents={onInteraction}
                         setCtlTip={setCtlTip}
-                        ctlIndicatorList={ctlIndicatorList}
-                        manual={true}
+                        isXRepeat={isXRepeat}
+                        maxWidth={bar ? bar.maxWidth : 0}
                       />
-                    );
-                  })}
-              </g>
-              {/**绘制图表主体 */}
-              {series.map(({ Component, yOrZ, ...config }, index) => {
-                const yAxis = axes.get(yOrZ);
-                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
-                return (
-                  yAxis &&
-                  Component && (
-                    <Component
-                      key={index}
-                      {...config}
-                      bandLength={bandLength}
-                      curXLabel={curXLabel}
-                      selectStyle={selectStyle}
-                      xAxis={axisX}
-                      yAxis={yAxis}
-                      auto={auto}
-                      // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
-                      isControlChart={!!control}
-                      indicatorWidth={indicatorWidth}
-                      triggerEvents={onInteraction}
-                      setCtlTip={setCtlTip}
-                      isXRepeat={isXRepeat}
-                      maxWidth={bar ? bar.maxWidth : 0}
-                    />
-                  )
-                );
-              })}
-              {/* 图表数值标签 */}
-              {series.map(({ Component, yOrZ, ...config }, index) => {
-                const yAxis = axes.get(yOrZ);
-                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
-                return (
-                  yAxis && (
-                    <Label
-                      isXRepeat={isXRepeat}
-                      key={index}
-                      {...config}
-                      curXLabel={curXLabel}
-                      selectStyle={selectStyle}
-                      bandLength={bandLength}
-                      xAxis={axisX}
-                      yAxis={yAxis}
-                      triggerEvents={onInteraction}
-                      isControlChart={!!control}
-                    />
-                  )
-                );
-              })}
-              <g>
-                {control &&
-                  zIndex != "bottom" &&
-                  ctlIndicatorList.map((item, index) => {
-                    const x = axisX.scaler(item.tick);
-                    return (
-                      <Indicator
+                    )
+                  );
+                })}
+                {/* 图表数值标签 */}
+                {series.map(({ Component, yOrZ, ...config }, index) => {
+                  const yAxis = axes.get(yOrZ);
+                  const isXRepeat = hasDuplicateX(series); //x项有重复项判断
+                  return (
+                    yAxis && (
+                      <Label
+                        isXRepeat={isXRepeat}
                         key={index}
-                        {...indicator}
-                        {...{
-                          height: yLineRange,
-                          width: indicatorWidth,
-                          x: x - indicatorWidth / 2,
-                        }}
+                        {...config}
+                        curXLabel={curXLabel}
+                        selectStyle={selectStyle}
+                        bandLength={bandLength}
+                        xAxis={axisX}
+                        yAxis={yAxis}
+                        triggerEvents={onInteraction}
                         isControlChart={!!control}
-                        xName={item.tick}
-                        setCtlTip={setCtlTip}
-                        ctlIndicatorList={ctlIndicatorList}
-                        manual={manual}
                       />
-                    );
-                  })}
+                    )
+                  );
+                })}
+                <g>
+                  {control &&
+                    zIndex != "bottom" &&
+                    ctlIndicatorList.map((item, index) => {
+                      const x = axisX.scaler(item.tick);
+                      return (
+                        <Indicator
+                          key={index}
+                          {...indicator}
+                          {...{
+                            height: yLineRange,
+                            width: indicatorWidth,
+                            x: x - indicatorWidth / 2,
+                          }}
+                          isControlChart={!!control}
+                          xName={item.tick}
+                          setCtlTip={setCtlTip}
+                          ctlIndicatorList={ctlIndicatorList}
+                          manual={manual}
+                        />
+                      );
+                    })}
+                </g>
               </g>
             </svg>
             {/* 控制图下的提示框 */}