onesight-charts 1.4.5 → 1.4.6

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

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as echarts from 'echarts';
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { calculateSeriesTotal, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
+import { calculateSeriesTotal, canvasEllipsisMiddle, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
 import { defaultChartColors } from "../../utils/colors";
 import { createCustomTooltip } from "./tooltipConfig";
 import "./style.scss";
@@ -50,7 +50,11 @@ function CustomLine(props) {
     _props$legendDropdown = props.legendDropdownRight,
     legendDropdownRight = _props$legendDropdown === void 0 ? -98 : _props$legendDropdown,
     _props$showAllLegends = props.showAllLegends,
-    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends;
+    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends,
+    _props$legendNameMaxW = props.legendNameMaxWidth,
+    legendNameMaxWidth = _props$legendNameMaxW === void 0 ? 120 : _props$legendNameMaxW,
+    _props$tooltipNameMax = props.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _props$tooltipNameMax === void 0 ? 140 : _props$tooltipNameMax;
   var chartRef = useRef(null);
   // 存储上一次的依赖项值，用于深度比较
   var prevDepsRef = useRef(null);
@@ -259,7 +263,9 @@ function CustomLine(props) {
       isTotalShow: isTotalShow,
       xAxis: xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset: tooltipYOffset // y 方向偏移量
+      tooltipYOffset: tooltipYOffset,
+      // y 方向偏移量
+      tooltipNameMaxWidth: tooltipNameMaxWidth // tooltip 名称最大宽度
     });
     var option = {
       legend: {
@@ -275,14 +281,11 @@ function CustomLine(props) {
         itemGap: 8,
         formatter: function formatter(name) {
           var value = legendValue ? numberFormatMust(seriesTotal[name] || 0) : 0;
-          var showName = name;
-          if (dealData.length >= 4) {
-            var strLen = 15;
-            if (name.length > strLen) {
-              showName = name.substring(0, strLen) + '...';
-            }
-          }
-          return legendValue ? "{labelName|".concat(showName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(showName, "}");
+          var ellipsisName = canvasEllipsisMiddle(name, legendNameMaxWidth, {
+            fontSize: 12,
+            fontWeight: 500
+          });
+          return legendValue ? "{labelName|".concat(ellipsisName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(ellipsisName, "}");
         },
         textStyle: {
           fontWeight: 500,

package/es/components/custom-line/tooltipConfig.js

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import { changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
+import { canvasEllipsisMiddle, changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
 var formatToolTipDate = function formatToolTipDate(value) {
   // 根据语言环境设置 moment 的 locale
   var locale = isZH() ? 'zh-cn' : 'en';
@@ -29,7 +29,9 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
     isTotalShow = _ref.isTotalShow,
     xAxis = _ref.xAxis,
     _ref$tooltipYOffset = _ref.tooltipYOffset,
-    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset;
+    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset,
+    _ref$tooltipNameMaxWi = _ref.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _ref$tooltipNameMaxWi === void 0 ? 140 : _ref$tooltipNameMaxWi;
   return {
     className: "onesight-line-tooltip ".concat(tooltipClassName),
     trigger: 'axis',
@@ -106,7 +108,10 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
         marginRight = 3;
       }
       return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(formatToolTipDate(originalDate), "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 && isTotalShow ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
-        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(item.seriesName, "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
+        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(canvasEllipsisMiddle(item.seriesName, tooltipNameMaxWidth, {
+          fontSize: 14,
+          fontWeight: 400
+        }), "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
       }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
     }
   };

package/es/components/line/index.js

@@ -1,7 +1,7 @@
 import * as echarts from 'echarts';
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { calculateSeriesTotal, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull, toggleAxisPointer } from "../../utils/chartUtils";
+import { calculateSeriesTotal, canvasEllipsisMiddle, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull, toggleAxisPointer } from "../../utils/chartUtils";
 import { defaultChartColors } from "../../utils/colors";
 import { createCustomTooltip } from "./tooltipConfig";
 import "./style.scss";
@@ -39,7 +39,11 @@ function Line(props) {
     _props$yAxisScale = props.yAxisScale,
     yAxisScale = _props$yAxisScale === void 0 ? true : _props$yAxisScale,
     _props$showAllLegends = props.showAllLegends,
-    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends;
+    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends,
+    _props$legendNameMaxW = props.legendNameMaxWidth,
+    legendNameMaxWidth = _props$legendNameMaxW === void 0 ? 120 : _props$legendNameMaxW,
+    _props$tooltipNameMax = props.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _props$tooltipNameMax === void 0 ? 140 : _props$tooltipNameMax;
   var chartRef = useRef(null);
   // 存储上一次的依赖项值，用于深度比较
   var prevDepsRef = useRef(null);
@@ -194,7 +198,9 @@ function Line(props) {
       isTotalShow: isTotalShow,
       xAxis: xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset: tooltipYOffset // y 方向偏移量
+      tooltipYOffset: tooltipYOffset,
+      // y 方向偏移量
+      tooltipNameMaxWidth: tooltipNameMaxWidth // tooltip 名称最大宽度
     });
     var series = convertSeriesData(seriesData);
     var legendData = Object.keys(seriesData).map(function (item) {
@@ -219,17 +225,14 @@ function Line(props) {
         itemGap: 8,
         formatter: function formatter(name) {
           var value = legendValue ? numberFormatMust(seriesTotal[name] || 0) : 0;
-          var showName = name;
-          if (seriesData.length >= 4) {
-            var strLen = 15;
-            if (name.length > strLen) {
-              showName = name.substring(0, strLen) + '...';
-            }
-          }
           if (sumData) {
             value = numberFormatMust(sumData);
           }
-          return legendValue ? "{labelName|".concat(showName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(showName, "}");
+          var ellipsisName = canvasEllipsisMiddle(name, legendNameMaxWidth, {
+            fontSize: 12,
+            fontWeight: 500
+          });
+          return legendValue ? "{labelName|".concat(ellipsisName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(ellipsisName, "}");
         },
         textStyle: {
           fontWeight: 500,

package/es/components/line/tooltipConfig.js

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import { changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
+import { canvasEllipsisMiddle, changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
 var formatToolTipDate = function formatToolTipDate(value) {
   // 根据语言环境设置 moment 的 locale
   var locale = isZH() ? 'zh-cn' : 'en';
@@ -30,7 +30,9 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
     isTotalShow = _ref.isTotalShow,
     xAxis = _ref.xAxis,
     _ref$tooltipYOffset = _ref.tooltipYOffset,
-    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset;
+    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset,
+    _ref$tooltipNameMaxWi = _ref.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _ref$tooltipNameMaxWi === void 0 ? 140 : _ref$tooltipNameMaxWi;
   return {
     className: "onesight-line-tooltip ".concat(tooltipClassName, " ").concat(id),
     trigger: 'axis',
@@ -109,7 +111,10 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
         marginRight = 3;
       }
       return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(formatToolTipDate(originalDate), "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 && isTotalShow ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
-        return "\n                      <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(item.seriesName, "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
+        return "\n                      <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(canvasEllipsisMiddle(item.seriesName, tooltipNameMaxWidth, {
+          fontSize: 14,
+          fontWeight: 400
+        }), "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
       }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
     }
   };

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

@@ -13,7 +13,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import * as echarts from 'echarts';
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { calculateSeriesTotal, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
+import { calculateSeriesTotal, canvasEllipsisMiddle, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
 import { defaultChartColors } from "../../utils/colors";
 import { createCustomTooltip } from "./tooltipConfig";
 import "./style.scss";
@@ -54,7 +54,11 @@ function StandardCustomLine(props) {
     _props$legendDropdown = props.legendDropdownRight,
     legendDropdownRight = _props$legendDropdown === void 0 ? -98 : _props$legendDropdown,
     _props$showAllLegends = props.showAllLegends,
-    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends;
+    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends,
+    _props$legendNameMaxW = props.legendNameMaxWidth,
+    legendNameMaxWidth = _props$legendNameMaxW === void 0 ? 120 : _props$legendNameMaxW,
+    _props$tooltipNameMax = props.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _props$tooltipNameMax === void 0 ? 140 : _props$tooltipNameMax;
   var chartRef = useRef(null);
   // 存储上一次的依赖项值，用于深度比较
   var prevDepsRef = useRef(null);
@@ -328,7 +332,9 @@ function StandardCustomLine(props) {
       // 传入映射，使 tooltip 显示原始 name
       xAxis: xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset: tooltipYOffset // y 方向偏移量
+      tooltipYOffset: tooltipYOffset,
+      // y 方向偏移量
+      tooltipNameMaxWidth: tooltipNameMaxWidth // tooltip 名称最大宽度
     });
 
     // 创建 uniqueKey 到索引的映射，用于生成安全的图标键名
@@ -410,7 +416,11 @@ function StandardCustomLine(props) {
           var index = nameToIndexMap[name];
           var iconKey = platformIcon && index !== undefined ? "icon".concat(index) : '';
           var iconPrefix = iconKey ? "{".concat(iconKey, "|} ") : '';
-          return legendValue ? "".concat(iconPrefix, "{labelName|").concat(showName, "}\n{labelMark|").concat(value, "}") : "".concat(iconPrefix, "{labelName|").concat(showName, "}");
+          var ellipsisName = canvasEllipsisMiddle(showName, legendNameMaxWidth, {
+            fontSize: 12,
+            fontWeight: 500
+          });
+          return legendValue ? "".concat(iconPrefix, "{labelName|").concat(ellipsisName, "}\n{labelMark|").concat(value, "}") : "".concat(iconPrefix, "{labelName|").concat(ellipsisName, "}");
         },
         textStyle: {
           fontWeight: 500,

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

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import { changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
+import { canvasEllipsisMiddle, changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
 var formatToolTipDate = function formatToolTipDate(value) {
   // 根据语言环境设置 moment 的 locale
   var locale = isZH() ? 'zh-cn' : 'en';
@@ -30,7 +30,9 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
     keyToNameMap = _ref.keyToNameMap,
     xAxis = _ref.xAxis,
     _ref$tooltipYOffset = _ref.tooltipYOffset,
-    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset;
+    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset,
+    _ref$tooltipNameMaxWi = _ref.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _ref$tooltipNameMaxWi === void 0 ? 140 : _ref$tooltipNameMaxWi;
   return {
     className: "onesight-line-tooltip ".concat(tooltipClassName),
     trigger: 'axis',
@@ -114,7 +116,10 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
         marginRight = 3;
       }
       return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(formatToolTipDate(originalDate), "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 && isTotalShow ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
-        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(item.seriesName, "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
+        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(canvasEllipsisMiddle(item.seriesName, tooltipNameMaxWidth, {
+          fontSize: 14,
+          fontWeight: 400
+        }), "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
       }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
     }
   };

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

@@ -13,7 +13,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import * as echarts from 'echarts';
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { calculateSeriesTotal, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
+import { calculateSeriesTotal, canvasEllipsisMiddle, convertSeriesData, dealPath, isZH, numberFormatMust, numberFormatNull } from "../../utils/chartUtils";
 import { defaultChartColors } from "../../utils/colors";
 import { createCustomTooltip } from "./tooltipConfig";
 import "./style.scss";
@@ -54,7 +54,11 @@ function StandardLine(props) {
     _props$legendDropdown = props.legendDropdownRight,
     legendDropdownRight = _props$legendDropdown === void 0 ? -98 : _props$legendDropdown,
     _props$showAllLegends = props.showAllLegends,
-    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends;
+    showAllLegends = _props$showAllLegends === void 0 ? false : _props$showAllLegends,
+    _props$legendNameMaxW = props.legendNameMaxWidth,
+    legendNameMaxWidth = _props$legendNameMaxW === void 0 ? 120 : _props$legendNameMaxW,
+    _props$tooltipNameMax = props.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _props$tooltipNameMax === void 0 ? 140 : _props$tooltipNameMax;
   var chartRef = useRef(null);
   var legendMoreBtnRef = useRef(null);
   var legendDropdownRef = useRef(null);
@@ -267,7 +271,9 @@ function StandardLine(props) {
       isTotalShow: isTotalShow,
       xAxis: xAxis,
       // 传入原始 xAxis 数据
-      tooltipYOffset: tooltipYOffset // y 方向偏移量
+      tooltipYOffset: tooltipYOffset,
+      // y 方向偏移量
+      tooltipNameMaxWidth: tooltipNameMaxWidth // tooltip 名称最大宽度
     });
     var option = {
       legend: {
@@ -289,14 +295,11 @@ function StandardLine(props) {
           } else if (sumData) {
             value = numberFormatMust(sumData);
           }
-          var showName = name;
-          if (dealData.length >= 4) {
-            var strLen = 15;
-            if (showName.length > strLen) {
-              showName = showName.substring(0, strLen) + '...';
-            }
-          }
-          return legendValue ? "{labelName|".concat(showName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(showName, "}");
+          var ellipsisName = canvasEllipsisMiddle(name, legendNameMaxWidth, {
+            fontSize: 12,
+            fontWeight: 500
+          });
+          return legendValue ? "{labelName|".concat(ellipsisName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(ellipsisName, "}");
         },
         textStyle: {
           fontWeight: 500,

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

@@ -6,7 +6,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import { changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
+import { canvasEllipsisMiddle, changeDataTypeEn, computeFloatNull, computePos, isZH } from "../../utils/chartUtils";
 var formatToolTipDate = function formatToolTipDate(value) {
   // 根据语言环境设置 moment 的 locale
   var locale = isZH() ? 'zh-cn' : 'en';
@@ -29,7 +29,9 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
     isTotalShow = _ref.isTotalShow,
     xAxis = _ref.xAxis,
     _ref$tooltipYOffset = _ref.tooltipYOffset,
-    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset;
+    tooltipYOffset = _ref$tooltipYOffset === void 0 ? -4 : _ref$tooltipYOffset,
+    _ref$tooltipNameMaxWi = _ref.tooltipNameMaxWidth,
+    tooltipNameMaxWidth = _ref$tooltipNameMaxWi === void 0 ? 140 : _ref$tooltipNameMaxWi;
   return {
     className: "onesight-line-tooltip ".concat(tooltipClassName),
     trigger: 'axis',
@@ -108,7 +110,10 @@ export var createCustomTooltip = function createCustomTooltip(_ref) {
         marginRight = 3;
       }
       return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(formatToolTipDate(originalDate), "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 && isTotalShow ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
-        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(item.seriesName, "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
+        return "\n                          <div class='item' data-series-item='".concat(JSON.stringify(item), "' key='").concat(item.seriesName, "'>\n                          <div class='l'>\n                          <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                          <span>\n                              ").concat(canvasEllipsisMiddle(item.seriesName, tooltipNameMaxWidth, {
+          fontSize: 14,
+          fontWeight: 400
+        }), "\n                          </span>\n                          </div>\n                          <div class='r'>\n                          ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                          <span class='num'>\n                              ").concat(changeDataTypeEn(item.value), "\n                          </span>\n                          </div>  \n                      </div>\n                      ");
       }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
     }
   };

package/es/utils/chartUtils.js

@@ -3544,4 +3544,82 @@ function numberFormat(num) {
   var fixedNum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   return numberFormatMust(num, fixedNum);
 }
-export { calculateSeriesTotal, changeDataTypeEn, computeFloat, computeFloatNull, computePos, convertSeriesData, dealBarPath, dealPath, dealSort, isZH, mapEchartsDict, numberFormat, numberFormatMust, numberFormatNull, sumValues, toggleAxisPointer, transformedSeriesData };
+function canvasGetTextWidth(str) {
+  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!str) return 0;
+  var _style$fontSize = style.fontSize,
+    fontSize = _style$fontSize === void 0 ? 12 : _style$fontSize,
+    _style$fontWeight = style.fontWeight,
+    fontWeight = _style$fontWeight === void 0 ? 500 : _style$fontWeight,
+    _style$fontFamily = style.fontFamily,
+    fontFamily = _style$fontFamily === void 0 ? 'sans-serif' : _style$fontFamily;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.font = "".concat(fontWeight, " ").concat(fontSize, "px ").concat(fontFamily);
+  return Math.ceil(ctx.measureText(str).width);
+}
+function canvasEllipsisMiddle(str, maxWidth) {
+  var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!str) return '';
+  if (canvasGetTextWidth(str, style) <= maxWidth) return str;
+  var ellipsis = '...';
+  var left = 1;
+  var testWidth = 0;
+  var arr = [];
+  // 分别从两端开始拼接，保证总宽度 <= maxWidth
+  while (testWidth < maxWidth) {
+    var leftPart = str.slice(0, left);
+    var rightPart = str.slice(-left);
+    var testStr = leftPart + ellipsis + rightPart;
+    testWidth = canvasGetTextWidth(testStr, style);
+    arr.push({
+      left: left,
+      testWidth: testWidth
+    });
+    left++;
+  }
+  var T = 0;
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (arr[i].testWidth < maxWidth) {
+      T = arr[i].left;
+      break;
+    }
+  }
+  if (T) {
+    return "".concat(str.slice(0, T)).concat(ellipsis).concat(str.slice(-T));
+  } else {
+    return '';
+  }
+}
+var TextMeasure = function () {
+  // 创建一个私有隐藏元素用于测量
+  var 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) {
+    var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!str) return 0;
+    var _style$fontSize2 = style.fontSize,
+      fontSize = _style$fontSize2 === void 0 ? 14 : _style$fontSize2,
+      _style$fontWeight2 = style.fontWeight,
+      fontWeight = _style$fontWeight2 === void 0 ? 'normal' : _style$fontWeight2,
+      _style$fontFamily2 = style.fontFamily,
+      fontFamily = _style$fontFamily2 === void 0 ? '"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"' : _style$fontFamily2,
+      _style$letterSpacing = style.letterSpacing,
+      letterSpacing = _style$letterSpacing === void 0 ? 0 : _style$letterSpacing;
+    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: getWidth
+  };
+}();
+export { calculateSeriesTotal, canvasEllipsisMiddle, changeDataTypeEn, computeFloat, computeFloatNull, computePos, convertSeriesData, dealBarPath, dealPath, dealSort, isZH, mapEchartsDict, numberFormat, numberFormatMust, numberFormatNull, sumValues, toggleAxisPointer, transformedSeriesData };

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,

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,

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'>