@easyv/charts 1.9.21 → 1.9.22

package/lib/components/Axis.js

@@ -264,7 +264,7 @@ var Label = function Label(_ref5) {
     // y={y}
     ,
     style: {
-      overflow: "hidden"
+      overflow: "visible"
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className,
@@ -347,7 +347,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     cBarX = controlInfo.cBarX,
     cWidth = controlInfo.cWidth,
     cBarWidth = controlInfo.cBarWidth;
-  var clipPathIdRef = (0, _react.useRef)("axis-clip-".concat(orientation, "-").concat(axisType, "-").concat(Math.random().toString(36).substr(2, 9)));
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
@@ -550,20 +549,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
     width: width,
     style: {
-      overflow: "hidden"
+      overflow: axisType === "x" && isC ? "hidden" : "visible"
     }
-  }, axisType === "x" && isC || isIOS && axisType === "x" ? /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
-    id: clipPathIdRef.current,
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/_react["default"].createElement("rect", {
-    x: "0",
-    y: "0",
-    width: xLineRange,
-    height: height + 200,
-    fill: "transparent"
-  }))) : null, /*#__PURE__*/_react["default"].createElement("g", {
-    transform: "translate(" + x + ", " + y + ")",
-    clipPath: axisType === "x" && isC || isIOS && axisType === "x" ? "url(#".concat(clipPathIdRef.current, ")") : undefined
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(" + x + ", " + y + ")"
   }, /*#__PURE__*/_react["default"].createElement("g", {
     ref: ref
   }, label && gridLine && drawLabel(), isC && /*#__PURE__*/_react["default"].createElement(AxisLine, {

package/lib/components/ChartContainer.js

@@ -43,7 +43,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     onMouseMove: onMouseMove,
     ref: ref,
     style: _objectSpread({
-      overflow: "visible",
+      overflow: "hidden",
       position: "absolute",
       width: width,
       height: height

package/package.json

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

package/src/components/Axis.tsx

@@ -9,7 +9,6 @@ import React, {
   CSSProperties,
   MouseEventHandler,
   forwardRef,
-  useRef,
 } from "react";
 import { getTickCoord, getGridCoord, getFontStyle } from "../utils";
 import { chartContext } from "../context";
@@ -308,7 +307,7 @@ const Label: (
       height="100%"
       // x={x}
       // y={y}
-      style={{ overflow: "hidden" }}
+      style={{ overflow: "visible" }}
     >
       <div
         className={className}
@@ -397,11 +396,6 @@ export default memo(
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent, cBarX, cWidth, cBarWidth } = controlInfo;
-      const clipPathIdRef = useRef(
-        `axis-clip-${orientation}-${axisType}-${Math.random()
-          .toString(36)
-          .substr(2, 9)}`
-      );
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
 
@@ -714,34 +708,10 @@ export default memo(
           <svg
             width={width}
             style={{
-              overflow: "hidden",
+              overflow: axisType === "x" && isC ? "hidden" : "visible",
             }}
           >
-            {/* 定义裁剪路径：用于iOS端超出隐藏 */}
-            {(axisType === "x" && isC) || (isIOS && axisType === "x") ? (
-              <defs>
-                <clipPath
-                  id={clipPathIdRef.current}
-                  clipPathUnits="userSpaceOnUse"
-                >
-                  <rect
-                    x="0"
-                    y="0"
-                    width={xLineRange}
-                    height={height + 200}
-                    fill="transparent"
-                  />
-                </clipPath>
-              </defs>
-            ) : null}
-            <g
-              transform={"translate(" + x + ", " + y + ")"}
-              clipPath={
-                (axisType === "x" && isC) || (isIOS && axisType === "x")
-                  ? `url(#${clipPathIdRef.current})`
-                  : undefined
-              }
-            >
+            <g transform={"translate(" + x + ", " + y + ")"}>
               {/* 用于控制图 */}
               <g ref={ref as any}>
                 {label && gridLine && drawLabel()}

package/src/components/CartesianChart.js

@@ -512,6 +512,7 @@ const Chart = memo(
           style={{ ...style, position: "absolute" }}
           width={width}
           height={height}
+          
           marginLeft={marginLeft}
           marginTop={marginTop}
           onMouseEnter={() => {

package/src/components/ChartContainer.tsx

@@ -54,7 +54,7 @@ export default memo(
           onMouseMove={onMouseMove}
           ref={ref}
           style={{
-            overflow: "visible",
+            overflow: "hidden",
             position: "absolute",
             width,
             height,