@easyv/charts 1.4.39 → 1.5.0

package/lib/components/Axis.js

@@ -54,14 +54,14 @@ var defaultFormatter = function defaultFormatter(d, _ref) {
   return d + suffix;
 };
 
-var getAxesPath = function getAxesPath(orientation, _ref2, cHeight) {
+var getAxesPath = function getAxesPath(orientation, _ref2, cHeight, cPercent) {
   var width = _ref2.width,
       height = _ref2.height;
 
   switch (orientation) {
     case "top":
     case "bottom":
-      return "M-0.5, 0H" + width;
+      return "M-0.5, 0H" + width / cPercent;
 
     case "left":
     case "right":
@@ -123,7 +123,9 @@ var AxisLine = function AxisLine(_ref3) {
       _ref3$isClipAxis = _ref3.isClipAxis,
       isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
       _ref3$clipAxisRange = _ref3.clipAxisRange,
-      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
+      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange,
+      _ref3$cPercent = _ref3.cPercent,
+      cPercent = _ref3$cPercent === void 0 ? 1 : _ref3$cPercent;
   if (!show) return null;
   var context = (0, _react.useContext)(_context.chartContext);
 
@@ -138,7 +140,7 @@ var AxisLine = function AxisLine(_ref3) {
     }));
   } else {
     return /*#__PURE__*/_react["default"].createElement("path", {
-      d: getAxesPath(orientation, context, cHeight),
+      d: getAxesPath(orientation, context, cHeight, cPercent),
       stroke: color,
       strokeWidth: lineWidth
     });
@@ -278,7 +280,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       height = _useContext.height;
 
   var cHeight = controlInfo.cHeight,
-      isC = controlInfo.isC;
+      isC = controlInfo.isC,
+      cPercent = controlInfo.cPercent;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
 
@@ -297,7 +300,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
         });
         var x1 = gridCoord.x1;
         var y1 = gridCoord.y1;
-        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+        return !(orientation == "bottom" && !isC && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
           className: "__easyv-tickLine",
           key: index,
           config: tickLine
@@ -313,6 +316,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
         return draw(ticks, scaler[index]);
       }));
+    } else if (isC && orientation == "bottom") {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }
@@ -363,7 +368,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     }
   }
 
-  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
+  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && !isC && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
     var x = _ref7.x,
         y = _ref7.y;
     return /*#__PURE__*/_react["default"].createElement("g", {
@@ -406,7 +411,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       cHeight: cHeight
     }),
     isClipAxis: isClipAxis,
-    clipAxisRange: clipAxisRange
+    clipAxisRange: clipAxisRange,
+    cPercent: cPercent
   }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
     width: width,
     style: {
@@ -416,7 +422,15 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     transform: "translate(" + x + ", " + y + ")"
   }, /*#__PURE__*/_react["default"].createElement("g", {
     ref: ref
-  }, label && gridLine && drawLabel(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
+  }, label && gridLine && drawLabel(), isC && /*#__PURE__*/_react["default"].createElement(AxisLine, {
+    orientation: orientation,
+    config: _objectSpread(_objectSpread({}, axisLine), {}, {
+      cHeight: cHeight
+    }),
+    isClipAxis: isClipAxis,
+    clipAxisRange: clipAxisRange,
+    cPercent: cPercent
+  }), isC && tickLine && drawAxisTickLine(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
   })))));
 }));

package/lib/components/CartesianChart.js

@@ -15,6 +15,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -32,6 +34,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$config = _ref.config,
       axesConfig = _ref$config.axes,
@@ -70,6 +76,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       brush = _ref$config.brush,
       _ref$config$control = _ref$config.control,
       control = _ref$config$control === void 0 ? null : _ref$config$control,
+      active = _ref.active,
       style = _ref.style,
       originData = _ref.originData,
       filterData = _ref.filterData,
@@ -113,7 +120,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     cWidth: controlWidth,
     cHeight: controlHeight,
     cBarWidth: controlBarWidth,
-    cPercent: dragPercent
+    cPercent: dragPercent,
+    cBarX: 0
   }),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       controlInfo = _useState4[0],
@@ -122,7 +130,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var cWidth = controlInfo.cWidth,
       cHeight = controlInfo.cHeight,
       cBarWidth = controlInfo.cBarWidth,
