@easyv/charts 1.10.14 → 1.10.16

package/src/formatter/legend.js

@@ -92,13 +92,20 @@ export const pieLegendFormatter = (series, props) => {
 
   const _color = seriesColorType == "pure" ? pure : stops[0].color;
   const textMarginLeft = 5;
+  const { adaptiveMaxWidth, isPieAdaptive, chartWidth } = props;
+  const isSideAdaptive = !!adaptiveMaxWidth;
+  const isTopBottomAdaptive = isPieAdaptive && !isSideAdaptive;
+  const nameOverflowType =
+    isSideAdaptive || isTopBottomAdaptive ? "ellipsis" : textOverflow;
 
-  // 1. 计算每列宽度（加上间距）
+  // 1. 计算每列宽度（加上间距）；正上/正下自适应不按全局列宽对齐
   let columns = [];
-  if (showName) columns.push(`${props.nameMaxWidth}px`);
-  if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
-  if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
-  if (series.fieldsData.length > 0) {
+  if (!isTopBottomAdaptive) {
+    if (showName) columns.push(`${props.nameMaxWidth}px`);
+    if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
+    if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
+  }
+  if (!isTopBottomAdaptive && series.fieldsData.length > 0) {
     //网格布局新增的各列宽度
     series.fieldsData.forEach((item) => {
       const idx = item.fieldsColumnIndex ?? 0;
@@ -135,6 +142,66 @@ export const pieLegendFormatter = (series, props) => {
     });
   }
 
+  const scaleColumnsToMax = (cols, maxTotal) => {
+    const widths = cols.map((c) => parseFloat(c) || 0);
+    const total = widths.reduce((a, b) => a + b, 0);
+    if (!total || total <= maxTotal) return cols.join(" ");
+    const scale = maxTotal / total;
+    return widths
+      .map((w) => `${Math.max(1, Math.floor(w * scale))}px`)
+      .join(" ");
+  };
+
+  const sideGridMaxWidth = isSideAdaptive
+    ? Math.max(
+        0,
+        adaptiveMaxWidth -
+          (icon
+            ? (parseFloat(icon.width) || 0) +
+              (parseFloat(icon.marginRight) || 0)
+            : 0),
+      )
+    : adaptiveMaxWidth;
+
+  const contentStyle = isSideAdaptive
+    ? {
+        display: "grid",
+        gridTemplateColumns: scaleColumnsToMax(columns, sideGridMaxWidth),
+        width: "max-content",
+        maxWidth: "100%",
+        minWidth: 0,
+        overflow: "hidden",
+        boxSizing: "border-box",
+      }
+    : isTopBottomAdaptive
+      ? {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          width: "max-content",
+          maxWidth: chartWidth ? `${chartWidth}px` : "100%",
+          minWidth: 0,
+          overflow: "hidden",
+          boxSizing: "border-box",
+          gap: `${valueGap}px ${percentGap}px`,
+        }
+      : {
+          width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
+          gridTemplateColumns: columns.join(" "),
+          overflowX: "visible",
+        };
+
+  const contentClassName = isTopBottomAdaptive
+    ? undefined
+    : isSideAdaptive
+      ? showName && showValue && showPercent
+        ? css.showAllStyle
+        : css.notShowAllStyle
+      : showName && showValue && showPercent
+        ? css.showAllStyle
+        : css.notShowAllStyle;
+
   return (
     <>
       {icon && (
@@ -142,30 +209,33 @@ export const pieLegendFormatter = (series, props) => {
           style={{
             ...icon,
             marginRight: icon.marginRight,
+            flexShrink: 0,
             transform: `translate(${nameX}px, ${nameY}px)`,
           }}
         />
       )}
-      <div
-        className={
-          showName && showValue && showPercent
-            ? css.showAllStyle
-            : css.notShowAllStyle
-        }
-        style={{
-          width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
-          gridTemplateColumns: columns.join(" "),
-          overflowX: "visible",
-        }}
-      >
+      <div className={contentClassName} style={contentStyle}>
         {showName && (
           <TextOverflow
             value={displayName}
-            type={textOverflow}
+            type={nameOverflowType}
             speed={speed}
             style={{
-              width: maxWidth,
+              width: isSideAdaptive
+                ? "100%"
+                : isTopBottomAdaptive
+                  ? "auto"
+                  : maxWidth,
+              maxWidth: isSideAdaptive
+                ? "100%"
+                : isTopBottomAdaptive
+                  ? "none"
+                  : maxWidth,
+              minWidth: isSideAdaptive ? 0 : undefined,
+              flexShrink: isTopBottomAdaptive ? 1 : undefined,
               marginLeft: textMarginLeft,
+              // whiteSpace: "nowrap",
+              overflow: "hidden",
               ...getFontStyle(nameFont),
               transform: `translate(${nameX}px, ${nameY}px)`,
             }}
@@ -177,12 +247,17 @@ export const pieLegendFormatter = (series, props) => {
               display: "flex",
               whiteSpace: "nowrap",
               ...getFontStyle(valueFont),
-              marginLeft: valueGap,
+              marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : valueGap,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
               transform: `translate(${valueX}px,${valueY}px)`,
               color: valueSameColor ? _color : valueFont.color,
               alignItems: "center",
-              justifyContent: alignToJustify(valueAlign ?? "center"),
-              textAlign: alignToTextAlign(valueAlign),
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : (valueAlign ?? "center"),
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : valueAlign,
+              ),
             }}
           >
             <span>
@@ -207,66 +282,74 @@ export const pieLegendFormatter = (series, props) => {
               display: "flex",
               whiteSpace: "nowrap",
               ...getFontStyle(percentFont),
-              marginLeft: percentGap,
+              marginLeft:
+                isSideAdaptive || isTopBottomAdaptive ? 0 : percentGap,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
               transform: `translate(${percentX}px,${percentY}px)`,
               color: percentSameColor ? _color : percentFont.color,
               alignItems: "center",
-              justifyContent: alignToJustify(percentAlign),
-              textAlign: alignToTextAlign(percentAlign),
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : percentAlign,
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : percentAlign,
+              ),
             }}
           >
             {percent + "%"}
           </span>
         )}
-        {series.fieldsData?.map(
-          (
-            item,
-            index, //渲染网格布局新增的各列
-          ) => (
+        {series.fieldsData?.map((item, index) => (
+          <span
+            key={fieldColumnKeys[item.fieldsColumnIndex ?? index] ?? index}
+            style={{
+              display: "flex",
+              boxSizing: "border-box",
+              width: isTopBottomAdaptive ? "auto" : "100%",
+              minWidth: 0,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
+              alignItems: "center",
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : (item.align ?? "center"),
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : (item.align ?? "center"),
+              ),
+              overflow:
+                isSideAdaptive || isTopBottomAdaptive ? "hidden" : "visible",
+              whiteSpace: "nowrap",
+              ...getFontStyle(item.font),
+              color: item.sameColor ? _color : item.font.color,
+            }}
+          >
             <span
-              key={fieldColumnKeys[item.fieldsColumnIndex ?? index] ?? index}
               style={{
-                display: "flex",
-                boxSizing: "border-box",
-                width: "100%",
-                minWidth: 0,
+                display: "inline-flex",
                 alignItems: "center",
-                justifyContent: alignToJustify(item.align ?? "center"),
-                textAlign: alignToTextAlign(item.align ?? "center"),
-                overflow: "visible",
-                ...getFontStyle(item.font),
-                color: item.sameColor ? _color : item.font.color,
+                flexWrap: "nowrap",
+                whiteSpace: "nowrap",
+                marginLeft: item.translate?.x ?? 0,
+                marginTop: item.translate?.y ?? 0,
               }}
             >
-              <span
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  flexWrap: "nowrap",
-                  whiteSpace: "nowrap",
-                  marginLeft: item.translate?.x ?? 0,
-                  marginTop: item.translate?.y ?? 0,
-                }}
-              >
-                <span style={{ whiteSpace: "nowrap" }}>{item.value}</span>
-                {item.suffix?.show &&
-                  item.suffix?.text != null &&
-                  String(item.suffix.text) !== "" && (
-                    <span
-                      style={{
-                        whiteSpace: "nowrap",
-                        fontSize: item.suffix.fontSize,
-                        marginLeft: item.suffix.translate?.x ?? 0,
-                        marginTop: item.suffix.translate?.y ?? 0,
-                      }}
-                    >
-                      {item.suffix.text}
-                    </span>
-                  )}
-              </span>
+              <span style={{ whiteSpace: "nowrap" }}>{item.value}</span>
+              {item.suffix?.show &&
+                item.suffix?.text != null &&
+                String(item.suffix.text) !== "" && (
+                  <span
+                    style={{
+                      whiteSpace: "nowrap",
+                      fontSize: item.suffix.fontSize,
+                      marginLeft: item.suffix.translate?.x ?? 0,
+                      marginTop: item.suffix.translate?.y ?? 0,
+                    }}
+                  >
+                    {item.suffix.text}
+                  </span>
+                )}
             </span>
-          ),
-        )}
+          </span>
+        ))}
       </div>
     </>
   );

package/src/utils/legendPlacement.js

@@ -0,0 +1,28 @@
+/**
+ * 解析图例 layout.alignment（如 "center top"、"right top"）
+ * 格式：{水平对齐} {位置}，位置为 top | right | left | bottom
+ */
+export const parseLegendAlignment = (alignment = "right center") => {
+  const [_alignment, position] = alignment.split(" ");
+  const isCenterTopOrBottom =
+    (position === "top" || position === "bottom") && _alignment === "center";
+  const isSidePlacement =
+    position === "left" ||
+    position === "right" ||
+    ((position === "top" || position === "bottom") && _alignment !== "center");
+  return {
+    alignment: _alignment,
+    position,
+    isCenterTopOrBottom,
+    isSidePlacement,
+  };
+};
+
+export const getPieAdaptiveMarginPreset = (show, alignment, presets) => {
+  if (!show) return presets.hidden;
+  const { alignment: mainAlign, position, isCenterTopOrBottom } =
+    parseLegendAlignment(alignment);
+  if (isCenterTopOrBottom) return presets[position];
+  if (position === "left" || mainAlign === "left") return presets.left;
+  return presets.right;
+};