@easyv/charts 1.10.33 → 1.10.35

package/package.json

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

package/src/components/Legend.js

@@ -29,6 +29,7 @@ export default memo(
       layout: {
         alignment = "right center",
         gridTemplateColumns,
+        layoutType,
         gridGap: { gridColumnGap, gridRowGap },
         translate: { x, y },
       },
@@ -247,6 +248,11 @@ export default memo(
     const isFixedWidth = isPieChart
       ? isPieFixedWidthGrid
       : LegendType == "FixedWidth";
+    const isAxisFixedWidth =
+      !isPieChart &&
+      (LegendType == "FixedWidth" ||
+        rootLayoutMode === "FixedWidth" ||
+        layoutType === "FixedWidth");
     const isSideLegend = isPieAdaptive && isSidePlacement;
     const isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
     const fullWidth = componentWidth ?? chartWidth ?? 0;
@@ -507,6 +513,79 @@ export default memo(
       );
     }
 
+    if (isAxisFixedWidth) {
+      const axisLegendTextWidth = normalizeCssSize(maxWidth);
+      const axisGridColumns = Math.min(
+        Math.max(1, Number(gridTemplateColumns) || 1),
+        length,
+      );
+      return (
+        <div
+          className="__easyv-legend-wrapper"
+          style={{
+            position: "absolute",
+            display: "flex",
+            ...getPosition(position, _alignment, x, y),
+            height: loopHeight,
+            overflowY: loop.show ? "scroll" : "auto",
+          }}
+          ref={ref_container}
+        >
+          <ul
+            style={{
+              display: "grid",
+              gridGap: gridRowGap + "px " + gridColumnGap + "px",
+              gridTemplateColumns: "repeat(" + axisGridColumns + ", 1fr)",
+            }}
+          >
+            {_series.map((series, i) => {
+              const {
+                type,
+                name,
+                displayName,
+                fieldName,
+                icon,
+                selected,
+                index,
+              } = series;
+              const _icon = getIcon(type, icon, series?.config?.line?.type);
+              return (
+                <li
+                  key={i}
+                  onClick={onClick(fieldName)}
+                  data-name={displayName || name}
+                  data-index={index}
+                  style={{
+                    display: "flex",
+                    opacity: selected === false ? opacity / 100 : 1,
+                    alignItems: "center",
+                    cursor: "pointer",
+                    gap: _icon.gap,
+                  }}
+                >
+                  <span style={{ ..._icon, flexShrink: 0 }} />
+                  <TextOverflow
+                    type={textOverflow}
+                    value={displayName || name}
+                    style={{
+                      ...font,
+                      width: axisLegendTextWidth,
+                      minWidth: axisLegendTextWidth,
+                      flexShrink: 0,
+                      boxSizing: "border-box",
+                      fontStyle: italic ? "italic" : "normal",
+                      fontWeight: bold ? "bold" : "normal",
+                    }}
+                    speed={speed}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+    }
+
     return isFixedWidth ? (
       <div
         className="__easyv-legend-wrapper"
@@ -723,6 +802,18 @@ export default memo(
   },
 );
 
+const normalizeCssSize = (value) => {
+  if (value == null || value === "") return value;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  const str = String(value).trim();
+  if (/^-?\d+(\.\d+)?$/.test(str)) {
+    return `${str}px`;
+  }
+  return str;
+};
+
 const getPosition = (position, alignment, x = 0, y = 0) => {
   switch (position) {
     case "top":

package/src/components/PieChart.js

@@ -172,6 +172,89 @@ const getCoord = (deg, radius) => {
   return [x, y];
 };
 
+const parseFontSize = (value, fallback = 12) => {
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+
+// 与 getFontStyle 一致：实际行盒高度取 lineHeight，否则用 fontSize
+const getFontLineHeight = (font) => {
+  const fontSize = parseFontSize(font?.fontSize);
+  const lineHeight = parseFontSize(font?.lineHeight, 0);
+  return Math.max(lineHeight, fontSize);
+};
+
+const getLabelRowHeight = ({
+  showName,
+  showValue,
+  showPercent,
+  nameFont,
+  valueFont,
+  percentFont,
+}) => {
+  const sizes = [];
+  if (showName) sizes.push(getFontLineHeight(nameFont));
+  if (showValue) sizes.push(getFontLineHeight(valueFont));
+  if (showPercent) sizes.push(getFontLineHeight(percentFont));
+  return sizes.length ? Math.max(...sizes) : 12;
+};
+
+// 上下布局：名称/数值/百分比纵向排列，高度 = 各可见行的行高之和
+const getLabelColumnHeight = ({
+  showName,
+  showValue,
+  showPercent,
+  nameFont,
+  valueFont,
+  percentFont,
+}) => {
+  let height = 0;
+  if (showName) height += getFontLineHeight(nameFont);
+  if (showValue) height += getFontLineHeight(valueFont);
+  if (showPercent) height += getFontLineHeight(percentFont);
+  return height || 12;
+};
+
+// 水平布局：同侧重叠时按半高之和推开
+const resolveLabelY = (y2, side, placedYBySide, labelHeight) => {
+  const placed = placedYBySide[side];
+  let finalY = y2;
+  const stackDown = y2 >= 0;
+  const isOverlap = (y, py, h) => Math.abs(y - py) < (labelHeight + h) / 2;
+  let guard = 0;
+  while (
+    guard++ < 50 &&
+    placed.some(({ y: py, height: h }) => isOverlap(finalY, py, h))
+  ) {
+    const hits = placed.filter(({ y: py, height: h }) =>
+      isOverlap(finalY, py, h),
+    );
+    finalY = stackDown
+      ? Math.max(
+          ...hits.map(({ y: py, height: h }) => py + (labelHeight + h) / 2),
+        )
+      : Math.min(
+          ...hits.map(({ y: py, height: h }) => py - (labelHeight + h) / 2),
+        );
+  }
+  placed.push({ y: finalY, height: labelHeight });
+  return finalY;
+};
+
+// 上下布局：过近时只按「自身标签高度」相对上一个已放置位置偏移
+const resolveLabelYVertical = (y2, side, placedYBySide, labelHeight) => {
+  const placed = placedYBySide[side];
+  const stackDown = y2 >= 0;
+  let finalY = y2;
+  if (placed.some(({ y: py }) => Math.abs(finalY - py) < labelHeight)) {
+    finalY = stackDown
+      ? Math.max(...placed.map(({ y: py }) => py)) + labelHeight
+      : Math.min(...placed.map(({ y: py }) => py)) - labelHeight;
+  }
+  placed.push({ y: finalY, height: labelHeight });
+  return finalY;
+};
+
 const getRoseRadius = ({ innerRadius, baseRadius }) =>
   innerRadius + (1 - innerRadius) * baseRadius;
 
@@ -1225,6 +1308,35 @@ const Label = ({
       d.percent = 0;
     });
   }
+  const isHorizontal = mode === "horizontal";
+  const labelElsRef = useRef({});
+  const [measuredHeights, setMeasuredHeights] = useState({});
+
+  // 上下布局：渲染后读取每个标签真实高度（仅在高度变化时更新，避免死循环）
+  useLayoutEffect(() => {
+    if (isHorizontal) {
+      setMeasuredHeights((prev) => (Object.keys(prev).length ? {} : prev));
+      return;
+    }
+    setMeasuredHeights((prev) => {
+      const next = {};
+      let changed = false;
+      Object.keys(labelElsRef.current).forEach((key) => {
+        const el = labelElsRef.current[key];
+        if (!el) return;
+        const h = Math.round(el.getBoundingClientRect().height);
+        if (!h) return;
+        next[key] = h;
+        if (prev[key] !== h) changed = true;
+      });
+      const prevKeys = Object.keys(prev);
+      const nextKeys = Object.keys(next);
+      if (prevKeys.length !== nextKeys.length) changed = true;
+      return changed ? next : prev;
+    });
+  }, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
+
+  const placedYBySide = { left: [], right: [] };
   return (
     <g>
       {_arcs.map(
@@ -1266,9 +1378,32 @@ const Label = ({
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
           const nameStyle = getFontStyle(nameFont);
+          const shouldShow = show && (_showName || showPercent || showValue);
+          // 与真实渲染一致：showValue 开启时值为 0 也会渲染
+          const labelSizeOptions = {
+            showName: _showName,
+            showValue,
+            showPercent,
+            nameFont,
+            valueFont,
+            percentFont,
+          };
+          const estimatedHeight = isHorizontal
+            ? getLabelRowHeight(labelSizeOptions)
+            : getLabelColumnHeight(labelSizeOptions);
+          // 上下布局优先用 DOM 实测高度
+          const labelHeight =
+            !isHorizontal && measuredHeights[index] != null
+              ? measuredHeights[index]
+              : estimatedHeight;
+          const side = x2 < 0 ? "left" : "right";
+          const finalY = shouldShow
+            ? isHorizontal
+              ? resolveLabelY(y2, side, placedYBySide, labelHeight)
+              : resolveLabelYVertical(y2, side, placedYBySide, labelHeight)
+            : y2;
           return (
-            show &&
-            (_showName || showPercent || showValue) && (
+            shouldShow && (
               <g key={index}>
                 <path
                   className={animation ? ringCss["label-line"] : ""}
@@ -1287,11 +1422,11 @@ const Label = ({
                     "L" +
                     x2 +
                     ", " +
-                    y2 +
+                    finalY +
                     "L" +
                     x3 +
                     ", " +
-                    y2
+                    finalY
                   }
                   stroke={
                     lineColor
@@ -1306,17 +1441,21 @@ const Label = ({
                   width="1"
                   height="1"
                   x={_x}
-                  y={y2 + translateY}
+                  y={finalY + translateY}
                   style={{ overflow: "visible", position: "relative" }}
                 >
                   <div
+                    ref={(el) => {
+                      if (el) labelElsRef.current[index] = el;
+                      else delete labelElsRef.current[index];
+                    }}
                     className={animation ? ringCss["label-text"] : ""}
                     style={{
                       position: isIOS ? "absolute" : "relative",
                       transform: isIOS
                         ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
                             left + _x
-                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                          }px),calc(-50% + ${top + finalY + translateY}px))`
                         : "translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
@@ -1460,6 +1599,35 @@ const RingLabel = ({
     });
   }
 
+  const isHorizontal = mode === "horizontal";
+  const labelElsRef = useRef({});
+  const [measuredHeights, setMeasuredHeights] = useState({});
+
+  // 上下布局：渲染后读取每个标签真实高度（仅在高度变化时更新，避免死循环）
+  useLayoutEffect(() => {
+    if (isHorizontal) {
+      setMeasuredHeights((prev) => (Object.keys(prev).length ? {} : prev));
+      return;
+    }
+    setMeasuredHeights((prev) => {
+      const next = {};
+      let changed = false;
+      Object.keys(labelElsRef.current).forEach((key) => {
+        const el = labelElsRef.current[key];
+        if (!el) return;
+        const h = Math.round(el.getBoundingClientRect().height);
+        if (!h) return;
+        next[key] = h;
+        if (prev[key] !== h) changed = true;
+      });
+      const prevKeys = Object.keys(prev);
+      const nextKeys = Object.keys(next);
+      if (prevKeys.length !== nextKeys.length) changed = true;
+      return changed ? next : prev;
+    });
+  }, [isHorizontal, _arcs, mode, showName, showValue, showPercent, showSuffix]);
+
+  const placedYBySide = { left: [], right: [] };
   return (
     <g>
       {_arcs.map(
@@ -1494,16 +1662,38 @@ const RingLabel = ({
           const [x2, y2] = getCoord(midAngle, radius);
 
           const directionX = x2 < 0 ? -1 : 1;
-          const directionY = y2 < 0 ? -1 : 1;
           const x3 = x2 + lineLength * directionX;
           const _x = x3 + (translateX + 6) * directionX;
 
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
+          const shouldShow = show && (_showName || showPercent || _showValue);
+          // 与真实渲染一致：showValue 开启时值为 0 也会渲染
+          const labelSizeOptions = {
+            showName: _showName,
+            showValue,
+            showPercent,
+            nameFont,
+            valueFont,
+            percentFont,
+          };
+          const estimatedHeight = isHorizontal
+            ? getLabelRowHeight(labelSizeOptions)
+            : getLabelColumnHeight(labelSizeOptions);
+          // 上下布局优先用 DOM 实测高度
+          const labelHeight =
+            !isHorizontal && measuredHeights[index] != null
+              ? measuredHeights[index]
+              : estimatedHeight;
+          const side = x2 < 0 ? "left" : "right";
+          const finalY = shouldShow
+            ? isHorizontal
+              ? resolveLabelY(y2, side, placedYBySide, labelHeight)
+              : resolveLabelYVertical(y2, side, placedYBySide, labelHeight)
+            : y2;
 
           return (
-            show &&
-            (_showName || showPercent || _showValue) && (
+            shouldShow && (
               <g key={index}>
                 <path
                   className={ringCss["label-line"]}
@@ -1520,11 +1710,11 @@ const RingLabel = ({
                     "L" +
                     x2 +
                     ", " +
-                    y2 +
+                    finalY +
                     "L" +
                     x3 +
                     ", " +
-                    y2
+                    finalY
                   }
                   stroke={
                     lineColor
@@ -1539,17 +1729,21 @@ const RingLabel = ({
                   width="1"
                   height="1"
                   x={_x}
-                  y={y2 + translateY}
+                  y={finalY + translateY}
                   style={{ overflow: "visible", position: "relative" }}
                 >
                   <div
+                    ref={(el) => {
+                      if (el) labelElsRef.current[index] = el;
+                      else delete labelElsRef.current[index];
+                    }}
                     className={ringCss["label-text"]}
                     style={{
                       position: isIOS ? "absolute" : "relative",
                       transform: isIOS
                         ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
                             left + _x
-                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                          }px),calc(-50% + ${top + finalY + translateY}px))`
                         : "translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",