@easyv/charts 1.10.2 → 1.10.4

package/lib/components/Axis.js

@@ -261,8 +261,8 @@ var Label = function Label(_ref5) {
   var _style = style && ((0, _typeof2["default"])(style) == "object" ? style : style(_label));
   //x轴显示
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    width: "100%"
-    // height="100%"
+    width: "100%",
+    height: "1px" //设置一个高度，让foreignObject正常显示内部内容，又不至于因为太高发生遮挡
     // x={x}
     // y={y}
     ,

package/lib/hooks/useAxes.js

@@ -113,6 +113,12 @@ var _default = exports["default"] = function _default(_ref) {
     cPercent = controlInfo.cPercent;
   var width = chartWidth;
   var height = chartHeight - cHeight;
+  var axesMemoKey = (0, _react.useMemo)(function () {
+    return JSON.stringify(axes);
+  }, [axes]);
+  var controlInfoMemoKey = (0, _react.useMemo)(function () {
+    return JSON.stringify(controlInfo);
+  }, [controlInfo]);
   var _axes = (0, _react.useMemo)(function () {
     var tmp = new Map();
     var xAxisPositions = new Set(); //用Set去重，去掉重复的x轴
@@ -409,6 +415,6 @@ var _default = exports["default"] = function _default(_ref) {
       return JSON.parse(d);
     }));
     return tmp;
-  }, [axes, controlInfo]);
+  }, [axesMemoKey, controlInfoMemoKey, axes, controlInfo]);
   return _axes;
 };

package/lib/hooks/useCarouselAxisX.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 = require("react");
 var _popmotion = require("popmotion");
@@ -14,14 +14,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var initialState = {
   currentIndex: null,
-  flag: false //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
+  flag: false // 首次加载标识：true-首次加载不执行动画，false-可执行轮播
 };
 
