onesight-charts 1.4.5 → 1.4.7

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

@@ -60,8 +60,12 @@ function CustomLine(props) {
     xType,
     rightSpacing,
     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);
@@ -240,8 +244,10 @@ function CustomLine(props) {
       isTotalShow,
       xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset
+      tooltipYOffset,
       // y 方向偏移量
+      tooltipNameMaxWidth
+      // tooltip 名称最大宽度
     });
     let option = {
       legend: {
@@ -257,15 +263,12 @@ function CustomLine(props) {
         itemGap: 8,
         formatter: function(name) {
           const value = legendValue ? (0, import_chartUtils.numberFormatMust)(seriesTotal[name] || 0) : 0;
-          let showName = name;
-          if (dealData.length >= 4) {
-            const strLen = 15;
-            if (name.length > strLen) {
-              showName = name.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,
@@ -281,7 +284,7 @@ function CustomLine(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: "#7A8283",
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -540,7 +543,7 @@ function CustomLine(props) {
         const total = legendTotals[name] ?? 0;
         item.innerHTML = `
         <div class="l">
-          <span class="onesight-legend-chip" style="display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:${colorObj[name]};border-radius:4px;margin-bottom:2px;margin-right:6px"></span>
+          <span class="onesight-legend-chip" style="display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:${colorObj[name]};margin-bottom:2px;margin-right:6px"></span>
           <span>${name}</span>
         </div>
         <div class="r" style="padding-left:6px;">

package/lib/components/custom-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",
@@ -151,7 +153,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/line/index.js

@@ -63,8 +63,12 @@ function Line(props) {
     sumData = 0,
     yAxisScale = true,
     // Y轴是否不从0开始，根据数据范围自动调整
-    showAllLegends = false
+    showAllLegends = false,
     // 是否显示所有图例（line组件默认显示所有，此参数用于触发动态调整grid.bottom）
+    legendNameMaxWidth = 120,
+    // legend 名称最大宽度（像素值），用于文本截断
+    tooltipNameMaxWidth = 140
+    // tooltip 名称最大宽度（像素值），用于文本截断
   } = props;
   const chartRef = (0, import_react.useRef)(null);
   const prevDepsRef = (0, import_react.useRef)(null);
@@ -205,8 +209,10 @@ function Line(props) {
       isTotalShow,
       xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset
+      tooltipYOffset,
       // y 方向偏移量
+      tooltipNameMaxWidth
+      // tooltip 名称最大宽度
     });
     const series = (0, import_chartUtils.convertSeriesData)(seriesData);
     const legendData = Object.keys(seriesData).map((item) => ({
@@ -227,18 +233,15 @@ function Line(props) {
         itemGap: 8,
         formatter: function(name) {
           let value = legendValue ? (0, import_chartUtils.numberFormatMust)(seriesTotal[name] || 0) : 0;
-          let showName = name;
-          if (seriesData.length >= 4) {
-            const strLen = 15;
-            if (name.length > strLen) {
-              showName = name.substring(0, strLen) + "...";
-            }
-          }
           if (sumData) {
             value = (0, import_chartUtils.numberFormatMust)(sumData);
           }
-          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,
@@ -254,7 +257,7 @@ function Line(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: "#7A8283",
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }

package/lib/components/line/tooltipConfig.js

@@ -59,8 +59,10 @@ var createCustomTooltip = ({
   isTotalShow,
   xAxis,
   // 新增：原始的 xAxis 数据
-  tooltipYOffset = -4
+  tooltipYOffset = -4,
   // y 方向偏移量，默认 14px
+  tooltipNameMaxWidth = 140
+  // tooltip 名称最大宽度（像素值），用于文本截断
 }) => ({
   className: `onesight-line-tooltip ${tooltipClassName} ${id}`,
   trigger: "axis",
@@ -154,7 +156,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/one-table/index.js

@@ -81,7 +81,7 @@ var LineChart = ({ data }) => {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: "#7A8283",
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }

package/lib/components/pie/legend/index.js

@@ -156,8 +156,8 @@ function Legend(props) {
           {
             src: platformIconMap[item.name],
             style: {
-              width: "13px",
-              height: "13px",
+              width: "16px",
+              height: "16px",
               marginRight: "6px",
               flexShrink: 0,
               verticalAlign: "middle"

package/lib/components/stacked-bar/index.js

@@ -136,7 +136,7 @@ function StackedBar(props) {
   }, [onChartClick]);
   const chartColor = color || import_colors.defaultChartColors;
   const legendDataForCheck = series.map((s) => s.name);
-  const ICON_SIZE = 18;
+  const ICON_SIZE = 16;
   const ICON_GAP = 0;
   const MAX_LABEL_WIDTH = 188;
   function makeYAxisRich(rows, maxLabelWidth = 188) {
@@ -497,7 +497,7 @@ function StackedBar(props) {
         icon: "roundRect",
         itemWidth: 14,
         itemHeight: 14,
-        itemGap: 24,
+        itemGap: 8,
         data: visibleLegends,
         formatter: function(name) {
           const rawTotal = seriesTotalMap[name] || 0;
@@ -519,7 +519,7 @@ function StackedBar(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: "#7A8283",
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -739,7 +739,7 @@ function StackedBar(props) {
         const total = seriesTotalMap[name] ?? 0;
         item.innerHTML = `
         <div class="l">
-          <span class="onesight-legend-chip" style="display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:${colorObj[name]};border-radius:4px;margin-right:6px;flex-shrink:0;"></span>
+          <span class="onesight-legend-chip" style="display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:${colorObj[name]};margin-right:6px;flex-shrink:0;"></span>
           <span style="flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${name}</span>
         </div>
         <div class="r">

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) => {
@@ -304,7 +310,7 @@ function StandardCustomLine(props) {
       },
       // 给labelMark添加样式
       labelMark: {
-        color: "#7A8283",
+        // color: '#7A8283',
         fontSize: 12,
         padding: [30, 0, 0, 0]
       }
@@ -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,
@@ -295,7 +298,7 @@ function StandardLine(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: "#7A8283",
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -566,7 +569,7 @@ function StandardLine(props) {
           total = sumData;
         }
         item.innerHTML = `
-        <span class="onesight-legend-chip" style="display:inline-block;width:14px;height:14px;background-color:${colorObj[name]};border-radius:4px;flex-shrink:0;margin-right:6px"></span>
+        <span class="onesight-legend-chip" style="display:inline-block;width:16px;height:4px;background-color:${colorObj[name]};flex-shrink:0;margin-right:6px"></span>
         <span class="onesight-legend-name" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${name}</span>
         <span class="onesight-legend-num" style="flex-shrink:0;padding-left:6px">${(0, import_chartUtils.numberFormatMust)(
           total

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/components/vertical-stacked-bar/index.js

@@ -545,7 +545,7 @@ function VerticalStackedBar(props) {
         icon: "roundRect",
         itemWidth: 14,
         itemHeight: 14,
-        itemGap: 24,
+        itemGap: 8,
         formatter: function(name) {
           const originalName = keyToNameMap && keyToNameMap[name] ? keyToNameMap[name] : name;
           let showName = originalName;
@@ -742,7 +742,7 @@ function VerticalStackedBar(props) {
         const iconHtml = platformIcon ? `<img src="${platformIcon}" style="width:13px;height:13px;margin-right:6px;flex-shrink:0;vertical-align:middle;" alt="" />` : "";
         item.innerHTML = `
         <div class="l">
-          <span class="onesight-legend-chip" style="display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:${colorObj[uniqueKey]};border-radius:4px;margin-right:6px;flex-shrink:0;"></span>
+          <span class="onesight-legend-chip" style="display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:${colorObj[uniqueKey]};margin-right:6px;flex-shrink:0;"></span>
           ${iconHtml}
           <span style="flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${originalName}</span>
         </div>

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.7",
   "private": false,
   "description": "OneSight前端图表公共组件库",
   "license": "MIT",