@easyv/charts 1.10.8 → 1.10.9

package/lib/components/CartesianChart.js

@@ -261,15 +261,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, [tickName, JSON.stringify(originData)]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
   var isVertical = axisX.direction === "vertical";
-  var indicatorWidth = indicator.width * (control ? axisX.controlStep : axisX.step) / 100;
-  var position = axisX.scaler(tickName) - indicatorWidth / 2;
+  var axisStep = control ? axisX.controlStep : axisX.step;
+  var safeAxisStep = Number.isFinite(axisStep) ? axisStep : 0;
+  var indicatorWidth = indicator.width * safeAxisStep / 100;
+  var safeIndicatorWidth = Number.isFinite(indicatorWidth) ? indicatorWidth : 0;
+  var tickPos = axisX.scaler(tickName);
+  var safeTickPos = Number.isFinite(tickPos) ? tickPos : 0;
+  var position = safeTickPos - safeIndicatorWidth / 2;
   var indicatorAttr = isVertical ? {
     width: chartWidth,
-    height: indicatorWidth,
+    height: safeIndicatorWidth,
     y: position
   } : {
     height: yLineRange,
-    width: indicatorWidth,
+    width: safeIndicatorWidth,
     x: position
   };
   var onInteraction = (0, _react.useCallback)(function (e, type) {
@@ -353,15 +358,18 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     if (controlEl.current) {
       controlEl.current.style.transform = "translate(".concat(cBarX, "px,0)");
       //计算出当前位移的百分比
-      var percent = cBarX / (cWidth - cBarWidth);
-      percent = isNaN(percent) ? 1 : percent;
-      var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
+      var slideRange = cWidth - cBarWidth;
+      var percent = slideRange > 0 ? cBarX / slideRange : 0;
+      if (!Number.isFinite(percent)) percent = 0;
+      var safeCPercent = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+      var span = controlEnd + start / safeCPercent - chartWidth;
+      var translateX = Number.isFinite(span) ? -span * percent : 0;
       curControlPercent.current = percent;
-      setClipX(-translateX);
+      setClipX(Number.isFinite(-translateX) ? -translateX : 0);
       var _isVertical = axisX.direction === "vertical";
       var coreOffset = _isVertical ? marginRight : isIOS ? marginLeft : 0;
       seriesEl.current.style.transform = "translate(".concat(translateX + coreOffset, "px,").concat(marginTop, "px)");
-      axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
+      axisElList.current[2] && (axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)"));
     }
   }, [controlInfo]);
   //控制条轮播动画
@@ -457,6 +465,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   });
   var bodyWidth = isVertical ? xLineRange + 100 + marginRight + marginLeft : xLineRange,
     bodyHeight = isVertical ? yLineRange : yLineRange + marginTop + marginBottom;