-/**
- * x轴滚动逻辑
- * @param {Object} axis x轴配置项
- * @param {Object} config x轴轮播动画的配置项
- * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
+/**
+ * x轴滚动逻辑
+ * @param {Object} axis x轴配置项
+ * @param {Object} config x轴轮播动画的配置项
+ * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
  */
 var _default = exports["default"] = function _default(axis, config, isHover, controlInfo, active) {
   var show = config.show,
@@ -30,7 +30,6 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     hover = config.hover;
   var isC = controlInfo.isC,
     cPercent = controlInfo.cPercent;
-  var time = duration + interval;
   var count = axis.tickCount,
     allTicks = axis.allTicks,
     scaler = axis.scaler,
@@ -44,6 +43,9 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
   var scale = isC ? cPercent : 1;
   var _start = start / scale;
   var _end = end / scale;
+  var canCarousel = (0, _react.useMemo)(function () {
+    return show && active && tickLength > tickCount;
+  }, [show, active, tickLength, tickCount]);
   var _useState = (0, _react.useState)({
       scaler: scaler,
       step: step,
@@ -56,8 +58,69 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     status = _useState4[0],
     setStatus = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    ready = _useState6[0],
+    setReady = _useState6[1]; // true 才允许开启下一轮动画（用于 interval 等待）
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    wakeToken = _useState8[0],
+    setWakeToken = _useState8[1];
+  var hoverRef = (0, _react.useRef)(isHover);
+  var prevHoverRef = (0, _react.useRef)(isHover);
+  var intervalTimerRef = (0, _react.useRef)(null);
+  var isAnimatingRef = (0, _react.useRef)(false);
+  var latestRef = (0, _react.useRef)({
+    allTicks: allTicks,
+    scaler: scaler,
+    tickCount: tickCount,
+    tickLength: tickLength,
+    lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
+    _start: _start,
+    _end: _end,
+    interval: interval,
+    duration: duration,
+    hover: hover
+  });
+
+  // 避免 hover 触发 render 时 effect 误重启动画：用 ref 持有最新输入
+  (0, _react.useEffect)(function () {
+    latestRef.current = {
+      allTicks: allTicks,
+      scaler: scaler,
+      tickCount: tickCount,
+      tickLength: tickLength,
+      lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
+      _start: _start,
+      _end: _end,
+      interval: interval,
+      duration: duration,
+      hover: hover
+    };
+  }, [allTicks, scaler, tickCount, tickLength, lengthWithoutPaddingOuter, _start, _end, interval, duration, hover]);
+
+  // hover 变化不打断正在进行的动画：只更新引用、并在需要时取消「下一轮」定时器
+  (0, _react.useEffect)(function () {
+    var prev = prevHoverRef.current;
+    prevHoverRef.current = isHover;
+    hoverRef.current = isHover;
+    if (latestRef.current.hover && isHover && intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 仅在 hover 从 true -> false 时唤醒轮播（避免在非 hover 状态下反复唤醒导致 interval 失效）
+    if (latestRef.current.hover && prev === true && isHover === false && canCarousel && status.currentIndex !== null && !isAnimatingRef.current) {
+      setReady(true);
+      setWakeToken(function (v) {
+        return v + 1;
+      });
+    }
+  }, [isHover, canCarousel, status.currentIndex]);
+
+  // 初始化：仅在基础条件变化时设置初始索引
   (0, _react.useEffect)(function () {
-    if (show && time && tickLength > tickCount) {
+    if (show && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true
@@ -65,95 +128,179 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     } else {
       setStatus(initialState);
     }
-  }, [show, time, tickCount, tickLength]);
-  (0, _react.useEffect)(function () {
-    var handler;
-    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
-      handler = setInterval(function () {
-        setStatus(function (_ref) {
-          var currentIndex = _ref.currentIndex;
-          var tmp = +currentIndex + 1;
-          return {
-            currentIndex: tmp >= tickLength ? 0 : tmp,
-            flag: false
-          };
-        });
-      }, time * 1000);
-    }
-    return function () {
-      handler && clearInterval(handler);
-    };
-  }, [show, time, tickCount, tickLength, hover, isHover, active]);
+  }, [show, tickCount, tickLength]);
   (0, _react.useEffect)(function () {
     var animation;
     var currentIndex = status.currentIndex,
       flag = status.flag;
-    if (currentIndex !== null) {
-      var _step = lengthWithoutPaddingOuter / tickCount;
+    var latest = latestRef.current;
+
+    // 执行条件：显示、非hover暂停、激活、有足够的轮播项
+    var canRun = canCarousel && !(latest.hover && hoverRef.current);
+    if (currentIndex !== null && canRun) {
       if (flag) {
-        var _ticks = allTicks.slice(currentIndex, tickCount);
+        // 首次加载：仅初始化视图，不执行动画
+        var _step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        var _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
         setState({
           step: _step,
           ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([_start, _end])
+          scaler: latest.scaler.copy().domain(_ticks).range([latest._start, latest._end])
         });
+
+        // 首次加载完成后，启动第一轮动画（等待interval后执行）
+        if (latest.interval >= 0) {
+          intervalTimerRef.current = setTimeout(function () {
+            setStatus(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                flag: false
+              });
+            });
+          }, latest.interval * 1000);
+        } else {
+          setStatus(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              flag: false
+            });
+          });
+        }
       } else {
+        // 非首次加载：执行动画 + 后续逻辑
+        if (!ready) return;
+        var _step2 = latest.lengthWithoutPaddingOuter / latest.tickCount;
         animation = (0, _popmotion.animate)({
           from: 0,
           to: -1,
-          duration: duration * 1000,
+          duration: latest.duration * 1000,
           ease: _popmotion.linear,
           onPlay: function onPlay() {
+            isAnimatingRef.current = true;
+            // 动画开始：更新ticks和scaler初始范围
+            // 这里需要保证动画是「当前项滚出，下一项滚入」
+            // 因此后续窗口从 currentIndex + 1 开始，避免首项重复导致视觉上「从第一项滚到第一项」的闪烁
             setState(function (axis) {
               var ticks = axis.ticks,
                 scaler = axis.scaler;
               var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
                 tick = _ticks2[0];
-              var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount)));
+              var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(latest.allTicks, currentIndex + 1, latest.tickCount)));
               return _objectSpread(_objectSpread({}, axis), {}, {
                 ticks: _ticks,
-                scaler: scaler.copy().range([_start, _end + _step]).domain(_ticks)
+                scaler: scaler.copy().range([latest._start, latest._end + _step2]).domain(_ticks)
               });
             });
           },
           onUpdate: function onUpdate(v) {
+            // 动画过程：实时更新scaler范围（实现滚动效果）
             setState(function (axis) {
               var scaler = axis.scaler,
                 step = axis.step;
               return _objectSpread(_objectSpread({}, axis), {}, {
-                scaler: scaler.copy().range([_start + step * v, _end + step + step * v])
+                scaler: scaler.copy().range([latest._start + step * v, latest._end + step + step * v])
               });
             });
           },
           onComplete: function onComplete() {
+            isAnimatingRef.current = false;
+            // 本轮结束后进入等待态，避免立即开启下一轮（保证 interval 生效）
+            setReady(false);
+            // 动画完成：重置ticks和scaler
             setState(function (axis) {
               var scaler = axis.scaler,
                 ticks = axis.ticks;
               var _ticks = ticks.slice(1, ticks.length);
               return _objectSpread(_objectSpread({}, axis), {}, {
                 ticks: _ticks,
-                scaler: scaler.copy().range([_start, _end]).domain(_ticks)
+                scaler: scaler.copy().range([latest._start, latest._end]).domain(_ticks)
               });
             });
+            var nextIndex = (currentIndex + 1) % latest.tickLength;
+
+            // 无论是否 hover，都先把 currentIndex 同步到下一屏起点
+            // 否则在 interval 暂停期触发 hover/离开，会用旧索引重启，视觉上“回滚一格”
+            setStatus(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                currentIndex: nextIndex
+              });
+            });
+
+            // hover 触发时：让当前动画跑完后暂停（不再排下一轮）
+            if (latest.hover && hoverRef.current) return;
+
+            // 非hover：动画完成后，等待interval时长，再触发下一轮动画
+            intervalTimerRef.current = setTimeout(function () {
+              setReady(true);
+              setWakeToken(function (v) {
+                return v + 1;
+              });
+            }, latest.interval * 1000);
           }
         });
       }