-      cPercent = controlInfo.cPercent;
+      cPercent = controlInfo.cPercent,
+      cBarX = controlInfo.cBarX;
   yLineRange -= cHeight;
   (0, _react.useEffect)(function () {
     setControlInfo({
@@ -130,7 +139,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       cWidth: controlWidth,
       cHeight: controlHeight,
       cBarWidth: controlBarWidth,
-      cPercent: dragPercent
+      cPercent: dragPercent,
+      cBarX: 0
     });
   }, [JSON.stringify(control)]);
   var svg = (0, _react.useRef)();
@@ -140,7 +150,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     controlInfo: controlInfo
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
-  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo);
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo, active);
   (0, _react.useEffect)(function () {
     if (aiData.length) {
       if (!window.aiData) {
@@ -167,7 +177,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     height: yLineRange,
     axisX: axisX,
     isHover: isHover,
-    config: tooltipConfig
+    config: tooltipConfig,
+    active: active
   }),
       tooltipX = _useTooltip.x,
       tickName = _useTooltip.name,
@@ -214,34 +225,58 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
 
   var isWorking = (0, _react.useRef)(false); //控制条是否正在进行各种操作
 
-  var range = function range(num) {
+  var range = function range(num, ignoreMax) {
     var _num = num;
     var min = 0;
     var max = cWidth - cBarWidth;
     _num = Math.max(_num, min);
+
+    if (ignoreMax) {
+      return _num;
+    }
+
     _num = Math.min(_num, max);
     return _num;
   }; //设置滑块和图表主体的偏移值
 
 
   var setControlTranslate = function setControlTranslate(x, needSave) {
-    var controlEnd = axisX.controlEnd,
-        start = axisX.start;
     var moveLen = range(x);
     if (needSave) ctlBarX.current = moveLen;
-    controlEl.current.style.transform = "translate(".concat(moveLen, "px,0)"); //计算出当前位移的百分比
+    setControlInfo(function (pre) {
+      return _objectSpread(_objectSpread({}, pre), {}, {
+        cBarX: moveLen
+      });
+    });
+  };
 
-    var percent = moveLen / (cWidth - cBarWidth);
-    var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
-    curControlPercent.current = percent;
-    seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
-    axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
+  var setControlWidth = function setControlWidth(fn) {
+    var ignoreMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setControlInfo(function (pre) {
+      var x = pre.cBarX;
+      var moveLen = range(x, ignoreMax);
+      ctlBarX.current = moveLen;
+      return fn(pre);
+    });
   }; //设置控制条是否正在进行拖拽/缩放操作
 
 
   var setWorking = function setWorking(bool) {
     isWorking.current = bool;
-  };
+  }; //cBarX变化后，修改图表的偏移值
+
+
+  (0, _react.useLayoutEffect)(function () {
+    var controlEnd = axisX.controlEnd,
+        start = axisX.start;
+    controlEl.current.style.transform = "translate(".concat(cBarX, "px,0)"); //计算出当前位移的百分比
+
+    var percent = cBarX / (cWidth - cBarWidth);
+    var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
+    curControlPercent.current = percent;
+    seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
+    axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
+  }, [controlInfo]); //控制条轮播动画
 
   (0, _react.useEffect)(function () {
     if (controlEl.current && control) {
@@ -341,7 +376,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         cancelAnimationFrame(controlTimer.current);
       };
     }
-  }, [JSON.stringify(animation), control]); //初始化控制图提示框状态的函数
+  }, [JSON.stringify(animation), control, controlInfo]); //初始化控制图提示框状态的函数
 
   var initCtlTip = function initCtlTip() {
     return {
@@ -490,13 +525,13 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     actions: {
       setX: setControlTranslate,
       setWorking: setWorking,
-      setControlInfo: setControlInfo
+      setControlWidth: setControlWidth
     },
     props: {
       control: control,
+      controlInfo: controlInfo,
       axes: axes,
       series: series,
-      width: width,
       top: chartHeight + marginTop,
       bandLength: bandLength
     }

package/lib/components/Chart.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -71,6 +73,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
@@ -106,7 +114,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       svg: svg,
       onEmit: onEmit
     };
-  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]); //对轴类图表进行
+  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]);
+  (0, _react.useEffect)(function () {
+    var activeHandler = function activeHandler(e) {
+      var _e$dynamicData = e.dynamicData,
+          dynamicData = _e$dynamicData === void 0 ? true : _e$dynamicData; // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
+
+      setActive(dynamicData);
+    };
+
+    document.addEventListener("switchActive_".concat(id), activeHandler);
+    return function () {
+      document.removeEventListener("switchActive_".concat(id), activeHandler);
+    };
+  }, []); //对轴类图表进行
 
   var data = originData;
 