+  var controlTooltipSpan = function () {
+    var p = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+    var s = axisX.controlEnd + axisX.start / p - chartWidth;
+    return Number.isFinite(s) ? s : 0;
+  }();
   var hasDuplicateX = function hasDuplicateX(data) {
     var xValues = new Set();
     var _iterator = _createForOfIteratorHelper(data),
@@ -613,13 +626,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }))), /*#__PURE__*/_react["default"].createElement("g", {
     clipPath: "url(#chart-clip-".concat(id, ")")
   }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
-    var x = axisX.scaler(item.tick);
+    var xRaw = axisX.scaler(item.tick);
+    var x = Number.isFinite(xRaw) ? xRaw : 0;
+    var iw = safeIndicatorWidth;
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
     }, indicator, {
       height: yLineRange,
-      width: indicatorWidth,
-      x: x - indicatorWidth / 2,
+      width: iw,
+      x: x - iw / 2,
       isControlChart: !!control,
       xName: item.tick,
       setCtlTip: setCtlTip,
@@ -669,13 +684,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       isControlChart: !!control
     }));
   }), /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex != "bottom" && ctlIndicatorList.map(function (item, index) {
-    var x = axisX.scaler(item.tick);
+    var xRaw = axisX.scaler(item.tick);
+    var x = Number.isFinite(xRaw) ? xRaw : 0;
+    var iw = safeIndicatorWidth;
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
     }, indicator, {
       height: yLineRange,
-      width: indicatorWidth,
-      x: x - indicatorWidth / 2,
+      width: iw,
+      x: x - iw / 2,
       isControlChart: !!control,
       xName: item.tick,
       setCtlTip: setCtlTip,
@@ -686,7 +703,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     isVertical: isVertical
   }, tooltip, {
     data: controlChartTooltipData,
-    x: ctlX - marginLeft - (axisX.controlEnd + axisX.start / cPercent - chartWidth) * curControlPercent.current,
+    x: (Number.isFinite(ctlX) ? ctlX : 0) - marginLeft - controlTooltipSpan * curControlPercent.current,
     marginLeft: marginLeft,
     marginTop: marginTop,
     tickName: ctlXName,

package/lib/components/Line.js

@@ -77,8 +77,8 @@ var Area = function Area(_ref) {
       opacity: Areaopacity
     },
     stroke: "none",
-    fill: 'url(#' + id + ')'
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == 'pattern' ? /*#__PURE__*/_react["default"].createElement("pattern", {
+    fill: "url(#" + id + ")"
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == "pattern" ? /*#__PURE__*/_react["default"].createElement("pattern", {
     id: id,
     patternUnits: "userSpaceOnUse",
     width: patternW,
@@ -132,7 +132,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return getLineData(sortData, connectNulls);
   }, [sortData, connectNulls]);
   var lineGen = (0, _react.useMemo)(function () {
-    var isVertical = direction === 'vertical';
+    var isVertical = direction === "vertical";
     var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref9) {
       var x = _ref9.data.x;
       return xScaler(x);
@@ -164,9 +164,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       pointerEvents: "none"
     },
     fill: "none",
-    strokeDasharray: lineType === 'dash' ? '3 3' : null,
+    strokeDasharray: lineType === "dash" ? "3 3" : null,
     strokeWidth: lineWidth
-  }), type == 'area' && /*#__PURE__*/_react["default"].createElement(Area, {
+  }), type == "area" && /*#__PURE__*/_react["default"].createElement(Area, {
     data: _data,
     config: _objectSpread(_objectSpread({}, area), {}, {
       curve: curve,

package/lib/hooks/useAxes.js

@@ -310,7 +310,7 @@ var _default = exports["default"] = function _default(_ref) {
           end: end,
           clipAxisRange: clipAxisRange,
           lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
-          step: [lengthWithoutPaddingOuter / clipAxisAllTicks[0].length, lengthWithoutPaddingOuter / clipAxisAllTicks[1].length],
+          step: [clipAxisAllTicks[0].length > 0 ? lengthWithoutPaddingOuter / clipAxisAllTicks[0].length : 0, clipAxisAllTicks[1].length > 0 ? lengthWithoutPaddingOuter / clipAxisAllTicks[1].length : 0],
           allTicks: clipAxisAllTicks,
           ticks: clipAxisTicks,
           clipValue: clipValue
@@ -372,14 +372,19 @@ var _default = exports["default"] = function _default(_ref) {
         //     }
         //   }
         // }
-        var _step2 = _lengthWithoutPaddingOuter / allTicks.length;
+        var tickLen = allTicks.length;
+        var _step2 = tickLen > 0 ? _lengthWithoutPaddingOuter / tickLen : 0;
         var controlCfg = {
           controlStep: 0,
           controlDragScaler: null
         };
         if (isC) {
-          controlCfg.controlStep = _step2 / cPercent;
-          controlCfg.controlDragScaler = scaler.copy().range([_start / cPercent, _end / cPercent]);
+          if (tickLen > 0 && cPercent > 0) {
+            controlCfg.controlStep = _step2 / cPercent;
+            controlCfg.controlDragScaler = scaler.copy().range([_start / cPercent, _end / cPercent]);
+          } else {
+            controlCfg.controlDragScaler = scaler.copy();
+          }
           var _getChartsConfig3 = getChartsConfig(orientation, cWidth, height, paddingOuter),
             start_ = _getChartsConfig3.start,
             end_ = _getChartsConfig3.end,
@@ -390,7 +395,7 @@ var _default = exports["default"] = function _default(_ref) {
           scaler = scales[type]().domain(newDomain).range(_range);
           scaler.type = type;
           var controlOuter = len - outer;
-          _step2 = controlOuter / allTicks.length;
+          _step2 = tickLen > 0 ? controlOuter / tickLen : 0;
         }
         tmp.set(axisType, _objectSpread(_objectSpread(_objectSpread({}, item), {}, {
           count: _count,

package/lib/hooks/useCarouselAxisX.js

@@ -17,11 +17,11 @@ var initialState = {
   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,
@@ -40,11 +40,11 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
   var tickLength = ticks.length;
   var tickCount = isC ? allTicks.length : count;
-  var scale = isC ? cPercent : 1;
+  var scale = isC && cPercent > 0 ? cPercent : 1;
   var _start = start / scale;
   var _end = end / scale;
   var canCarousel = (0, _react.useMemo)(function () {
-    return show && active && tickLength > tickCount;
+    return show && active && tickCount > 0 && tickLength > tickCount;
   }, [show, active, tickLength, tickCount]);
   var _useState = (0, _react.useState)({
       scaler: scaler,
@@ -120,7 +120,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
 
   // 初始化：仅在基础条件变化时设置初始索引
   (0, _react.useEffect)(function () {
-    if (show && tickLength > tickCount) {
+    if (show && tickCount > 0 && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true
@@ -137,10 +137,11 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
 
     // 执行条件：显示、非hover暂停、激活、有足够的轮播项
     var canRun = canCarousel && !(latest.hover && hoverRef.current);
-    if (currentIndex !== null && canRun) {
+    if (currentIndex !== null && canRun && latest.tickCount > 0) {
       if (flag) {
         // 首次加载：仅初始化视图，不执行动画
         var _step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(_step)) return;
         var _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
         setState({
           step: _step,
@@ -168,6 +169,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
         // 非首次加载：执行动画 + 后续逻辑
         if (!ready) return;
         var _step2 = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(_step2)) return;
         animation = (0, _popmotion.animate)({
           from: 0,
           to: -1,
@@ -278,7 +280,7 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     setReady(true);
     setStatus(function () {
       // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
-      if (show && active && tickLength > tickCount) {
+      if (show && active && tickCount > 0 && tickLength > tickCount) {
         return {
           currentIndex: 0,
           flag: true
@@ -294,12 +296,12 @@ var _default = exports["default"] = function _default(axis, config, isHover, con
     controlEnd: _end
   });
 };
-/**
- * 获取指定索引范围的ticks（支持循环）
- * @param {Array} ticks 所有ticks
- * @param {number} currentIndex 当前起始索引
- * @param {number} length 需要的长度
- * @returns {Array} 目标ticks数组
+/**
+ * 获取指定索引范围的ticks（支持循环）
+ * @param {Array} ticks 所有ticks
+ * @param {number} currentIndex 当前起始索引
+ * @param {number} length 需要的长度
+ * @returns {Array} 目标ticks数组
  */
 var getTicks = function getTicks(ticks, currentIndex, length) {
   var _currentIndex = +currentIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.8",
+  "version": "1.10.9",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/CartesianChart.js

@@ -252,14 +252,20 @@ const Chart = memo(
 
     const isVertical = axisX.direction === "vertical";
 
-    const indicatorWidth =
-      (indicator.width * (control ? axisX.controlStep : axisX.step)) / 100;
-    const position = axisX.scaler(tickName) - indicatorWidth / 2;
+    const axisStep = control ? axisX.controlStep : axisX.step;
+    const safeAxisStep = Number.isFinite(axisStep) ? axisStep : 0;
+    const indicatorWidth = (indicator.width * safeAxisStep) / 100;
+    const safeIndicatorWidth = Number.isFinite(indicatorWidth)
+      ? indicatorWidth
+      : 0;
+    const tickPos = axisX.scaler(tickName);
+    const safeTickPos = Number.isFinite(tickPos) ? tickPos : 0;
+    const position = safeTickPos - safeIndicatorWidth / 2;
     const indicatorAttr = isVertical
-      ? { width: chartWidth, height: indicatorWidth, y: position }
+      ? { width: chartWidth, height: safeIndicatorWidth, y: position }
       : {
           height: yLineRange,
-          width: indicatorWidth,
+          width: safeIndicatorWidth,
           x: position,
         };
 
@@ -341,18 +347,22 @@ const Chart = memo(
       if (controlEl.current) {
         controlEl.current.style.transform = `translate(${cBarX}px,0)`;
         //计算出当前位移的百分比
-        let percent = cBarX / (cWidth - cBarWidth);
-        percent = isNaN(percent) ? 1 : percent;
-        const translateX =
-          -(controlEnd + start / cPercent - chartWidth) * percent;
+        const slideRange = cWidth - cBarWidth;
+        let percent = slideRange > 0 ? cBarX / slideRange : 0;
+        if (!Number.isFinite(percent)) percent = 0;
+        const safeCPercent =
+          cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+        const span = controlEnd + start / safeCPercent - chartWidth;
+        const translateX = Number.isFinite(span) ? -span * percent : 0;
         curControlPercent.current = percent;
-        setClipX(-translateX);
+        setClipX(Number.isFinite(-translateX) ? -translateX : 0);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
         seriesEl.current.style.transform = `translate(${
           translateX + coreOffset
         }px,${marginTop}px)`;
-        axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
+        axisElList.current[2] &&
+          (axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`);
       }
     }, [controlInfo]);
     //控制条轮播动画
@@ -465,6 +475,11 @@ const Chart = memo(
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
+    const controlTooltipSpan = (() => {
+      const p = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+      const s = axisX.controlEnd + axisX.start / p - chartWidth;
+      return Number.isFinite(s) ? s : 0;
+    })();
     const hasDuplicateX = (data) => {
       const xValues = new Set();
       for (const item of data) {
@@ -624,15 +639,17 @@ const Chart = memo(
                   {control &&
                     zIndex == "bottom" &&
                     ctlIndicatorList.map((item, index) => {
-                      const x = axisX.scaler(item.tick);
+                      const xRaw = axisX.scaler(item.tick);
+                      const x = Number.isFinite(xRaw) ? xRaw : 0;
+                      const iw = safeIndicatorWidth;
                       return (
                         <Indicator
                           key={index}
                           {...indicator}
                           {...{
                             height: yLineRange,
-                            width: indicatorWidth,
-                            x: x - indicatorWidth / 2,
+                            width: iw,
+                            x: x - iw / 2,
                           }}
                           isControlChart={!!control}
                           xName={item.tick}
@@ -695,15 +712,17 @@ const Chart = memo(
                   {control &&
                     zIndex != "bottom" &&
                     ctlIndicatorList.map((item, index) => {
-                      const x = axisX.scaler(item.tick);
+                      const xRaw = axisX.scaler(item.tick);
+                      const x = Number.isFinite(xRaw) ? xRaw : 0;
+                      const iw = safeIndicatorWidth;
                       return (
                         <Indicator
                           key={index}
                           {...indicator}
                           {...{
                             height: yLineRange,
-                            width: indicatorWidth,
-                            x: x - indicatorWidth / 2,
+                            width: iw,
+                            x: x - iw / 2,
                           }}
                           isControlChart={!!control}
                           xName={item.tick}
@@ -723,10 +742,9 @@ const Chart = memo(
                 {...tooltip}
                 data={controlChartTooltipData}
                 x={
-                  ctlX -
+                  (Number.isFinite(ctlX) ? ctlX : 0) -
                   marginLeft -
-                  (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                    curControlPercent.current
+                  controlTooltipSpan * curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/Line.js

@@ -1,23 +1,27 @@
 /**
  * 折线图
  */
-import React, { memo, useMemo } from 'react';
-import { line as d3Line, area as d3Area, curveCatmullRom, curveMonotoneX } from 'd3v7';
-import { getColorList } from '../utils';
-import { Lighter, LinearGradient } from '.';
+import React, { memo, useMemo } from "react";
+import {
+  line as d3Line,
+  area as d3Area,
+  curveCatmullRom,
+  curveMonotoneX,
+} from "d3v7";
+import { getColorList } from "../utils";
+import { Lighter, LinearGradient } from ".";
 
 const defined = (d) => d.data.y != null;
-const getLineData = (data, connectNulls) =>{
-  return data.flatMap(d=>{
+const getLineData = (data, connectNulls) => {
+  return data.flatMap((d) => {
     const y = d.data.y;
-    return isNaN(y)?
-      connectNulls?
-        []:
-        {...d,data:{...d.data,y:null}}:
-      d
+    return isNaN(y)
+      ? connectNulls
+        ? []
+        : { ...d, data: { ...d.data, y: null } }
+      : d;
   });
-}
-  
+};
 
 const Area = ({
   data,
@@ -30,11 +34,11 @@ const Area = ({
     opacity,
     size: { width: patternW, height: patternH },
     curve,
-    tension
+    tension,
   },
   xScaler,
   yScaler,
-  opacity:Areaopacity
+  opacity: Areaopacity,
 }) => {
   const [height] = yScaler.range();
   const area = useMemo(() => getColorList(fill), [fill]);
@@ -43,7 +47,7 @@ const Area = ({
     const areaGen = d3Area()
       .x(({ data: { x } }) => xScaler(x))
       .y1(({ data: { y } }) => yScaler(y))
-      .y0(({})=>yScaler(0))
+      .y0(({}) => yScaler(0))
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
     curve && areaGen.curve(curveMonotoneX);
@@ -52,11 +56,28 @@ const Area = ({
 
   return (
     <>
-      <path d={areaGen(data)} style={{pointerEvents:"none",opacity:Areaopacity}} stroke='none' fill={'url(#' + id + ')'} />
+      <path
+        d={areaGen(data)}
+        style={{ pointerEvents: "none", opacity: Areaopacity }}
+        stroke="none"
+        fill={"url(#" + id + ")"}
+      />
       <defs>
-        {type && type == 'pattern' ? (
-          <pattern id={id} patternUnits="userSpaceOnUse" width={patternW} height={patternH}>
-            {url && <image opacity={opacity} width={patternW} height={patternH} xlinkHref={window.appConfig.ASSETS_URL + url} />}
+        {type && type == "pattern" ? (
+          <pattern
+            id={id}
+            patternUnits="userSpaceOnUse"
+            width={patternW}
+            height={patternH}
+          >
+            {url && (
+              <image
+                opacity={opacity}
+                width={patternW}
+                height={patternH}
+                xlinkHref={window.appConfig.ASSETS_URL + url}
+              />
+            )}
           </pattern>
         ) : (
           <LinearGradient id={id} colors={area} rotate={0} />
@@ -91,32 +112,32 @@ export default memo(
   }) => {
     if (!data.length) return null;
     const ticks = xScaler.domain();
-    
+
     const sortData = useMemo(() => {
       const usefulData = data.filter(
-        ({ data: { x } }) => ticks.indexOf(x) > -1
+        ({ data: { x } }) => ticks.indexOf(x) > -1,
       );
       return usefulData.sort(
         ({ data: { x: a } }, { data: { x: b } }) =>
-          ticks.indexOf(a) - ticks.indexOf(b)
+          ticks.indexOf(a) - ticks.indexOf(b),
       );
     }, [data, ticks]);
-    
+
     const _data = useMemo(
       () => getLineData(sortData, connectNulls),
-      [sortData, connectNulls]
+      [sortData, connectNulls],
     );
     const lineGen = useMemo(() => {
-      const isVertical = direction === 'vertical';
+      const isVertical = direction === "vertical";
 
       let lineGen = (
         isVertical
           ? d3Line()
-            .y(({ data: { x } }) => xScaler(x))
-            .x(({ data: { y } }) => yScaler(y))
+              .y(({ data: { x } }) => xScaler(x))
+              .x(({ data: { y } }) => yScaler(y))
           : d3Line()
-            .x(({ data: { x } }) => xScaler(x))
-            .y(({ data: { y } }) => yScaler(y))
+              .x(({ data: { x } }) => xScaler(x))
+              .y(({ data: { y } }) => yScaler(y))
       ).defined(defined);
       curve && lineGen.curve(curveCatmullRom.alpha(tension));
       curve && lineGen.curve(curveMonotoneX);
@@ -128,29 +149,31 @@ export default memo(
     const show = lineShadow && lineShadow.show;
     const shadow = lineShadow && lineShadow.shadow;
     return (
-      <g className='__easyv-line'>
+      <g className="__easyv-line">
         <path
           d={path}
           stroke={stroke}
           style={{
-            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none",
-            pointerEvents:"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}
+          fill="none"
+          strokeDasharray={lineType === "dash" ? "3 3" : null}
           strokeWidth={lineWidth}
         />
-        {type == 'area' && (
+        {type == "area" && (
           <Area
             data={_data}
             config={{ ...area, curve, tension }}
             xScaler={xScaler}
             yScaler={yScaler}
-            opacity={areaColor?areaColor.linear.opacity:1}
+            opacity={areaColor ? areaColor.linear.opacity : 1}
           />
         )}
         {showLighter && <Lighter path={path} config={lighter} />}
       </g>
     );
-  }
+  },
 );

package/src/hooks/useAxes.js

@@ -372,8 +372,12 @@ export default ({
           clipAxisRange,
           lengthWithoutPaddingOuter,
           step: [
-            lengthWithoutPaddingOuter / clipAxisAllTicks[0].length,
-            lengthWithoutPaddingOuter / clipAxisAllTicks[1].length,
+            clipAxisAllTicks[0].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[0].length
+              : 0,
+            clipAxisAllTicks[1].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[1].length
+              : 0,
           ],
           allTicks: clipAxisAllTicks,
           ticks: clipAxisTicks,
@@ -454,16 +458,22 @@ export default ({
         //     }
         //   }
         // }
-        let step = lengthWithoutPaddingOuter / allTicks.length;
+        const tickLen = allTicks.length;
+        let step =
+          tickLen > 0 ? lengthWithoutPaddingOuter / tickLen : 0;
         const controlCfg = {
           controlStep: 0,
           controlDragScaler: null,
         };
         if (isC) {
-          controlCfg.controlStep = step / cPercent;
-          controlCfg.controlDragScaler = scaler
-            .copy()
-            .range([start / cPercent, end / cPercent]);
+          if (tickLen > 0 && cPercent > 0) {
+            controlCfg.controlStep = step / cPercent;
+            controlCfg.controlDragScaler = scaler
+              .copy()
+              .range([start / cPercent, end / cPercent]);
+          } else {
+            controlCfg.controlDragScaler = scaler.copy();
+          }
           const {
             start: start_,
             end: end_,
@@ -480,7 +490,7 @@ export default ({
           scaler = scales[type]().domain(newDomain).range(range);
           scaler.type = type;
           const controlOuter = len - outer;
-          step = controlOuter / allTicks.length;
+          step = tickLen > 0 ? controlOuter / tickLen : 0;
         }
         tmp.set(axisType, {
           ...item,

package/src/hooks/useCarouselAxisX.js

@@ -1,318 +1,320 @@
-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);
-};
+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 > 0 ? cPercent : 1;
+  const _start = start / scale;
+  const _end = end / scale;
+  const canCarousel = useMemo(
+    () => show && active && tickCount > 0 && 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 && tickCount > 0 && 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 && latest.tickCount > 0) {
+      if (flag) {
+        // 首次加载：仅初始化视图，不执行动画
+        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(step)) return;
+        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;
+        if (!Number.isFinite(step)) return;
+
+        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 && tickCount > 0 && 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);
+};