-    } else {
-      var _ticks3 = scaler.type == "linear" ? scaler.domain() : allTicks;
+    }
+
+    // 清理副作用：停止动画、清除定时器
+    return function () {
+      if (animation) {
+        animation.stop();
+        isAnimatingRef.current = false;
+      }
+      if (intervalTimerRef.current) {
+        clearTimeout(intervalTimerRef.current);
+        intervalTimerRef.current = null;
+      }
+    };
+  }, [canCarousel, status.currentIndex, status.flag, wakeToken, ready]);
+
+  // 重置逻辑：当无有效索引时恢复初始状态
+  (0, _react.useEffect)(function () {
+    if (status.currentIndex === null) {
+      var _ticks = scaler.type === "linear" ? scaler.domain() : allTicks;
       setState({
         step: step,
-        scaler: scaler.copy().domain(_ticks3).range([_start, _end]),
+        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
         ticks: ticks
       });
     }
-    return function () {
-      animation && animation.stop();
-    };
-  }, [tickCount, allTicks, scaler, _start, _end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
+  }, [status.currentIndex, scaler, _start, _end, step, ticks, allTicks]);
+
+  // 当 x 轴可见项数量（count）发生变化时，安全地重置轮播节奏
+  (0, _react.useEffect)(function () {
+    // 清掉当前的 interval 计时器，避免用旧配置继续排队
+    if (intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 重置动画节奏，让配置变更后「立即」按最新的 tickCount/tickLength 重新初始化
+    // 不能简单 setStatus(initialState)，否则会覆盖上方的初始化 effect（先开轮播再改数量时会被清成 null，导致展示全部且不轮播）
+    isAnimatingRef.current = false;
+    setReady(true);
+    setStatus(function () {
+      // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
+      if (show && active && tickLength > tickCount) {
+        return {
+          currentIndex: 0,
+          flag: true
+        };
+      }
+      return initialState;
+    });
+    setWakeToken(function (v) {
+      return v + 1;
+    });
+  }, [count, show, active, tickLength, tickCount]);
   return _objectSpread(_objectSpread(_objectSpread({}, axis), state), {}, {
     controlEnd: _end
   });
 };