@@ -142,7 +163,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   }, props)) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
     id: id,
     config: config,
-    data: data
+    data: data,
+    active: active
   }, props)));
 });
 var _default = Chart;

package/lib/components/Control.js

@@ -13,43 +13,49 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _d3Scale = require("d3-scale");
 
+var _utils = require("../utils");
+
 var _excluded = ["Component", "yOrZ"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$actions = props.actions,
       setX = _props$actions.setX,
       setWorking = _props$actions.setWorking,
-      setControlInfo = _props$actions.setControlInfo,
+      setControlWidth = _props$actions.setControlWidth,
       _props$props = props.props,
       _props$props$control = _props$props.control,
       height = _props$props$control.height,
       color = _props$props$control.color,
-      _props$props$control$ = _props$props$control.drag,
-      dragColor = _props$props$control$.color,
-      dragWidth = _props$props$control$.width,
-      _props$props$control$2 = _props$props$control.margin,
-      left = _props$props$control$2.left,
-      right = _props$props$control$2.right,
+      gap = _props$props$control.gap,
+      dragColor = _props$props$control.drag.color,
+      left = _props$props$control.margin.left,
+      _props$props$controlI = _props$props.controlInfo,
+      cWidth = _props$props$controlI.cWidth,
+      cBarWidth = _props$props$controlI.cBarWidth,
       axes = _props$props.axes,
       series = _props$props.series,
-      width = _props$props.width,
       top = _props$props.top,
       bandLength = _props$props.bandLength;
-  var barWidth = width - left - right;
   var xAxis = axes.get("x");
   var barRef = (0, _react.useRef)();
   var barStyle = {
     position: "absolute",
     top: 0,
-    width: barWidth * dragWidth / 100,
+    width: cBarWidth,
     display: "flex",
     justifyContent: "space-between",
     background: dragColor
@@ -67,8 +73,39 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     cursor: "col-resize",
     background: "rgb(2, 176, 249)",
     WebkitBackgroundClip: "content-box"
+  }; //左手柄的鼠标按下逻辑
+
+  var leftDown = function leftDown() {
+    var transform = ref.current.style.transform;
+    var initX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+    var rightX = rawTranslateX + cBarWidth;
+
+    var move = function move(e) {
+      var movementX = e.movementX;
+      initX = (0, _utils.mathR)(initX + movementX, [-rawTranslateX, rightX - rawTranslateX]);
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth - movementX, [1, rightX]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth,
+          cBarX: initX + rawTranslateX
+        });
+      }, true);
+    };
+
+    var up = function up() {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
   }; //滑块的鼠标按下操作
 
+
   var down = function down() {
     var transform = ref.current.style.transform;
     var movementX = 0;
@@ -90,21 +127,41 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
   }; // //右手柄的鼠标按下逻辑
-  // const rightDown=()=>{
-  //   const move=(e)=>{
-  //   }
-  //   const up=()=>{
-  //   }
-  //   document.addEventListener()
-  // }
 
 
+  var rightDown = function rightDown() {
+    var transform = ref.current.style.transform;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var move = function move(e) {
+      var movementX = e.movementX;
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var maxWidth = cWidth - rawTranslateX;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth + movementX, [1, maxWidth]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth
+        });
+      });
+    };
+
+    var up = function up() {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      width: barWidth,
+      width: cWidth,
       height: height,
       backgroundColor: color,
-      transform: "translate(".concat(left, "px,").concat(top, "px)")
+      transform: "translate(".concat(left, "px,").concat(top - height + gap, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",
@@ -128,9 +185,19 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     ref: ref,
     style: barStyle
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
+      transform: "translateX(-6px)"
+    }),
+    onMouseDown: leftDown
+  }), /*#__PURE__*/_react["default"].createElement("div", {
     style: dragStyle,
     onMouseDown: down,
     ref: barRef
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
+      transform: "translateX(6px)"
+    }),
+    onMouseDown: rightDown
   })));
 }));
 

