onesight-charts 1.4.5 → 1.4.6

package/lib/components/standard-custom-line/index.js

@@ -63,8 +63,12 @@ function StandardCustomLine(props) {
     yAxisScale = true,
     // Y轴是否不从0开始，根据数据范围自动调整
     legendDropdownRight = -98,
-    showAllLegends = false
+    showAllLegends = false,
     // 是否显示所有图例
+    legendNameMaxWidth = 120,
+    // legend 名称最大宽度（像素值），用于文本截断
+    tooltipNameMaxWidth = 140
+    // tooltip 名称最大宽度（像素值），用于文本截断
   } = props;
   const chartRef = (0, import_react.useRef)(null);
   const prevDepsRef = (0, import_react.useRef)(null);
@@ -288,8 +292,10 @@ function StandardCustomLine(props) {
       // 传入映射，使 tooltip 显示原始 name
       xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset
+      tooltipYOffset,
       // y 方向偏移量
+      tooltipNameMaxWidth
+      // tooltip 名称最大宽度
     });
     const nameToIndexMap = {};
     legendData.forEach((item, index) => {
@@ -360,8 +366,16 @@ function StandardCustomLine(props) {
           const index = nameToIndexMap[name];
           const iconKey = platformIcon && index !== void 0 ? `icon${index}` : "";
           const iconPrefix = iconKey ? `{${iconKey}|} ` : "";
-          return legendValue ? `${iconPrefix}{labelName|${showName}}
-{labelMark|${value}}` : `${iconPrefix}{labelName|${showName}}`;
+          const ellipsisName = (0, import_chartUtils.canvasEllipsisMiddle)(
+            showName,
+            legendNameMaxWidth,
+            {
+              fontSize: 12,
+              fontWeight: 500
+            }
+          );
+          return legendValue ? `${iconPrefix}{labelName|${ellipsisName}}
+{labelMark|${value}}` : `${iconPrefix}{labelName|${ellipsisName}}`;
         },
         textStyle: {
           fontWeight: 500,

package/lib/components/standard-custom-line/tooltipConfig.js

@@ -60,8 +60,10 @@ var createCustomTooltip = ({
   // 新增：uniqueKey 到原始 name 的映射
   xAxis,
   // 新增：原始的 xAxis 数据
-  tooltipYOffset = -4
+  tooltipYOffset = -4,
   // y 方向偏移量，默认 14px
+  tooltipNameMaxWidth = 140
+  // tooltip 名称最大宽度（像素值），用于文本截断
 }) => ({
   className: `onesight-line-tooltip ${tooltipClassName}`,
   trigger: "axis",
@@ -158,7 +160,14 @@ var createCustomTooltip = ({
                           <div class='l'>
                           <span class='l-color' style="background-color:${item.color}"></span>
                           <span>
-                              ${item.seriesName}
+                              ${(0, import_chartUtils.canvasEllipsisMiddle)(
+        item.seriesName,
+        tooltipNameMaxWidth,
+        {
+          fontSize: 14,
+          fontWeight: 400
+        }
+      )}
                           </span>
                           </div>
                           <div class='r'>

package/lib/components/standard-line/index.js

@@ -63,8 +63,12 @@ function StandardLine(props) {
     yAxisScale = true,
     // Y轴是否不从0开始，根据数据范围自动调整
     legendDropdownRight = -98,
-    showAllLegends = false
+    showAllLegends = false,
     // 是否显示所有图例
+    legendNameMaxWidth = 120,
+    // legend 名称最大宽度（像素值），用于文本截断
+    tooltipNameMaxWidth = 140
+    // tooltip 名称最大宽度（像素值），用于文本截断
   } = props;
   const chartRef = (0, import_react.useRef)(null);
   const legendMoreBtnRef = (0, import_react.useRef)(null);
@@ -249,8 +253,10 @@ function StandardLine(props) {
       isTotalShow,
       xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset
+      tooltipYOffset,
       // y 方向偏移量
+      tooltipNameMaxWidth
+      // tooltip 名称最大宽度
     });
     let option = {
       legend: {
@@ -271,15 +277,12 @@ function StandardLine(props) {
           } else if (sumData) {
             value = (0, import_chartUtils.numberFormatMust)(sumData);
           }
-          let showName = name;
-          if (dealData.length >= 4) {
-            const strLen = 15;
-            if (showName.length > strLen) {
-              showName = showName.substring(0, strLen) + "...";
-            }
-          }
-          return legendValue ? `{labelName|${showName}}
-{labelMark|${value}}` : `{labelName|${showName}}`;
+          const ellipsisName = (0, import_chartUtils.canvasEllipsisMiddle)(name, legendNameMaxWidth, {
+            fontSize: 12,
+            fontWeight: 500
+          });
+          return legendValue ? `{labelName|${ellipsisName}}
+{labelMark|${value}}` : `{labelName|${ellipsisName}}`;
         },
         textStyle: {
           fontWeight: 500,

package/lib/components/standard-line/tooltipConfig.js

@@ -58,8 +58,10 @@ var createCustomTooltip = ({
   isTotalShow,
   xAxis,
   // 新增：原始的 xAxis 数据
-  tooltipYOffset = -4
+  tooltipYOffset = -4,
   // y 方向偏移量，默认 14px
+  tooltipNameMaxWidth = 140
+  // tooltip 名称最大宽度（像素值），用于文本截断
 }) => ({
   className: `onesight-line-tooltip ${tooltipClassName}`,
   trigger: "axis",
@@ -152,7 +154,14 @@ var createCustomTooltip = ({
                           <div class='l'>
                           <span class='l-color' style="background-color:${item.color}"></span>
                           <span>
-                              ${item.seriesName}
+                              ${(0, import_chartUtils.canvasEllipsisMiddle)(
+        item.seriesName,
+        tooltipNameMaxWidth,
+        {
+          fontSize: 14,
+          fontWeight: 400
+        }
+      )}
                           </span>
                           </div>
                           <div class='r'>

package/lib/utils/chartUtils.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var chartUtils_exports = {};
 __export(chartUtils_exports, {
   calculateSeriesTotal: () => calculateSeriesTotal,
+  canvasEllipsisMiddle: () => canvasEllipsisMiddle,
   changeDataTypeEn: () => changeDataTypeEn,
   computeFloat: () => computeFloat,
   computeFloatNull: () => computeFloatNull,
@@ -2239,9 +2240,79 @@ var mapEchartsDict = {
 function numberFormat(num, fixedNum = 1) {
   return numberFormatMust(num, fixedNum);
 }
+function canvasGetTextWidth(str, style = {}) {
+  if (!str)
+    return 0;
+  const { fontSize = 12, fontWeight = 500, fontFamily = "sans-serif" } = style;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  return Math.ceil(ctx.measureText(str).width);
+}
+function canvasEllipsisMiddle(str, maxWidth, style = {}) {
+  if (!str)
+    return "";
+  if (canvasGetTextWidth(str, style) <= maxWidth)
+    return str;
+  const ellipsis = "...";
+  let left = 1;
+  let testWidth = 0;
+  let arr = [];
+  while (testWidth < maxWidth) {
+    const leftPart = str.slice(0, left);
+    const rightPart = str.slice(-left);
+    const testStr = leftPart + ellipsis + rightPart;
+    testWidth = canvasGetTextWidth(testStr, style);
+    arr.push({
+      left,
+      testWidth
+    });
+    left++;
+  }
+  let T = 0;
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (arr[i].testWidth < maxWidth) {
+      T = arr[i].left;
+      break;
+    }
+  }
+  if (T) {
+    return `${str.slice(0, T)}${ellipsis}${str.slice(-T)}`;
+  } else {
+    return "";
+  }
+}
+var TextMeasure = (() => {
+  const span = document.createElement("span");
+  span.style.position = "fixed";
+  span.style.visibility = "hidden";
+  span.style.whiteSpace = "nowrap";
+  span.style.pointerEvents = "none";
+  span.style.left = "-9999px";
+  document.body.appendChild(span);
+  function getWidth(str, style = {}) {
+    if (!str)
+      return 0;
+    const {
+      fontSize = 14,
+      fontWeight = "normal",
+      // fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      fontFamily = '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      letterSpacing = 0
+    } = style;
+    span.style.fontSize = fontSize + "px";
+    span.style.fontWeight = fontWeight;
+    span.style.letterSpacing = letterSpacing + "px";
+    span.style.fontFamily = fontFamily;
+    span.textContent = str;
+    return Math.ceil(span.offsetWidth) + 2;
+  }
+  return { getWidth };
+})();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   calculateSeriesTotal,
+  canvasEllipsisMiddle,
   changeDataTypeEn,
   computeFloat,
   computeFloatNull,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onesight-charts",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "private": false,
   "description": "OneSight前端图表公共组件库",
   "license": "MIT",