+/**
+ * 获取指定索引范围的ticks（支持循环）
+ * @param {Array} ticks 所有ticks
+ * @param {number} currentIndex 当前起始索引
+ * @param {number} length 需要的长度
+ * @returns {Array} 目标ticks数组
+ */
 var getTicks = function getTicks(ticks, currentIndex, length) {
   var _currentIndex = +currentIndex;
   var ticksLength = ticks.length;

package/package.json

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

package/src/components/Axis.tsx

@@ -325,7 +325,7 @@ const Label: (
   return (
     <foreignObject
       width="100%"
-      // height="100%"
+      height="1px" //设置一个高度，让foreignObject正常显示内部内容，又不至于因为太高发生遮挡
       // x={x}
       // y={y}
       style={{ overflow: "visible" }}

package/src/hooks/useAxes.js

@@ -20,19 +20,19 @@ const getNewDomain = (
   step,
   extent = {},
   numericalRangeModel = "value",
-  percentageExtent = { max: 100, min: 100 }
+  percentageExtent = { max: 100, min: 100 },
 ) => {
   let { min: defaultBottom = "", max: defaultTop = "" } = extent;
   const { min: defaultPercentageMin = 100, max: defaultPercentageMax = 100 } =
     percentageExtent;
   let bottom = defaultBottom,
     top = defaultTop;
-  
+
   let newDomain = [];
   //能进入这个函数，说明extent中min和max至少有一个是缺失的，如果max存在，意味着纵轴上限被固定
   let min = domain[0],
     max = domain[1];
-    
+
   let minCount = Math.pow(10, getCount(min)),
     maxCount = Math.pow(10, getCount(max));
   //轴标签，范围模式，百分比模式
@@ -47,9 +47,15 @@ const getNewDomain = (
       newDomain[0] =
         bottom != "" ? bottom : Math.floor(domain[0] / minCount) * minCount;
       newDomain[1] =
-        top != "" ? top : maxCount==1?domain[1]:Math.ceil(domain[1] / maxCount) * maxCount;
-      if(newDomain[0]>0 && newDomain[0]<10 && defaultBottom==="")newDomain[0] = 0;
-      if(newDomain[1]<0 && newDomain[1]>-10 && defaultTop==="")newDomain[1] = 0;
+        top != ""
+          ? top
+          : maxCount == 1
+            ? domain[1]
+            : Math.ceil(domain[1] / maxCount) * maxCount;
+      if (newDomain[0] > 0 && newDomain[0] < 10 && defaultBottom === "")
+        newDomain[0] = 0;
+      if (newDomain[1] < 0 && newDomain[1] > -10 && defaultTop === "")
+        newDomain[1] = 0;
       break;
     case "step":
       if (defaultTop != "") {
@@ -65,8 +71,8 @@ const getNewDomain = (
       }
       break;
   }
-  if(newDomain[0]==newDomain[1]){
-    newDomain[1]+=1;
+  if (newDomain[0] == newDomain[1]) {
+    newDomain[1] += 1;
   }
   return newDomain;
 };
@@ -103,10 +109,15 @@ export default ({
   const { isC, cHeight, cWidth, cPercent } = controlInfo;
   const width = chartWidth;
   const height = chartHeight - cHeight;
+  const axesMemoKey = useMemo(() => JSON.stringify(axes), [axes]);
+  const controlInfoMemoKey = useMemo(
+    () => JSON.stringify(controlInfo),
+    [controlInfo],
+  );
 
   const _axes = useMemo(() => {
     const tmp = new Map();
-    const xAxisPositions = new Set();   //用Set去重，去掉重复的x轴
+    const xAxisPositions = new Set(); //用Set去重，去掉重复的x轴
     axes.forEach((item) => {
       const {
         config: {
@@ -154,14 +165,14 @@ export default ({
           orientation === "top" || orientation === "bottom"
             ? "horizontal"
             : orientation === "left" || orientation === "right"
-            ? "vertical"
-            : "";
+              ? "vertical"
+              : "";
         const length =
           direction === "horizontal"
             ? width
             : direction === "vertical"
-            ? height
-            : 0;
+              ? height
+              : 0;
 
         const _paddingOuter = paddingOuter * length;
         const start = _paddingOuter / 2;
@@ -202,8 +213,8 @@ export default ({
         return ticks
           ? ticks
           : scaler.ticks
-          ? scaler.ticks(tickCount)
-          : scaler.domain();
+            ? scaler.ticks(tickCount)
+            : scaler.domain();
       }
 
       /**
@@ -228,7 +239,7 @@ export default ({
         mode,
         newDomain,
         tickCount,
-        step
+        step,
       ) {
         let _ticks = allTicks;
         if (type === "ordinal") {
@@ -279,7 +290,7 @@ export default ({
       if (_isClipAxis) {
         clipAxisDomain.forEach((domain, index) => {
           clipAxisTickCount.push(
-            getTickCount(domain, clipAxisCount[index], decimal)
+            getTickCount(domain, clipAxisCount[index], decimal),
           );
         });
 
@@ -304,14 +315,14 @@ export default ({
           start,
           end,
           clipPosition,
-          clipMargin
+          clipMargin,
         );
         let newClipAxisDomain = [];
         //如果非自适应模式，计算新的domain，传入scaler，适配强制步长或者数量强制
         if (!isNaN(domain[1]) && !auto) {
           clipAxisDomain.forEach((domain, index) => {
             newClipAxisDomain.push(
-              getNewDomain(domain, mode, clipAxisStep[index])
+              getNewDomain(domain, mode, clipAxisStep[index]),
             );
           });
         } else {
@@ -322,14 +333,14 @@ export default ({
         let clipAxisScaler = [];
         newClipAxisDomain.forEach((domain, index) => {
           clipAxisScaler.push(
-            setScaler(scales, type, domain, clipAxisRange[index])
+            setScaler(scales, type, domain, clipAxisRange[index]),
           );
         });
         //clipAxisAllTicks作用是使用scaler.ticks方法,来计算标签集合
         let clipAxisAllTicks = [];
         clipAxisScaler.forEach((scaler, index) => {
           clipAxisAllTicks.push(
-            getAllTicks(scaler, ticks, clipAxisTickCount[index])
+            getAllTicks(scaler, ticks, clipAxisTickCount[index]),
           );
         });
 
@@ -345,8 +356,8 @@ export default ({
               mode,
               newClipAxisDomain[index],
               clipAxisTickCount[index],
-              clipAxisStep[index]
-            )
+              clipAxisStep[index],
+            ),
           );
         });
         let lengthWithoutPaddingOuter = length - _paddingOuter;
@@ -378,8 +389,8 @@ export default ({
           direction === "horizontal"
             ? [start, end]
             : direction === "vertical"
-            ? [end, start]
-            : [0, 0];
+              ? [end, start]
+              : [0, 0];
         if (reverse) range = [range[1], range[0]];
         let newDomain = domain;
         const fixedDomain = extent && extent.min != "" && extent.max != ""; //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
@@ -390,7 +401,7 @@ export default ({
             _step,
             extent,
             numericalRangeModel,
-            percentageExtent
+            percentageExtent,
           );
         }
         let scaler = scales[type]().domain(newDomain).range(range);
@@ -400,8 +411,8 @@ export default ({
         const allTicks = ticks
           ? ticks
           : scaler.ticks
-          ? scaler.ticks(tickCount)
-          : scaler.domain();
+            ? scaler.ticks(tickCount)
+            : scaler.domain();
         let _ticks = allTicks;
 
         if (type === "ordinal") {
@@ -464,8 +475,8 @@ export default ({
             direction_ === "horizontal"
               ? [start_, end_]
               : direction_ === "vertical"
-              ? [end_, start_]
-              : [0, 0];
+                ? [end_, start_]
+                : [0, 0];
           scaler = scales[type]().domain(newDomain).range(range);
           scaler.type = type;
           const controlOuter = len - outer;
@@ -491,8 +502,9 @@ export default ({
         });
       }
     });
-    tmp.get("x") && (tmp.get("x").positions = [...xAxisPositions].map(d=>JSON.parse(d)));
+    tmp.get("x") &&
+      (tmp.get("x").positions = [...xAxisPositions].map((d) => JSON.parse(d)));
     return tmp;
-  }, [axes, controlInfo]);
+  }, [axesMemoKey, controlInfoMemoKey, axes, controlInfo]);
   return _axes;
 };

package/src/hooks/useCarouselAxisX.js

@@ -1,181 +1,318 @@
-import { useEffect, useState } from "react";
-import { animate, linear } from "popmotion";
-
-const initialState = {
-  currentIndex: null,
-  flag: false, //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
-};
-
-/**
- * x轴滚动逻辑
- * @param {Object} axis x轴配置项
- * @param {Object} config x轴轮播动画的配置项
- * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
- */
-
-export default (axis, config, isHover, controlInfo, active) => {
-  const { show, interval, duration, hover } = config;
-  const { isC, cPercent } = controlInfo;
-  const time = duration + interval;
-
-  const {
-    tickCount: count,
-    allTicks,
-    scaler,
-    start,
-    end,
-    step,
-    ticks,
-    lengthWithoutPaddingOuter,
-  } = axis;
-  const tickLength = ticks.length;
-  const tickCount = isC ? allTicks.length : count;
-
-  const scale = isC ? cPercent : 1;
-  const _start = start / scale;
-  const _end = end / scale;
-
-  const [state, setState] = useState({
-    scaler,
-    step,
-    ticks,
-  });
-  const [status, setStatus] = useState(initialState);
-
-  useEffect(() => {
-    if (show && time && tickLength > tickCount) {
-      setStatus({
-        currentIndex: 0,
-        flag: true,
-      });
-    } else {
-      setStatus(initialState);
-    }
-  }, [show, time, tickCount, tickLength]);
-  useEffect(() => {
-    let handler;
-    if (
-      !(hover && isHover) &&
-      show &&
-      time &&
-      tickLength > tickCount &&
-      active
-    ) {
-      handler = setInterval(() => {
-        setStatus(({ currentIndex }) => {
-          const tmp = +currentIndex + 1;
-          return {
-            currentIndex: tmp >= tickLength ? 0 : tmp,
-            flag: false,
-          };
-        });
-      }, time * 1000);
-    }
-    return () => {
-      handler && clearInterval(handler);
-    };
-  }, [show, time, tickCount, tickLength, hover, isHover, active]);
-
-  useEffect(() => {
-    let animation;
-    const { currentIndex, flag } = status;
-    if (currentIndex !== null) {
-      const step = lengthWithoutPaddingOuter / tickCount;
-      if (flag) {
-        const _ticks = allTicks.slice(currentIndex, tickCount);
-        setState({
-          step,
-          ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([_start, _end]),
-        });
-      } else {
-        animation = animate({
-          from: 0,
-          to: -1,
-          duration: duration * 1000,
-          ease: linear,
-          onPlay: () => {
-            setState((axis) => {
-              const { ticks, scaler } = axis;
-              const [tick] = ticks;
-              const _ticks = [
-                tick,
-                ...getTicks(allTicks, currentIndex, tickCount),
-              ];
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler
-                  .copy()
-                  .range([_start, _end + step])
-                  .domain(_ticks),
-              };
-            });
-          },
-          onUpdate: (v) => {
-            setState((axis) => {
-              const { scaler, step } = axis;
-              return {
-                ...axis,
-                scaler: scaler
-                  .copy()
-                  .range([_start + step * v, _end + step + step * v]),
-              };
-            });
-          },
-          onComplete: () => {
-            setState((axis) => {
-              const { scaler, ticks } = axis;
-              const _ticks = ticks.slice(1, ticks.length);
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler.copy().range([_start, _end]).domain(_ticks),
-              };
-            });
-          },
-        });
-      }
-    } else {
-      const _ticks = scaler.type == "linear" ? scaler.domain() : allTicks;
-      setState({
-        step,
-        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
-        ticks,
-      });
-    }
-    return () => {
-      animation && animation.stop();
-    };
-  }, [
-    tickCount,
-    allTicks,
-    scaler,
-    _start,
-    _end,
-    step,
-    ticks,
-    lengthWithoutPaddingOuter,
-    status,
-    duration,
-  ]);
-
-  return {
-    ...axis,
-    ...state,
-    controlEnd: _end,
-  };
-};
-
-const getTicks = (ticks, currentIndex, length) => {
-  const _currentIndex = +currentIndex;
-  const ticksLength = ticks.length;
-  if (ticksLength <= length) return ticks;
-  const _end = _currentIndex + length;
-  if (ticksLength < _end) {
-    const prev = ticks.slice(_currentIndex, ticksLength);
-    const next = ticks.slice(0, _end - ticksLength);
-    return [...prev, ...next];
-  }
-  return ticks.slice(_currentIndex, _end);
-};
+import { useEffect, useMemo, useRef, useState } from "react";
+import { animate, linear } from "popmotion";
+
+const initialState = {
+  currentIndex: null,
+  flag: false, // 首次加载标识：true-首次加载不执行动画，false-可执行轮播
+};
+
+/**
+ * x轴滚动逻辑
+ * @param {Object} axis x轴配置项
+ * @param {Object} config x轴轮播动画的配置项
+ * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
+ */
+export default (axis, config, isHover, controlInfo, active) => {
+  const { show, interval, duration, hover } = config;
+  const { isC, cPercent } = controlInfo;
+
+  const {
+    tickCount: count,
+    allTicks,
+    scaler,
+    start,
+    end,
+    step,
+    ticks,
+    lengthWithoutPaddingOuter,
+  } = axis;
+  const tickLength = ticks.length;
+  const tickCount = isC ? allTicks.length : count;
+
+  const scale = isC ? cPercent : 1;
+  const _start = start / scale;
+  const _end = end / scale;
+  const canCarousel = useMemo(
+    () => show && active && tickLength > tickCount,
+    [show, active, tickLength, tickCount]
+  );
+
+  const [state, setState] = useState({
+    scaler,
+    step,
+    ticks,
+  });
+  const [status, setStatus] = useState(initialState);
+  const [ready, setReady] = useState(true); // true 才允许开启下一轮动画（用于 interval 等待）
+  const [wakeToken, setWakeToken] = useState(0);
+  const hoverRef = useRef(isHover);
+  const prevHoverRef = useRef(isHover);
+  const intervalTimerRef = useRef(null);
+  const isAnimatingRef = useRef(false);
+  const latestRef = useRef({
+    allTicks,
+    scaler,
+    tickCount,
+    tickLength,
+    lengthWithoutPaddingOuter,
+    _start,
+    _end,
+    interval,
+    duration,
+    hover,
+  });
+
+  // 避免 hover 触发 render 时 effect 误重启动画：用 ref 持有最新输入
+  useEffect(() => {
+    latestRef.current = {
+      allTicks,
+      scaler,
+      tickCount,
+      tickLength,
+      lengthWithoutPaddingOuter,
+      _start,
+      _end,
+      interval,
+      duration,
+      hover,
+    };
+  }, [
+    allTicks,
+    scaler,
+    tickCount,
+    tickLength,
+    lengthWithoutPaddingOuter,
+    _start,
+    _end,
+    interval,
+    duration,
+    hover,
+  ]);
+
+  // hover 变化不打断正在进行的动画：只更新引用、并在需要时取消「下一轮」定时器
+  useEffect(() => {
+    const prev = prevHoverRef.current;
+    prevHoverRef.current = isHover;
+    hoverRef.current = isHover;
+    if (latestRef.current.hover && isHover && intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 仅在 hover 从 true -> false 时唤醒轮播（避免在非 hover 状态下反复唤醒导致 interval 失效）
+    if (
+      latestRef.current.hover &&
+      prev === true &&
+      isHover === false &&
+      canCarousel &&
+      status.currentIndex !== null &&
+      !isAnimatingRef.current
+    ) {
+      setReady(true);
+      setWakeToken((v) => v + 1);
+    }
+  }, [isHover, canCarousel, status.currentIndex]);
+
+  // 初始化：仅在基础条件变化时设置初始索引
+  useEffect(() => {
+    if (show && tickLength > tickCount) {
+      setStatus({
+        currentIndex: 0,
+        flag: true,
+      });
+    } else {
+      setStatus(initialState);
+    }
+  }, [show, tickCount, tickLength]);
+  useEffect(() => {
+    let animation;
+    const { currentIndex, flag } = status;
+    const latest = latestRef.current;
+
+    // 执行条件：显示、非hover暂停、激活、有足够的轮播项
+    const canRun = canCarousel && !(latest.hover && hoverRef.current);
+
+    if (currentIndex !== null && canRun) {
+      if (flag) {
+        // 首次加载：仅初始化视图，不执行动画
+        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        const _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
+        setState({
+          step,
+          ticks: _ticks,
+          scaler: latest.scaler
+            .copy()
+            .domain(_ticks)
+            .range([latest._start, latest._end]),
+        });
+
+        // 首次加载完成后，启动第一轮动画（等待interval后执行）
+        if (latest.interval >= 0) {
+          intervalTimerRef.current = setTimeout(() => {
+            setStatus((prev) => ({ ...prev, flag: false }));
+          }, latest.interval * 1000);
+        } else {
+          setStatus((prev) => ({ ...prev, flag: false }));
+        }
+      } else {
+        // 非首次加载：执行动画 + 后续逻辑
+        if (!ready) return;
+        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+
+        animation = animate({
+          from: 0,
+          to: -1,
+          duration: latest.duration * 1000,
+          ease: linear,
+          onPlay: () => {
+            isAnimatingRef.current = true;
+            // 动画开始：更新ticks和scaler初始范围
+            // 这里需要保证动画是「当前项滚出，下一项滚入」
+            // 因此后续窗口从 currentIndex + 1 开始，避免首项重复导致视觉上「从第一项滚到第一项」的闪烁
+            setState((axis) => {
+              const { ticks, scaler } = axis;
+              const [tick] = ticks;
+              const _ticks = [
+                tick,
+                ...getTicks(
+                  latest.allTicks,
+                  currentIndex + 1,
+                  latest.tickCount
+                ),
+              ];
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler
+                  .copy()
+                  .range([latest._start, latest._end + step])
+                  .domain(_ticks),
+              };
+            });
+          },
+          onUpdate: (v) => {
+            // 动画过程：实时更新scaler范围（实现滚动效果）
+            setState((axis) => {
+              const { scaler, step } = axis;
+              return {
+                ...axis,
+                scaler: scaler
+                  .copy()
+                  .range([
+                    latest._start + step * v,
+                    latest._end + step + step * v,
+                  ]),
+              };
+            });
+          },
+          onComplete: () => {
+            isAnimatingRef.current = false;
+            // 本轮结束后进入等待态，避免立即开启下一轮（保证 interval 生效）
+            setReady(false);
+            // 动画完成：重置ticks和scaler
+            setState((axis) => {
+              const { scaler, ticks } = axis;
+              const _ticks = ticks.slice(1, ticks.length);
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler
+                  .copy()
+                  .range([latest._start, latest._end])
+                  .domain(_ticks),
+              };
+            });
+
+            const nextIndex = (currentIndex + 1) % latest.tickLength;
+
+            // 无论是否 hover，都先把 currentIndex 同步到下一屏起点
+            // 否则在 interval 暂停期触发 hover/离开，会用旧索引重启，视觉上“回滚一格”
+            setStatus((prev) => ({ ...prev, currentIndex: nextIndex }));
+
+            // hover 触发时：让当前动画跑完后暂停（不再排下一轮）
+            if (latest.hover && hoverRef.current) return;
+
+            // 非hover：动画完成后，等待interval时长，再触发下一轮动画
+            intervalTimerRef.current = setTimeout(() => {
+              setReady(true);
+              setWakeToken((v) => v + 1);
+            }, latest.interval * 1000);
+          },
+        });
+      }
+    }
+
+    // 清理副作用：停止动画、清除定时器
+    return () => {
+      if (animation) {
+        animation.stop();
+        isAnimatingRef.current = false;
+      }
+      if (intervalTimerRef.current) {
+        clearTimeout(intervalTimerRef.current);
+        intervalTimerRef.current = null;
+      }
+    };
+  }, [canCarousel, status.currentIndex, status.flag, wakeToken, ready]);
+
+  // 重置逻辑：当无有效索引时恢复初始状态
+  useEffect(() => {
+    if (status.currentIndex === null) {
+      const _ticks = scaler.type === "linear" ? scaler.domain() : allTicks;
+      setState({
+        step,
+        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
+        ticks,
+      });
+    }
+  }, [status.currentIndex, scaler, _start, _end, step, ticks, allTicks]);
+
+  // 当 x 轴可见项数量（count）发生变化时，安全地重置轮播节奏
+  useEffect(() => {
+    // 清掉当前的 interval 计时器，避免用旧配置继续排队
+    if (intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 重置动画节奏，让配置变更后「立即」按最新的 tickCount/tickLength 重新初始化
+    // 不能简单 setStatus(initialState)，否则会覆盖上方的初始化 effect（先开轮播再改数量时会被清成 null，导致展示全部且不轮播）
+    isAnimatingRef.current = false;
+    setReady(true);
+    setStatus(() => {
+      // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
+      if (show && active && tickLength > tickCount) {
+        return { currentIndex: 0, flag: true };
+      }
+      return initialState;
+    });
+    setWakeToken((v) => v + 1);
+  }, [count, show, active, tickLength, tickCount]);
+
+  return {
+    ...axis,
+    ...state,
+    controlEnd: _end,
+  };
+};
+
+/**
+ * 获取指定索引范围的ticks（支持循环）
+ * @param {Array} ticks 所有ticks
+ * @param {number} currentIndex 当前起始索引
+ * @param {number} length 需要的长度
+ * @returns {Array} 目标ticks数组
+ */
+const getTicks = (ticks, currentIndex, length) => {
+  const _currentIndex = +currentIndex;
+  const ticksLength = ticks.length;
+  if (ticksLength <= length) return ticks;
+
+  const _end = _currentIndex + length;
+  if (ticksLength < _end) {
+    const prev = ticks.slice(_currentIndex, ticksLength);
+    const next = ticks.slice(0, _end - ticksLength);
+    return [...prev, ...next];
+  }
+  return ticks.slice(_currentIndex, _end);
+};