package/lib/components/Line.js

@@ -93,6 +93,9 @@ var Area = function Area(_ref2) {
   }, [xScaler, yScaler, curve, tension]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("path", {
     d: areaGen(data),
+    style: {
+      pointerEvents: "none"
+    },
     stroke: "none",
     fill: 'url(#' + id + ')'
   }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == 'pattern' ? /*#__PURE__*/_react["default"].createElement("pattern", {
@@ -178,7 +181,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     d: path,
     stroke: stroke,
     style: {
-      filter: show ? "drop-shadow(".concat(shadow.hShadow, "px ").concat(shadow.vShadow, "px ").concat(shadow.blur, "px ").concat(shadow.color, ")") : "none"
+      filter: show ? "drop-shadow(".concat(shadow.hShadow, "px ").concat(shadow.vShadow, "px ").concat(shadow.blur, "px ").concat(shadow.color, ")") : "none",
+      pointerEvents: "none"
     },
     fill: "none",
     strokeDasharray: lineType === 'dash' ? '3 3' : null,

package/lib/hooks/useAxes.js

@@ -429,7 +429,7 @@ var _default = function _default(_ref) {
     });
     tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
     return tmp;
-  }, [axes]);
+  }, [axes, controlInfo]);
 
   return _axes;
 };

package/lib/hooks/useCarouselAxisX.js

