@easyv/charts 1.10.8 → 1.10.10

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/Legend.js

@@ -29,7 +29,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var _config$value, _config$percent, _config$value2, _config$value3, _config$name;
   var series = _ref.series,
     height = _ref.height,
+    data = _ref.data,
     config = _ref.config,
+    columnsSeries = _ref.columnsSeries,
     _ref$config = _ref.config,
     show = _ref$config.show,
     _ref$config$order = _ref$config.order,
@@ -110,7 +112,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       behavior: "smooth"
     });
   };
-  var _series = (0, _utils.sortPie)(series, order);
+  var _series = (0, _utils.sortPie)(series, order, columnsSeries);
   var _alignment$split = alignment.split(" "),
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
     _alignment = _alignment$split2[0],
@@ -152,6 +154,40 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || "Arial")));
   })));
   var nameMaxWidth = ((_config$name = config.name) === null || _config$name === void 0 ? void 0 : _config$name.maxWidth) || 80;
+  var fieldColumnKeys = [];
+  if (columnsSeries !== null && columnsSeries !== void 0 && columnsSeries.columns) {
+    Object.values(columnsSeries.columns).forEach(function (col) {
+      if (col.field && !fieldColumnKeys.includes(col.field)) {
+        fieldColumnKeys.push(col.field);
+      }
+    });
+  }
+  var fieldsColumnWidths = fieldColumnKeys.map(function (fieldName) {
+    var maxMeasured = 0;
+    var maxCfg = 0;
+    _series.forEach(function (s) {
+      var _s$fields, _s$data$fieldName, _cfg$translate, _suf$translate;
+      var cfg = (_s$fields = s.fields) === null || _s$fields === void 0 ? void 0 : _s$fields[fieldName];
+      if (!cfg || !s.data || !Object.prototype.hasOwnProperty.call(s.data, fieldName)) {
+        return;
+      }
+      var f = cfg.font || {};
+      var fontStack = "".concat(f.fontSize || 12, "px ").concat(f.fontFamily || "Arial");
+      var letter = f.letterSpacing || 0;
+      var w = parseFloat(getCanvasTextWidth(String((_s$data$fieldName = s.data[fieldName]) !== null && _s$data$fieldName !== void 0 ? _s$data$fieldName : ""), letter, fontStack));
+      var suf = cfg.suffix;
+      if (suf !== null && suf !== void 0 && suf.show && suf.text != null && String(suf.text) !== "") {
+        var sufFont = "".concat(suf.fontSize || f.fontSize || 12, "px ").concat(f.fontFamily || "Arial");
+        w += parseFloat(getCanvasTextWidth(String(suf.text), letter, sufFont));
+      }
+      var tx = Number((_cfg$translate = cfg.translate) === null || _cfg$translate === void 0 ? void 0 : _cfg$translate.x) || 0;
+      var stx = suf !== null && suf !== void 0 && suf.show && suf.text != null && String(suf.text) !== "" ? Number((_suf$translate = suf.translate) === null || _suf$translate === void 0 ? void 0 : _suf$translate.x) || 0 : 0;
+      w += Math.max(0, tx) + Math.max(0, stx);
+      maxMeasured = Math.max(maxMeasured, w);
+      maxCfg = Math.max(maxCfg, Number(cfg.maxWidth) || 0);
+    });
+    return Math.max(maxMeasured, maxCfg);
+  });
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
     display: "flex",
     alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
@@ -207,12 +243,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         opacity: selected === false ? opacity / 100 : 1,
         alignItems: "center",
         cursor: "pointer",
-        gap: _icon.gap
+        gap: _icon.gap,
+        overflow: formatter ? "visible" : undefined
       }
     }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
       valueMaxWidth: valueMaxWidth,
       percentMaxWidth: percentMaxWidth,
-      nameMaxWidth: nameMaxWidth
+      nameMaxWidth: nameMaxWidth,
+      otherData: data,
+      columnsSeries: columnsSeries,
+      fieldColumnKeys: fieldColumnKeys,
+      fieldsColumnWidths: fieldsColumnWidths
     })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
       style: _icon
     }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
@@ -260,12 +301,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
             opacity: selected === false ? opacity / 100 : 1,
             alignItems: "center",
             cursor: "pointer",
-            gap: _icon.gap
+            gap: _icon.gap,
+            overflow: formatter ? "visible" : undefined
           }
         }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
           valueMaxWidth: valueMaxWidth,
           percentMaxWidth: percentMaxWidth,
