@easyv/charts 1.10.28 → 1.10.30

package/src/components/Legend.js

@@ -54,16 +54,34 @@ export default memo(
     const ref_container = useRef(null); // 滚动容器
     const ref_scrollTop = useRef(0); // 当前滚动距离
 
-    const [scrollStep, setScrollStep] = useState(0); // 行高度
+    const [scrollStep, setScrollStep] = useState(0); // 每次滚动距离
+    const [loopContainerHeight, setLoopContainerHeight] = useState(null); // 按父高度推算的 loop 视口高度
 
-    // 初始化行高
+    // 根据父级 height 计算可见项数，视口高度 = N*行高 + (N-1)*间距（最后一项下方不留空）
     useEffect(() => {
-      if (ref_container.current) {
-        const rowHeight =
-          ref_container.current.querySelector("li").clientHeight + gridRowGap;
-        setScrollStep(rowHeight);
+      if (!ref_container.current) return;
+      const li = ref_container.current.querySelector("li");
+      if (!li) return;
+      const itemHeight = li.offsetHeight;
+      const step = itemHeight + gridRowGap;
+      setScrollStep(step);
+      if (!loop.show || !height) {
+        setLoopContainerHeight(null);
+        return;
       }
-    }, [gridRowGap]);
+      const totalItems = series?.length ?? 0;
+      const visibleCount = Math.min(
+        totalItems,
+        Math.max(1, Math.floor((height + gridRowGap) / step)),
+      );
+      setLoopContainerHeight(
+        visibleCount * itemHeight + Math.max(0, visibleCount - 1) * gridRowGap,
+      );
+    }, [gridRowGap, loop.show, series, height]);
+
+    const loopHeight = loop.show
+      ? (loopContainerHeight ?? height ?? "auto")
+      : "auto";
 
     // 启动自动滚动定时器
     useEffect(() => {
@@ -249,6 +267,9 @@ export default memo(
       isCenterTopOrBottom &&
       fixedColumnsPerRow > 1;
 
+    const columnsPerRow = Math.max(1, Number(gridTemplateColumns) || 1);
+    const totalRows = Math.ceil(length / columnsPerRow);
+
     const formatterExtra = {
       ...config,
       valueMaxWidth,
@@ -330,25 +351,26 @@ export default memo(
       );
     };
 
+    const legendAlignContent =
+      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";
     const stylePieOrAxis = formatter
       ? {
           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",
+          alignContent: loop.show ? "flex-start" : legendAlignContent,
           flexDirection: "column",
+          gap: loop.show ? `${gridRowGap}px` : undefined,
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         }
       : {
@@ -357,7 +379,7 @@ export default memo(
           boxSizing: "border-box",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         };
     if (isPieAdaptive && isSideLegend) {
@@ -369,8 +391,9 @@ export default memo(
         width: "max-content",
         maxWidth: sideLegendMaxWidth || undefined,
         alignItems: "flex-start",
+        ...(loop.show ? { justifyContent: "flex-start" } : {}),
         ...getPosition(position, _alignment, x, y),
-        height: loop.show ? height : "auto",
+        height: loopHeight,
         overflowY: loop.show ? "scroll" : "auto",
       };
       const pieAdaptiveListStyle = {
@@ -404,7 +427,7 @@ export default memo(
         maxWidth: pieLegendFullWidth || "100%",
         boxSizing: "border-box",
         ...getPosition(position, _alignment, x, y),
-        height: loop.show ? height : "auto",
+        height: loopHeight,
         overflowY: loop.show ? "scroll" : "auto",
       };
       const topBottomListStyle = {
@@ -491,7 +514,7 @@ export default memo(
           position: "absolute",
           display: "flex",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         }}
         ref={ref_container}
@@ -577,66 +600,60 @@ export default memo(
         ref={ref_container}
       >
         {formatter ? (
-          [...Array(Math.ceil(series.length / gridTemplateColumns))].map(
-            (_, indexs) => (
-              <ul
-                key={indexs}
-                style={{
-                  display: "flex",
-                  width: "fit-content",
-                  justifyContent: legendMainAlign,
-                  gap: `${gridRowGap}px  ${gridColumnGap}px`,
-                  marginBottom: gridRowGap + "px",
-                }}
-              >
-                {_series.map((series, i) => {
-                  if (Math.floor(i / gridTemplateColumns) == indexs) {
-                    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,
-                          overflow: "visible",
-                        }}
-                      >
-                        {formatter(series, {
-                          ...config,
-                          valueMaxWidth,
-                          percentMaxWidth,
-                          nameMaxWidth,
-                          otherData: data,
-                          columnsSeries,
-                          fieldColumnKeys,
-                          fieldsColumnWidths,
-                        })}
-                      </li>
-                    );
-                  }
-                })}
-              </ul>
-            ),
-          )
+          [...Array(totalRows)].map((_, indexs) => (
+            <ul
+              key={indexs}
+              style={{
+                display: "flex",
+                width: "fit-content",
+                justifyContent: legendMainAlign,
+                gap: `${gridRowGap}px  ${gridColumnGap}px`,
+                margin: 0,
+              }}
+            >
+              {_series.map((series, i) => {
+                if (Math.floor(i / columnsPerRow) == indexs) {
+                  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,
+                        overflow: "visible",
+                      }}
+                    >
+                      {formatter(series, {
+                        ...config,
+                        valueMaxWidth,
+                        percentMaxWidth,
+                        nameMaxWidth,
+                        otherData: data,
+                        columnsSeries,
+                        fieldColumnKeys,
+                        fieldsColumnWidths,
+                      })}
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          ))
         ) : (
           <ul
             style={{