@easyv/charts 1.9.11 → 1.9.13

package/lib/components/Axis.js

@@ -195,8 +195,8 @@ var Label = function Label(_ref5) {
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
   var _style = style && ((0, _typeof2["default"])(style) == "object" ? style : style(_label));
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    width: "1",
-    height: "1"
+    width: "100%",
+    height: "100%"
     // x={x}
     // y={y}
     ,
@@ -212,11 +212,10 @@ var Label = function Label(_ref5) {
       x: label
     }),
     style: _objectSpread(_objectSpread(_objectSpread({}, _style), (0, _utils.getFontStyle)(font)), {}, {
-      /** Safari Bug **/
-      position: "absolute",
+      position: "relative",
+      // 替换 absolute
       cursor: "pointer",
-      left: x + (isIOS ? iosX : 0),
-      top: y + (isIOS ? iosY : 0)
+      transform: "translate(".concat(x + (isIOS ? iosX : 0), "px, ").concat(y + (isIOS ? iosY : 0), "px)") // 用 transform 定位
     })
   }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
     ShowType: "normal",

package/lib/components/Band.js

@@ -52,11 +52,12 @@ var getAttr = function getAttr(_ref) {
     seriesWidth = _ref.seriesWidth,
     length = _ref.length,
     x = _ref.x,
-    y = _ref.y;
+    y = _ref.y,
+    maxWidth = _ref.maxWidth;
   var len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0, len),
+      width: Math.min(Math.max(0, len), maxWidth),
       height: Math.max(0, seriesWidth),
       x: y,
       y: x,
@@ -69,9 +70,9 @@ var getAttr = function getAttr(_ref) {
     };
   } else {
     return {
-      x: x,
+      x: seriesWidth > maxWidth ? x + (seriesWidth - maxWidth) / 2 : x,
       y: y,
-      width: seriesWidth,
+      width: Math.min(seriesWidth, maxWidth),
       height: len,
       bgAttr: {
         x: x,
@@ -95,6 +96,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
     setCtlTip = _ref3.setCtlTip,
     isXRepeat = _ref3.isXRepeat,
+    maxWidth = _ref3.maxWidth,
     _ref3$config = _ref3.config,
     _ref3$config$pattern = _ref3$config.pattern,
     pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
@@ -237,7 +239,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         x: positionX,
         y: positionY,
         length: Math.abs(y1 - y2),
-        seriesWidth: seriesWidth
+        seriesWidth: seriesWidth,
+        maxWidth: maxWidth
       }),
       bgAttr = _getAttr.bgAttr,
       attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded3);

package/lib/components/CartesianChart.js

@@ -42,6 +42,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     animation = _ref$config$chart.animation,
     legend = _ref$config$chart.legend,
     selectStyle = _ref$config$chart.selectStyle,
+    maxWidth = _ref$config$chart.bar.maxWidth,
     series = _ref$config.series,
     bandLength = _ref$config.bandLength,
     tooltip = _ref$config.tooltip,
@@ -625,7 +626,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       indicatorWidth: indicatorWidth,
       triggerEvents: onInteraction,
       setCtlTip: setCtlTip,
-      isXRepeat: isXRepeat
+      isXRepeat: isXRepeat,
+      maxWidth: maxWidth
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,

package/package.json

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

package/src/components/Axis.tsx

@@ -229,8 +229,8 @@ const Label: (
 
   return (
     <foreignObject
-      width="1"
-      height="1"
+      width="100%"
+      height="100%"
       // x={x}
       // y={y}
       style={{ overflow: "visible" }}
@@ -242,11 +242,11 @@ const Label: (
         style={{
           ..._style,
           ...getFontStyle(font),
-          /** Safari Bug **/
-          position: "absolute",
+          position: "relative", // 替换 absolute
           cursor: "pointer",
-          left: x + (isIOS ? iosX : 0),
-          top: y + (isIOS ? iosY : 0),
+          transform: `translate(${x + (isIOS ? iosX : 0)}px, ${
+            y + (isIOS ? iosY : 0)
+          }px)`, // 用 transform 定位
         }}
       >
         <TextOverflow

package/src/components/Band.tsx

@@ -30,17 +30,19 @@ const getAttr = ({
   length,
   x,
   y,
+  maxWidth,
 }: {
   isVertical: boolean;
   seriesWidth: number;
   length: number;
   x: number;
   y: number;
+  maxWidth: number;
 }) => {
   const len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0, len),
+      width: Math.min(Math.max(0, len), maxWidth),
       height: Math.max(0, seriesWidth),
       x: y,
       y: x,
@@ -53,9 +55,9 @@ const getAttr = ({
     };
   } else {
     return {
-      x,
+      x: seriesWidth > maxWidth ? x + (seriesWidth - maxWidth) / 2 : x,
       y,
-      width: seriesWidth,
+      width: Math.min(seriesWidth, maxWidth),
       height: len,
       bgAttr: {
         x,
@@ -93,6 +95,7 @@ export default memo(
     isControlChart = false,
     setCtlTip,
     isXRepeat,
+    maxWidth,
     config: {
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
@@ -229,6 +232,7 @@ export default memo(
               y: positionY,
               length: Math.abs(y1 - y2),
               seriesWidth,
+              maxWidth,
             });
             return (
               <Fragment key={i}>

package/src/components/CartesianChart.js

@@ -44,6 +44,7 @@ const Chart = memo(
         animation,
         legend,
         selectStyle,
+        bar: { maxWidth },
       },
       series,
       bandLength,
@@ -638,6 +639,7 @@ const Chart = memo(
                       triggerEvents={onInteraction}
                       setCtlTip={setCtlTip}
                       isXRepeat={isXRepeat}
+                      maxWidth={maxWidth}
                     />
                   )
                 );