-          nameMaxWidth: nameMaxWidth
+          nameMaxWidth: nameMaxWidth,
+          otherData: data,
+          columnsSeries: columnsSeries,
+          fieldColumnKeys: fieldColumnKeys,
+          fieldsColumnWidths: fieldsColumnWidths
         })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
           style: _icon
         }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {

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/components/PieChart.js

@@ -271,6 +271,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     outerDecorate = _ref5$config$fan2.outerDecorate,
     current = _ref5$config$fan2.current,
     order = _ref5$config.order,
+    columnsSeries = _ref5$config.columnsSeries,
     series = _ref5$config.series,
     _ref5$config$animatio = _ref5$config.animation,
     on = _ref5$config$animatio.on,
@@ -622,6 +623,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     mousePos: mousePos
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
+    columnsSeries: columnsSeries,
+    data: data,
     series: _arcs.map(function (arc) {
       return _objectSpread(_objectSpread({}, arc), {}, {
         percent: arc.percent.toFixed(legendPrecision)
@@ -791,6 +794,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     mousePos: mousePos
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
+    data: data,
+    columnsSeries: columnsSeries,
     series: _arcs.map(function (arc) {
       return _objectSpread(_objectSpread({}, arc), {}, {
         percent: arc.percent.toFixed(legendPrecision)

package/lib/formatter/legend.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pieLegendFormatter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
 var _utils = require("../utils");
@@ -12,6 +13,7 @@ var _components = require("../components");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatter(series, props) {
+  var _props$fieldColumnKey, _props$fieldsColumnWi, _series$fieldsData;
   var displayName = series.displayName,
     data = series.data,
     percent = series.percent,
@@ -54,6 +56,48 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     _props$percent$transl = _props$percent.translate,
     percentX = _props$percent$transl.x,
     percentY = _props$percent$transl.y;
+  var fieldColumnKeys = (_props$fieldColumnKey = props.fieldColumnKeys) !== null && _props$fieldColumnKey !== void 0 ? _props$fieldColumnKey : [];
+  var fieldsColumnWidths = (_props$fieldsColumnWi = props.fieldsColumnWidths) !== null && _props$fieldsColumnWi !== void 0 ? _props$fieldsColumnWi : [];
+  //获取文本所占宽度
+  function getStringWidth(text) {
+    var fontStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "14px sans-serif";
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.font = fontStyle;
+    return ctx.measureText(text).width;
+  }
+  var alignToJustify = function alignToJustify(align) {
+    return align == "left" ? "flex-start" : align == "right" ? "flex-end" : "center";
+  };
+  var alignToTextAlign = function alignToTextAlign(align) {
+    return align === "left" ? "left" : align === "right" ? "right" : "center";
+  };
+  if (fieldColumnKeys.length > 0) {
+    //处理除name、value、percent外的列
+    series.fieldsData = fieldColumnKeys.map(function (key, fieldsColumnIndex) {
+      var _series$fields, _series$data;
+      if (!((_series$fields = series.fields) !== null && _series$fields !== void 0 && _series$fields[key]) || !((_series$data = series.data) !== null && _series$data !== void 0 && _series$data.hasOwnProperty(key))) {
+        return null;
+      }
+      return _objectSpread(_objectSpread({}, series.fields[key]), {}, {
+        value: series.data[key],
+        fieldsColumnIndex: fieldsColumnIndex
+      });
+    }).filter(Boolean);
+  } else {
+    series.fieldsData = Object.entries(series.fields || {}).reduce(function (arr, _ref) {
+      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        config = _ref2[1];
+      if (series.data.hasOwnProperty(key)) {
+        arr.push(_objectSpread(_objectSpread({}, config), {}, {
+          value: series.data[key],
+          fieldsColumnIndex: arr.length
+        }));
+      }
+      return arr;
+    }, []);
+  }
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
@@ -65,6 +109,27 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
   if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
   if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
+  if (series.fieldsData.length > 0) {
+    //网格布局新增的各列宽度
+    series.fieldsData.forEach(function (item) {
+      var _item$fieldsColumnInd, _suf$fontSize, _item$font, _item$translate, _suf$translate;
+      var idx = (_item$fieldsColumnInd = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd !== void 0 ? _item$fieldsColumnInd : 0;
+      var measured = getStringWidth(item.value, "".concat(item.font.fontSize, "px ").concat(item.font.fontFamily));
+      var suf = item.suffix;
+      var suffixWidth = suf !== null && suf !== void 0 && suf.show && (suf === null || suf === void 0 ? void 0 : suf.text) != null && String(suf.text) !== "" ? getStringWidth(String(suf.text), "".concat((_suf$fontSize = suf.fontSize) !== null && _suf$fontSize !== void 0 ? _suf$fontSize : (_item$font = item.font) === null || _item$font === void 0 ? void 0 : _item$font.fontSize, "px ").concat(item.font.fontFamily)) : 0;
+      var tx = Math.max(0, Number((_item$translate = item.translate) === null || _item$translate === void 0 ? void 0 : _item$translate.x) || 0);
+      var stx = suf !== null && suf !== void 0 && suf.show && (suf === null || suf === void 0 ? void 0 : suf.text) != null && String(suf.text) !== "" ? Math.max(0, Number((_suf$translate = suf.translate) === null || _suf$translate === void 0 ? void 0 : _suf$translate.x) || 0) : 0;
+      var flowW = measured + suffixWidth + tx + stx;
+      var colW;
+      if (fieldsColumnWidths.length > idx && fieldsColumnWidths[idx] > 0) {
+        colW = Math.max(Number(fieldsColumnWidths[idx]) || 0, Number(item.maxWidth) || 0, flowW);
+      } else {
+        var fromConfig = Number(item.maxWidth) || 0;
+        colW = Math.max(flowW, fromConfig);
+      }
+      columns.push("".concat(colW, "px"));
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -74,7 +139,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
       width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
-      gridTemplateColumns: columns.join(" ")
+      gridTemplateColumns: columns.join(" "),
+      overflowX: "visible"
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -95,8 +161,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
       color: valueSameColor ? _color : valueFont.color,
       alignItems: "center",
-      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : "center",
-      textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center"
+      justifyContent: alignToJustify(valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
+      textAlign: alignToTextAlign(valueAlign)
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,
@@ -109,14 +175,53 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }
   }, text)), showPercent && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
+      display: "flex",
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
       color: percentSameColor ? _color : percentFont.color,
       alignItems: "center",
-      justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : "center",
-      textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center"
+      justifyContent: alignToJustify(percentAlign),
+      textAlign: alignToTextAlign(percentAlign)
     })
-  }, percent + "%")));
+  }, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index //渲染网格布局新增的各列
+  ) {
+    var _fieldColumnKeys, _item$fieldsColumnInd2, _item$align, _item$align2, _item$translate$x, _item$translate2, _item$translate$y, _item$translate3, _item$suffix, _item$suffix2, _item$suffix$translat, _item$suffix$translat2, _item$suffix$translat3, _item$suffix$translat4;
+    return /*#__PURE__*/React.createElement("span", {
+      key: (_fieldColumnKeys = fieldColumnKeys[(_item$fieldsColumnInd2 = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd2 !== void 0 ? _item$fieldsColumnInd2 : index]) !== null && _fieldColumnKeys !== void 0 ? _fieldColumnKeys : index,
+      style: _objectSpread(_objectSpread({
+        display: "flex",
+        boxSizing: "border-box",
+        width: "100%",
+        minWidth: 0,
+        alignItems: "center",
+        justifyContent: alignToJustify((_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
+        textAlign: alignToTextAlign((_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
+        overflow: "visible"
+      }, (0, _utils.getFontStyle)(item.font)), {}, {
+        color: item.sameColor ? _color : item.font.color
+      })
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        whiteSpace: "nowrap",
+        marginLeft: (_item$translate$x = (_item$translate2 = item.translate) === null || _item$translate2 === void 0 ? void 0 : _item$translate2.x) !== null && _item$translate$x !== void 0 ? _item$translate$x : 0,
+        marginTop: (_item$translate$y = (_item$translate3 = item.translate) === null || _item$translate3 === void 0 ? void 0 : _item$translate3.y) !== null && _item$translate$y !== void 0 ? _item$translate$y : 0
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: "nowrap"
+      }
+    }, item.value), ((_item$suffix = item.suffix) === null || _item$suffix === void 0 ? void 0 : _item$suffix.show) && ((_item$suffix2 = item.suffix) === null || _item$suffix2 === void 0 ? void 0 : _item$suffix2.text) != null && String(item.suffix.text) !== "" && /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: "nowrap",
+        fontSize: item.suffix.fontSize,
+        marginLeft: (_item$suffix$translat = (_item$suffix$translat2 = item.suffix.translate) === null || _item$suffix$translat2 === void 0 ? void 0 : _item$suffix$translat2.x) !== null && _item$suffix$translat !== void 0 ? _item$suffix$translat : 0,
+        marginTop: (_item$suffix$translat3 = (_item$suffix$translat4 = item.suffix.translate) === null || _item$suffix$translat4 === void 0 ? void 0 : _item$suffix$translat4.y) !== null && _item$suffix$translat3 !== void 0 ? _item$suffix$translat3 : 0
+      }
+    }, item.suffix.text)));
+  })));
 };

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;