@@ -33,7 +33,7 @@ var initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-var _default = function _default(axis, config, isHover, controlInfo) {
+var _default = function _default(axis, config, isHover, controlInfo, active) {
   var show = config.show,
       interval = config.interval,
       duration = config.duration,
@@ -84,7 +84,7 @@ var _default = function _default(axis, config, isHover, controlInfo) {
   (0, _react.useEffect)(function () {
     var handler;
 
-    if (!(hover && isHover) && show && time && tickLength > tickCount) {
+    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
       handler = setInterval(function () {
         setStatus(function (_ref) {
           var currentIndex = _ref.currentIndex;
@@ -100,7 +100,7 @@ var _default = function _default(axis, config, isHover, controlInfo) {
     return function () {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength, hover, isHover]);
+  }, [show, time, tickCount, tickLength, hover, isHover, active]);
   (0, _react.useEffect)(function () {
     var animation;
     var currentIndex = status.currentIndex,

package/lib/hooks/useTooltip.js

@@ -23,6 +23,7 @@ var callback = function callback() {};
  * @param {Number} height 高
  * @param {Number} axisX 类目轴
  * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
  * @returns {Object} 返回被选中的名称，坐标，选中方法
  */
 
@@ -40,7 +41,8 @@ var _default = function _default(_ref) {
   var auto = _ref$config.auto,
       _ref$config$interval = _ref$config.interval,
       interval = _ref$config$interval === void 0 ? 0 : _ref$config$interval,
-      manual = _ref$config.manual;
+      manual = _ref$config.manual,
+      active = _ref.active;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -90,7 +92,7 @@ var _default = function _default(_ref) {
     }
   }, [svg, marginLeft, axisX, auto]);
   (0, _react.useEffect)(function () {
-    var on = auto && tickLength && !isHover; // if (!!on) setCurrentIndex(0);
+    var on = auto && tickLength && !isHover && active; // if (!!on) setCurrentIndex(0);
 
     var intervalHandler = on ? setInterval(function () {
       setCurrentIndex(function (index) {
@@ -107,7 +109,7 @@ var _default = function _default(_ref) {
     return function () {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval, isHover]);
+  }, [auto, tickLength, interval, isHover, active]);
   var name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name: name,

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -900,6 +900,17 @@ var reduceConfig = function reduceConfig() {
   }
 
   return output;
+}; //限制value的值在min和max之间
+
+
+exports.reduceConfig = reduceConfig;
+
+var mathR = function mathR(value, range) {
+  var _range = (0, _slicedToArray2["default"])(range, 2),
+      min = _range[0],
+      max = _range[1];
+
+  return Math.max(min, Math.min(value, max));
 };
 
-exports.reduceConfig = reduceConfig;
+exports.mathR = mathR;

package/package.json

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

package/src/components/Axis.tsx

@@ -37,12 +37,13 @@ const defaultFormatter: (
 const getAxesPath: (
   orientation: Orientation,
   { width, height }: Context,
-  cHeight:number
-) => string = (orientation, { width, height }, cHeight) => {
+  cHeight:number,
+  cPercent:number
+) => string = (orientation, { width, height }, cHeight, cPercent) => {
   switch (orientation) {
     case "top":
     case "bottom":
-      return "M-0.5, 0H" + width;
+      return "M-0.5, 0H" + width/cPercent;
     case "left":
     case "right":
       return "M0, -0.5V" + (height + 0.5 - cHeight);
@@ -98,11 +99,13 @@ const AxisLine: ({
   config,
   isClipAxis,
   clipAxisRange,
+  cPercent
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
   config: { show, color, lineWidth, cHeight },
   isClipAxis = false,
   clipAxisRange = [],
+  cPercent = 1
 }) => {
   if (!show) return null;
   const context: Context = useContext(chartContext);
@@ -124,7 +127,7 @@ const AxisLine: ({
   } else {
     return (
       <path
-        d={getAxesPath(orientation, context, cHeight)}
+        d={getAxesPath(orientation, context, cHeight, cPercent)}
         stroke={color}
         strokeWidth={lineWidth}
       />
@@ -279,7 +282,7 @@ export default memo(
     ) => {
       if (!(on && ticks.length > 0)) return null;
       const { width, height } = useContext(chartContext);
-      const { cHeight, isC } = controlInfo;
+      const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height-cHeight : 0;
 
@@ -302,7 +305,7 @@ export default memo(
             const y1 = gridCoord.y1;
             return (
               !(
-                (orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) ||
+                (orientation == "bottom" && !isC && (x1 < 0 || x1 > xLineRange)) ||
                 y1 < 0 ||
                 y1 > yLineRange
               ) && (
@@ -320,7 +323,7 @@ export default memo(
             );
           });
         };
-
+        
         if (isClipAxis) {
           return (
             <>
@@ -329,11 +332,12 @@ export default memo(
               })}
             </>
           );
-        } else {
+        } else if (isC && orientation == "bottom") {
+          return <>{draw(rawTicks, scaler)}</>;
+        }else {
           return <>{draw(ticks, scaler)}</>;
         }
       }
-
       function drawLabel() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
@@ -400,7 +404,7 @@ export default memo(
       return (
         <g>
           {/* 绘制轴线和刻度 */}
-          {axisLine && tickLine && (
+          {axisLine && tickLine && !isC && (
             <g>
               {axisLine &&
                 (positions && positions.length ? (
@@ -458,6 +462,7 @@ export default memo(
                       config={{...axisLine,cHeight}}
                       isClipAxis={isClipAxis}
                       clipAxisRange={clipAxisRange}
+                      cPercent={cPercent}
                     />
                     {tickLine && drawAxisTickLine()}
                   </g>
@@ -476,6 +481,14 @@ export default memo(
               {/* 用于控制图 */}
               <g ref={ref as any}>
                 {label && gridLine && drawLabel()}
+                {isC && <AxisLine
+                      orientation={orientation}
+                      config={{...axisLine,cHeight}}
+                      isClipAxis={isClipAxis}
+                      clipAxisRange={clipAxisRange}
+                      cPercent={cPercent}
+                    />}
+                {isC && tickLine && drawAxisTickLine()}
                 {unit && <Unit config={unit} />}
               </g>
             </g>

package/src/components/CartesianChart.js

@@ -8,7 +8,8 @@ import React, {
   useRef,
   useContext,
   useCallback,
-  useEffect
+  useEffect,
+  useLayoutEffect
 } from "react";
 import { useAxes, useTooltip, useCarouselAxisX, useAiData } from "../hooks";
 import { chartContext } from "../context";
@@ -58,6 +59,7 @@ const Chart = memo(
       brush,
       control = null,
     },
+    active,
     style,
     originData,
     filterData,
@@ -88,8 +90,8 @@ const Chart = memo(
       dragPercent = dragWidth/100;
       controlBarWidth = controlWidth*dragPercent;
     }
-    const [controlInfo, setControlInfo] = useState({ isC:isControl, cWidth:controlWidth, cHeight:controlHeight, cBarWidth:controlBarWidth, cPercent:dragPercent });
-    const { cWidth, cHeight, cBarWidth, cPercent } = controlInfo;
+    const [controlInfo, setControlInfo] = useState({ isC:isControl, cWidth:controlWidth, cHeight:controlHeight, cBarWidth:controlBarWidth, cPercent:dragPercent, cBarX:0 });
+    const { cWidth, cHeight, cBarWidth, cPercent, cBarX } = controlInfo;
     yLineRange -=  cHeight;
     useEffect(()=>{
       setControlInfo({
@@ -97,7 +99,8 @@ const Chart = memo(
         cWidth:controlWidth,
         cHeight:controlHeight, 
         cBarWidth:controlBarWidth, 
-        cPercent:dragPercent
+        cPercent:dragPercent,
+        cBarX:0
       });
     },[JSON.stringify(control)]);
 
@@ -112,7 +115,8 @@ const Chart = memo(
       axes.get("x"),
       animation,
       isHover,
-      controlInfo
+      controlInfo,
+      active
     );
     useEffect(()=>{
       if(aiData.length){
@@ -143,6 +147,7 @@ const Chart = memo(
       axisX,
       isHover,
       config: tooltipConfig,
+      active
     });
     const tooltipData = useMemo(
       () =>
@@ -190,31 +195,52 @@ const Chart = memo(
     const ctlBarX = useRef(0);      //控制条的滑块偏移值
     const isWorking = useRef(false);  //控制条是否正在进行各种操作
 
-    const range = (num) => {
+    const range = (num, ignoreMax) => {
       let _num = num;
       const min = 0;
       const max = cWidth - cBarWidth;
       _num = Math.max(_num, min);
+      if(ignoreMax){
+        return _num;
+      }
       _num = Math.min(_num, max);
       return _num;
     };
     //设置滑块和图表主体的偏移值
     const setControlTranslate = (x, needSave) => {
-      const { controlEnd, start } = axisX;
       const moveLen = range(x);
       if(needSave) ctlBarX.current = moveLen;
-      controlEl.current.style.transform = `translate(${moveLen}px,0)`;
-      //计算出当前位移的百分比
-      const percent = moveLen / (cWidth - cBarWidth);
-      const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
-      curControlPercent.current = percent;
-      seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
-      axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
+      setControlInfo(pre=>{
+        return {
+          ...pre,
+          cBarX:moveLen
+        }
+      });
     };
+    const setControlWidth = (fn,ignoreMax=false)=>{
+      setControlInfo(pre=>{
+        const x = pre.cBarX;
+        const moveLen = range(x, ignoreMax);
+        ctlBarX.current = moveLen;
+        return fn(pre);
+      });
+    }
     //设置控制条是否正在进行拖拽/缩放操作
     const setWorking=(bool)=>{
       isWorking.current = bool;
     }
+    //cBarX变化后，修改图表的偏移值
+    useLayoutEffect(()=>{
+      const { controlEnd, start } = axisX;
+      controlEl.current.style.transform = `translate(${cBarX}px,0)`;
+      //计算出当前位移的百分比
+      const percent = cBarX / (cWidth - cBarWidth);
+      const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
+      curControlPercent.current = percent;
+      seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
+      axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
+    },[controlInfo]);
+    //控制条轮播动画
     useEffect(() => {
       if (controlEl.current && control) {
         let isEnter = false;   //控制条轮播动画是否处于暂停状态
@@ -291,7 +317,7 @@ const Chart = memo(
           cancelAnimationFrame(controlTimer.current);
         };
       }
-    }, [JSON.stringify(animation), control]);
+    }, [JSON.stringify(animation), control, controlInfo]);
     //初始化控制图提示框状态的函数
     const initCtlTip = ()=>{
       return {
@@ -484,13 +510,13 @@ const Chart = memo(
             actions={{
               setX:setControlTranslate,
               setWorking,
-              setControlInfo
+              setControlWidth
             }}
             props={{
               control,
+              controlInfo,
               axes,
               series,
-              width,
               top:chartHeight+marginTop,
               bandLength,
             }}

package/src/components/Chart.js

@@ -1,7 +1,7 @@
 /**
  * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
  */
-import React, { memo, useMemo, createRef, useCallback } from 'react';
+import React, { memo, useMemo, createRef, useState, useEffect, useCallback } from 'react';
 import { chartContext } from '../context';
 import { PieChart, CartesianChart } from '.';
 import { group } from 'd3v7';
@@ -43,6 +43,8 @@ const Chart = memo(
     const chartWidth = width - marginLeft - marginRight;
     const chartHeight = height - marginTop - marginBottom;
 
+    const [active, setActive] = useState(true);
+
     const triggerOnRelative = useCallback(
       (action,data) => {
         if (!interaction) return;
@@ -87,6 +89,20 @@ const Chart = memo(
       }),
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
+
+    useEffect(()=>{
+      const activeHandler=(e)=>{
+        const { dynamicData = true } = e;
+        // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
+        setActive(dynamicData);
+      }
+      document.addEventListener(`switchActive_${id}`,activeHandler);
+      return ()=>{
+        document.removeEventListener(`switchActive_${id}`,activeHandler);
+      }
+    },[]);
+    
+
     //对轴类图表进行
     let data = originData;
     if(axes){
@@ -107,7 +123,7 @@ const Chart = memo(
         {type == 'pie' ? (
           <PieChart id={id} config={config} data={data} {...props} />
         ) : (
-          <CartesianChart id={id} config={config} data={data} {...props} />
+          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
         )}
       </chartContext.Provider>
     );

package/src/components/Control.jsx

@@ -1,21 +1,23 @@
 import React, { forwardRef, memo, useRef } from "react";
 import { scaleLinear } from "d3-scale";
+import { mathR } from "../utils";
 
 export default memo(forwardRef((props, ref) => {
   const { 
-    actions:{ setX, setWorking, setControlInfo }, 
+    actions:{ setX, setWorking, setControlWidth }, 
     props: { 
-      control:{ height, color, drag:{ color:dragColor, width:dragWidth }, margin:{ left, right } }, axes, series, width, top, bandLength 
+      control:{ height, color, gap, drag:{ color:dragColor }, margin:{ left } }, 
+      controlInfo:{ cWidth, cBarWidth },
+      axes, series, top, bandLength 
     }
   } = props;
-  const barWidth = width-left-right;
   const xAxis = axes.get("x");
   const barRef = useRef();
 
   const barStyle={
     position:"absolute",
     top:0,
-    width:barWidth*dragWidth/100,
+    width:cBarWidth,
     display:"flex",
     justifyContent:"space-between",
     background:dragColor
@@ -34,6 +36,34 @@ export default memo(forwardRef((props, ref) => {
     background:"rgb(2, 176, 249)",
     WebkitBackgroundClip:"content-box",
   }
+ 
+  //左手柄的鼠标按下逻辑
+  const leftDown=()=>{
+    const transform = ref.current.style.transform;
+    let initX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const rightX = rawTranslateX+cBarWidth;
+    const move=(e)=>{
+      const { movementX } = e;
+      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth,
+          cBarX:initX+rawTranslateX
+        }
+      }, true);
+    }
+    const up=()=>{
+      document.removeEventListener("mousemove",move);
+      document.removeEventListener("mouseup",up);
+    }
+    document.addEventListener("mousemove",move);
+    document.addEventListener("mouseup",up);
+  }
   //滑块的鼠标按下操作
   const down=()=>{
     const transform = ref.current.style.transform;
@@ -54,23 +84,36 @@ export default memo(forwardRef((props, ref) => {
     setWorking(true);
   }
   // //右手柄的鼠标按下逻辑
-  // const rightDown=()=>{
-
-  //   const move=(e)=>{
-
-  //   }
-  //   const up=()=>{
-
-  //   }
-  //   document.addEventListener()
-  // }
+  const rightDown=()=>{
+    const transform = ref.current.style.transform;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const move=(e)=>{
+      const { movementX } = e;
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const maxWidth = cWidth-rawTranslateX;
+        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth
+        }
+      });
+    }
+    const up=()=>{
+      document.removeEventListener("mousemove",move);
+      document.removeEventListener("mouseup",up);
+    }
+    document.addEventListener("mousemove",move);
+    document.addEventListener("mouseup",up);
+  }
   return (
     <div
       style={{
-        width: barWidth,
+        width:cWidth,
         height: height,
         backgroundColor: color,
-        transform: `translate(${left}px,${top}px)`,
+        transform: `translate(${left}px,${top-height+gap}px)`,
       }}
     >
       <svg width="100%" height="100%">
@@ -97,9 +140,9 @@ export default memo(forwardRef((props, ref) => {
       </svg>
       {/* 控制条 */}
       <div ref={ref} style={barStyle}>
-        {/* <div style={{...controllerStyle,transform:"translateX(-6px)"}}></div> */}
+        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown}></div>
         <div style={dragStyle} onMouseDown={down} ref={barRef}></div>
-        {/* <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown}></div> */}
+        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown}></div>
       </div>
     </div>
   );

package/src/components/Line.js

@@ -48,7 +48,7 @@ const Area = ({
 
   return (
     <>
-      <path d={areaGen(data)} stroke='none' fill={'url(#' + id + ')'} />
+      <path d={areaGen(data)} style={{pointerEvents:"none"}} stroke='none' fill={'url(#' + id + ')'} />
       <defs>
         {type && type == 'pattern' ? (
           <pattern id={id} patternUnits="userSpaceOnUse" width={patternW} height={patternH}>
@@ -129,7 +129,8 @@ export default memo(
           d={path}
           stroke={stroke}
           style={{
-            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none"
+            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none",
+            pointerEvents:"none"
           }}
           fill='none'
           strokeDasharray={lineType === 'dash' ? '3 3' : null}

package/src/hooks/useAxes.js

@@ -430,6 +430,6 @@ export default ({
     });
     tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
     return tmp;
-  }, [axes]);
+  }, [axes, controlInfo]);
   return _axes;
 };

package/src/hooks/useCarouselAxisX.js

@@ -17,7 +17,8 @@ export default (
   axis,
   config,
   isHover,
-  controlInfo
+  controlInfo,
+  active
 ) => {
   const { show, interval, duration, hover } = config;
   const { isC, cPercent } = controlInfo;
@@ -59,7 +60,7 @@ export default (
   }, [show, time, tickCount, tickLength]);
   useEffect(() => {
     let handler;
-    if (!(hover && isHover) && show && time && tickLength > tickCount) {
+    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -73,7 +74,7 @@ export default (
     return () => {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength, hover, isHover]);
+  }, [show, time, tickCount, tickLength, hover, isHover, active]);
 
   useEffect(() => {
     let animation;

package/src/hooks/useTooltip.ts

@@ -11,6 +11,7 @@ const callback = () => {};
  * @param {Number} height 高
  * @param {Number} axisX 类目轴
  * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
  * @returns {Object} 返回被选中的名称，坐标，选中方法
  */
 type Props = {
@@ -22,6 +23,7 @@ type Props = {
   axisX: any;
   isHover: boolean;
   config: { auto?: boolean; interval?: number; manual?: boolean };
+  active:boolean
 };
 
 export default ({
@@ -33,6 +35,7 @@ export default ({
   axisX,
   isHover,
   config: { auto, interval = 0, manual } = {},
+  active
 }: Props) => {
   const [currentIndex, setCurrentIndex] = useState<number | null>(null);
   const tickLength = axisX.allTicks.length;
@@ -73,7 +76,7 @@ export default ({
     [svg, marginLeft, axisX, auto]
   );
   useEffect(() => {
-    const on = auto && tickLength && !isHover;
+    const on = auto && tickLength && !isHover && active;
     // if (!!on) setCurrentIndex(0);
     const intervalHandler = on
       ? setInterval(() => {
@@ -90,7 +93,7 @@ export default ({
     return () => {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval, isHover]);
+  }, [auto, tickLength, interval, isHover, active]);
   const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name,

package/src/utils/index.js

@@ -723,6 +723,12 @@ const reduceConfig = (config = []) => {
   return output;
 };
 
+//限制value的值在min和max之间
+const mathR=(value, range)=>{
+  const [min,max] = range;
+  return Math.max(min,Math.min(value,max));
+}
+
 export {
   dateFormat,
   getBreakWord,
@@ -754,4 +760,5 @@ export {
   getDataWithPercent,
   reduceConfig,
   getSeriesInfo,
+  mathR
 };