onesight-charts 1.4.5 → 1.4.7

package/es/components/common-bar/index.js

@@ -452,7 +452,7 @@ function CommonBar(props) {
           var triangleWidth = 280;
           var dataIndex = (_res$2 = res[1]) === null || _res$2 === void 0 ? void 0 : _res$2.dataIndex;
           var originalItem = currentData[dataIndex];
-          return "<div class='onesight-chart-common-bar-tooltip-box' style=\"width:278px;position: relative;\">\n                    ".concat(isTooltipTitleShow ? "<div class=\"tooltip-head\">".concat(res[0].format || res[0].name, "</div>") : '', "\n                    ").concat(originalItem !== null && originalItem !== void 0 && originalItem.currentTime ? "<div class=\"tooltip-time\">".concat(originalItem === null || originalItem === void 0 ? void 0 : originalItem.currentTime, "</div>") : '', "\n                    <div class='tooltip-body'>\n                    ").concat(dataArr.map(function (item) {
+          return "<div class='onesight-chart-common-bar-tooltip-box' style=\"width:278px;position: relative;\">\n                    ".concat(isTooltipTitleShow ? "<div class=\"tooltip-head\">\n                            ".concat(originalItem !== null && originalItem !== void 0 && originalItem.platformIcon ? "<span class=\"icon\">\n                                     <img src=\"".concat(originalItem.platformIcon, "\" alt=\"\">\n                                   </span>") : '', "\n                            <span>").concat(res[0].format || res[0].name, "</span>\n                           </div>") : '', "\n                    ").concat(originalItem !== null && originalItem !== void 0 && originalItem.currentTime ? "<div class=\"tooltip-time\">".concat(originalItem === null || originalItem === void 0 ? void 0 : originalItem.currentTime, "</div>") : '', "\n                    <div class='tooltip-body'>\n                    ").concat(dataArr.map(function (item) {
             var _item$data;
             var raw = (item === null || item === void 0 || (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.rawValue) !== undefined ? item.data.rawValue : item.value;
             var itemWithAlias = _objectSpread(_objectSpread({}, item), {}, {

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,
@@ -298,7 +301,7 @@ function CustomLine(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: '#7A8283',
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -586,7 +589,7 @@ function CustomLine(props) {
           }, 0)];
         }));
         var total = (_legendTotals$name = legendTotals[name]) !== null && _legendTotals$name !== void 0 ? _legendTotals$name : 0;
-        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:".concat(colorObj[name], ";border-radius:4px;margin-bottom:2px;margin-right:6px\"></span>\n          <span>").concat(name, "</span>\n        </div>\n        <div class=\"r\" style=\"padding-left:6px;\">\n          <span class=\"num\">").concat(numberFormatMust(total), "</span>\n        </div>\n      ");
+        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:".concat(colorObj[name], ";margin-bottom:2px;margin-right:6px\"></span>\n          <span>").concat(name, "</span>\n        </div>\n        <div class=\"r\" style=\"padding-left:6px;\">\n          <span class=\"num\">").concat(numberFormatMust(total), "</span>\n        </div>\n      ");
         item.onclick = function () {
           var opt = myChart.getOption();
           var legend = Array.isArray(opt.legend) ? opt.legend[0] : opt.legend;

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,
@@ -245,7 +248,7 @@ function Line(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: '#7A8283',
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }

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/one-table/index.js

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

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

@@ -143,8 +143,8 @@ function Legend(props) {
     }), platformIconMap && platformIconMap[item.name] && /*#__PURE__*/React.createElement("img", {
       src: platformIconMap[item.name],
       style: {
-        width: '13px',
-        height: '13px',
+        width: '16px',
+        height: '16px',
         marginRight: '6px',
         flexShrink: 0,
         verticalAlign: 'middle'

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

@@ -133,7 +133,7 @@ function StackedBar(props) {
   var legendDataForCheck = series.map(function (s) {
     return s.name;
   });
-  var ICON_SIZE = 18;
+  var ICON_SIZE = 16;
   var ICON_GAP = 0;
   var MAX_LABEL_WIDTH = 188;
 
@@ -527,7 +527,7 @@ function StackedBar(props) {
         icon: 'roundRect',
         itemWidth: 14,
         itemHeight: 14,
-        itemGap: 24,
+        itemGap: 8,
         data: visibleLegends,
         formatter: function formatter(name) {
           var rawTotal = seriesTotalMap[name] || 0;
@@ -548,7 +548,7 @@ function StackedBar(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: '#7A8283',
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -813,7 +813,7 @@ function StackedBar(props) {
           cursor: 'pointer'
         });
         var total = (_seriesTotalMap$name = seriesTotalMap[name]) !== null && _seriesTotalMap$name !== void 0 ? _seriesTotalMap$name : 0;
-        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:".concat(colorObj[name], ";border-radius:4px;margin-right:6px;flex-shrink:0;\"></span>\n          <span style=\"flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;\">").concat(name, "</span>\n        </div>\n        <div class=\"r\">\n          <span class=\"num\">").concat(numberFormatMust(total), "</span>\n        </div>\n      ");
+        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:".concat(colorObj[name], ";margin-right:6px;flex-shrink:0;\"></span>\n          <span style=\"flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;\">").concat(name, "</span>\n        </div>\n        <div class=\"r\">\n          <span class=\"num\">").concat(numberFormatMust(total), "</span>\n        </div>\n      ");
         item.onclick = function () {
           var opt = myChart.getOption();
           var legend = Array.isArray(opt.legend) ? opt.legend[0] : opt.legend;

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 到索引的映射，用于生成安全的图标键名
@@ -347,7 +353,7 @@ function StandardCustomLine(props) {
       },
       // 给labelMark添加样式
       labelMark: {
-        color: '#7A8283',
+        // color: '#7A8283',
         fontSize: 12,
         padding: [30, 0, 0, 0]
       }
@@ -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,
@@ -312,7 +315,7 @@ function StandardLine(props) {
             },
             // 给labelMark添加样式
             labelMark: {
-              color: '#7A8283',
+              // color: '#7A8283',
               fontSize: 12,
               padding: [30, 0, 0, 0]
             }
@@ -617,7 +620,7 @@ function StandardLine(props) {
         } else if (sumData) {
           total = sumData;
         }
-        item.innerHTML = "\n        <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:14px;height:14px;background-color:".concat(colorObj[name], ";border-radius:4px;flex-shrink:0;margin-right:6px\"></span>\n        <span class=\"onesight-legend-name\" style=\"flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">").concat(name, "</span>\n        <span class=\"onesight-legend-num\" style=\"flex-shrink:0;padding-left:6px\">").concat(numberFormatMust(total), "</span>\n      ");
+        item.innerHTML = "\n        <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:16px;height:4px;background-color:".concat(colorObj[name], ";flex-shrink:0;margin-right:6px\"></span>\n        <span class=\"onesight-legend-name\" style=\"flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">").concat(name, "</span>\n        <span class=\"onesight-legend-num\" style=\"flex-shrink:0;padding-left:6px\">").concat(numberFormatMust(total), "</span>\n      ");
         item.onclick = function () {
           var opt = myChart.getOption();
           var legend = Array.isArray(opt.legend) ? opt.legend[0] : opt.legend;

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

@@ -577,7 +577,7 @@ function VerticalStackedBar(props) {
         icon: 'roundRect',
         itemWidth: 14,
         itemHeight: 14,
-        itemGap: 24,
+        itemGap: 8,
         formatter: function formatter(name) {
           var _legendTotals$name;
           // name 是 uniqueKey，需要转换为原始 name 用于显示
@@ -805,7 +805,7 @@ function VerticalStackedBar(props) {
         // 检查是否有 platformIcon
         var platformIcon = platformIconMap[uniqueKey];
         var iconHtml = platformIcon ? "<img src=\"".concat(platformIcon, "\" style=\"width:13px;height:13px;margin-right:6px;flex-shrink:0;vertical-align:middle;\" alt=\"\" />") : '';
-        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:14px;vertical-align:middle;height:14px;background-color:".concat(colorObj[uniqueKey], ";border-radius:4px;margin-right:6px;flex-shrink:0;\"></span>\n          ").concat(iconHtml, "\n          <span style=\"flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;\">").concat(originalName, "</span>\n        </div>\n        <div class=\"r\">\n          <span class=\"num\">").concat(changeDataTypeEn(total), "</span>\n        </div>\n      ");
+        item.innerHTML = "\n        <div class=\"l\">\n          <span class=\"onesight-legend-chip\" style=\"display:inline-block;width:16px;vertical-align:middle;height:4px;background-color:".concat(colorObj[uniqueKey], ";margin-right:6px;flex-shrink:0;\"></span>\n          ").concat(iconHtml, "\n          <span style=\"flex:1;min-width:0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;\">").concat(originalName, "</span>\n        </div>\n        <div class=\"r\">\n          <span class=\"num\">").concat(changeDataTypeEn(total), "</span>\n        </div>\n      ");
         item.onclick = function () {
           var opt = myChart.getOption();
           var legend = Array.isArray(opt.legend) ? opt.legend[0] : opt.legend;

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/common-bar/index.js

@@ -422,7 +422,12 @@ function CommonBar(props) {
           const dataIndex = (_b = res[1]) == null ? void 0 : _b.dataIndex;
           const originalItem = currentData[dataIndex];
           return `<div class='onesight-chart-common-bar-tooltip-box' style="width:278px;position: relative;">
-                    ${isTooltipTitleShow ? `<div class="tooltip-head">${res[0].format || res[0].name}</div>` : ""}
+                    ${isTooltipTitleShow ? `<div class="tooltip-head">
+                            ${(originalItem == null ? void 0 : originalItem.platformIcon) ? `<span class="icon">
+                                     <img src="${originalItem.platformIcon}" alt="">
+                                   </span>` : ""}
+                            <span>${res[0].format || res[0].name}</span>
+                           </div>` : ""}
                     ${(originalItem == null ? void 0 : originalItem.currentTime) ? `<div class="tooltip-time">${originalItem == null ? void 0 : originalItem.currentTime}</div>` : ""}
                     <div class='tooltip-body'>
                     ${dataArr.map((item) => {