@easyv/charts 1.10.9 → 1.10.10

package/lib/utils/index.js

@@ -20,7 +20,7 @@ var _excluded = ["color", "fill", "bold", "italic"],
   _excluded2 = ["backgroundSize"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var defaultBackground = '#000000';
+var defaultBackground = "#000000";
 var defaultIcon = {
   background: defaultBackground
 };
@@ -38,22 +38,22 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
     stops = _ref$fill$linear.stops,
     _ref$pattern = _ref.pattern,
     _ref$pattern$path = _ref$pattern.path,
-    path = _ref$pattern$path === void 0 ? '' : _ref$pattern$path,
+    path = _ref$pattern$path === void 0 ? "" : _ref$pattern$path,
     _ref$pattern$width = _ref$pattern.width,
-    width = _ref$pattern$width === void 0 ? '100%' : _ref$pattern$width,
+    width = _ref$pattern$width === void 0 ? "100%" : _ref$pattern$width,
     _ref$pattern$height = _ref$pattern.height,
-    height = _ref$pattern$height === void 0 ? '100%' : _ref$pattern$height,
+    height = _ref$pattern$height === void 0 ? "100%" : _ref$pattern$height,
     _ref$pattern$boderCol = _ref$pattern.boderColor,
-    stroke = _ref$pattern$boderCol === void 0 ? 'transparent' : _ref$pattern$boderCol,
+    stroke = _ref$pattern$boderCol === void 0 ? "transparent" : _ref$pattern$boderCol,
     _ref$pattern$boderWid = _ref$pattern.boderWidth,
     boderWidth = _ref$pattern$boderWid === void 0 ? 0 : _ref$pattern$boderWid;
   // 处理宽高（支持百分比/数字）
-  var canvasWidth = width === '100%' ? 200 : Number(width) || 200; // 百分比默认200，可根据实际场景调整
-  var canvasHeight = height === '100%' ? 200 : Number(height) || 200;
+  var canvasWidth = width === "100%" ? 200 : Number(width) || 200; // 百分比默认200，可根据实际场景调整
+  var canvasHeight = height === "100%" ? 200 : Number(height) || 200;
 
   // 创建离屏 Canvas
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
 
@@ -64,7 +64,7 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
   var path2D = new Path2D(path);
 
   // 2. 处理填充（纯色/渐变）
-  if (type === 'pure') {
+  if (type === "pure") {
     ctx.fillStyle = pure;
   } else {
     // 线性渐变（对应原 SVG linearGradient）
@@ -101,7 +101,7 @@ var renderCanvasBackground = exports.renderCanvasBackground = function renderCan
   }
 
   // 5. 转换为 DataURL（替代 SVG DataURL）
-  return canvas.toDataURL('image/png');
+  return canvas.toDataURL("image/png");
 };
 var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
   var _ref3$fill = _ref3.fill,
@@ -113,13 +113,13 @@ var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
     stops = _ref3$fill$linear.stops,
     _ref3$pattern = _ref3.pattern,
     _ref3$pattern$path = _ref3$pattern.path,
-    path = _ref3$pattern$path === void 0 ? '' : _ref3$pattern$path,
+    path = _ref3$pattern$path === void 0 ? "" : _ref3$pattern$path,
     _ref3$pattern$width = _ref3$pattern.width,
-    width = _ref3$pattern$width === void 0 ? '100%' : _ref3$pattern$width,
+    width = _ref3$pattern$width === void 0 ? "100%" : _ref3$pattern$width,
     _ref3$pattern$height = _ref3$pattern.height,
-    height = _ref3$pattern$height === void 0 ? '100%' : _ref3$pattern$height,
+    height = _ref3$pattern$height === void 0 ? "100%" : _ref3$pattern$height,
     _ref3$pattern$boderCo = _ref3$pattern.boderColor,
-    stroke = _ref3$pattern$boderCo === void 0 ? 'transparent' : _ref3$pattern$boderCo,
+    stroke = _ref3$pattern$boderCo === void 0 ? "transparent" : _ref3$pattern$boderCo,
     _ref3$pattern$boderWi = _ref3$pattern.boderWidth,
     boderWidth = _ref3$pattern$boderWi === void 0 ? 0 : _ref3$pattern$boderWi;
   return /*#__PURE__*/React.createElement("svg", {
@@ -133,19 +133,19 @@ var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
     y1: "0%",
     x2: "0%",
     y2: "100%",
-    gradientTransform: 'rotate(' + (angle + 180) + ', 0.5, 0.5)'
+    gradientTransform: "rotate(" + (angle + 180) + ", 0.5, 0.5)"
   }, stops.map(function (_ref4, index) {
     var offset = _ref4.offset,
       color = _ref4.color;
     return /*#__PURE__*/React.createElement("stop", {
       key: index,
-      offset: offset + '%',
+      offset: offset + "%",
       stopColor: color,
       stopOpacity: opacity
     });
   }))), /*#__PURE__*/React.createElement("path", {
     d: path,
-    fill: type === 'pure' ? pure : 'url(#linearGradient)',
+    fill: type === "pure" ? pure : "url(#linearGradient)",
     stroke: stroke,
     strokeWidth: boderWidth
   }));
@@ -157,7 +157,7 @@ var getColorList = exports.getColorList = function getColorList(_ref5) {
     stops = _ref5$linear.stops,
     angle = _ref5$linear.angle,
     opacity = _ref5$linear.opacity;
-  if (type == 'pure') {
+  if (type == "pure") {
     return [{
       color: pure,
       offset: 1
@@ -179,7 +179,7 @@ var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colo
   if (colors) {
     var stops = colors.stops,
       angle = colors.angle;
-    var result = 'linear-gradient(' + angle + 'deg, ';
+    var result = "linear-gradient(" + angle + "deg, ";
     var stops_ = JSON.parse(JSON.stringify(stops));
     stops_.sort(function (a, b) {
       return a.offset - b.offset;
@@ -190,14 +190,14 @@ var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colo
         offset = _stops_$i.offset;
       result += "".concat(color, " ").concat(offset, "%,");
     }
-    return result.slice(0, -1) + ')';
+    return result.slice(0, -1) + ")";
   }
 };
 var getIcon = exports.getIcon = function getIcon(type, icon) {
   var lineType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "solid";
   switch (type) {
-    case 'area':
-    case 'line':
+    case "area":
+    case "line":
       var color = icon.background;
       return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultLineIcon), icon), {}, {
         minWidth: icon.width,
@@ -212,30 +212,30 @@ var getIcon = exports.getIcon = function getIcon(type, icon) {
 var dateFormat = exports.dateFormat = function dateFormat(date, fmt) {
   date = new Date(date);
   var o = {
-    'M+': date.getMonth() + 1,
+    "M+": date.getMonth() + 1,
     //月份
-    'D+': date.getDate(),
+    "D+": date.getDate(),
     //日
-    'H+': date.getHours(),
+    "H+": date.getHours(),
     //小时
-    'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12,
+    "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12,
     //小时
-    'm+': date.getMinutes(),
+    "m+": date.getMinutes(),
     //分
-    's+': date.getSeconds(),
+    "s+": date.getSeconds(),
     //秒
     S: date.getMilliseconds(),
     //毫秒
-    X: '星期' + '日一二三四五六'.charAt(date.getDay()),
-    W: new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')[date.getDay()],
-    w: new Array('Sun.', 'Mon.', ' Tues.', 'Wed.', ' Thur.', 'Fri.', 'Sat.')[date.getDay()]
+    X: "星期" + "日一二三四五六".charAt(date.getDay()),
+    W: new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")[date.getDay()],
+    w: new Array("Sun.", "Mon.", " Tues.", "Wed.", " Thur.", "Fri.", "Sat.")[date.getDay()]
   };
-  if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-  for (var k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+  if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+  for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
   return fmt;
 };
 var getBreakWord = exports.getBreakWord = function getBreakWord(str, breakNumber) {
-  var re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
+  var re = new RegExp("([^]){1," + breakNumber + "}", "g");
   return str.match(re);
 };
 
@@ -288,17 +288,17 @@ var getTickCoord = exports.getTickCoord = function getTickCoord(_ref7) {
     y = _ref7$y === void 0 ? 0 : _ref7$y;
   var x1, x2, y1, y2;
   switch (orientation) {
-    case 'top':
+    case "top":
       x1 = x2 = coordinate;
       y2 = y;
       y1 = y2 - tickSize;
       break;
-    case 'left':
+    case "left":
       y1 = y2 = coordinate;
       x2 = x;
       x1 = x2 - tickSize;
       break;
-    case 'right':
+    case "right":
       y1 = y2 = coordinate;
       x2 = x;
       x1 = x2 + tickSize;
@@ -322,22 +322,22 @@ var getGridCoord = exports.getGridCoord = function getGridCoord(_ref8) {
     end = _ref8.end;
   var x1, x2, y1, y2;
   switch (orientation) {
-    case 'top':
+    case "top":
       x1 = x2 = coordinate;
       y1 = 0;
       y2 = end;
       break;
-    case 'bottom':
+    case "bottom":
       x1 = x2 = coordinate;
       y1 = 0;
       y2 = end * -1;
       break;
-    case 'left':
+    case "left":
       y1 = y2 = coordinate;
       x1 = 0;
       x2 = end;
       break;
-    case 'right':
+    case "right":
       y1 = y2 = coordinate;
       x1 = 0;
       x2 = end * -1;
@@ -372,14 +372,14 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref9, type) {
     fontFamily = _ref9.fontFamily,
     letterSpacing = _ref9.letterSpacing,
     lineHeight = _ref9.lineHeight;
-  if (type == 'svg') {
+  if (type == "svg") {
     return {
       fontSize: fontSize,
       fontFamily: fontFamily,
       letterSpacing: letterSpacing,
       fill: color,
-      fontWeight: bold ? 'bold' : 'normal',
-      fontStyle: italic ? 'italic' : 'normal',
+      fontWeight: bold ? "bold" : "normal",
+      fontStyle: italic ? "italic" : "normal",
       lineHeight: lineHeight + "px"
     };
   }
@@ -388,8 +388,8 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref9, type) {
     fontFamily: fontFamily,
     letterSpacing: letterSpacing,
     color: color,
-    fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal',
+    fontWeight: bold ? "bold" : "normal",
+    fontStyle: italic ? "italic" : "normal",
     lineHeight: lineHeight + "px" //不加px默认是倍数关系
   };
 };
@@ -399,17 +399,17 @@ var formatFont = exports.formatFont = function formatFont(_ref10, type) {
     bold = _ref10.bold,
     italic = _ref10.italic,
     rest = (0, _objectWithoutProperties2["default"])(_ref10, _excluded);
-  if (type == 'svg') {
+  if (type == "svg") {
     return _objectSpread({
       fill: fill || color,
-      fontWeight: typeof bold == "string" ? bold : bold ? 'bold' : 'normal',
-      fontStyle: typeof italic == "string" ? italic : italic ? 'italic' : 'normal'
+      fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
+      fontStyle: typeof italic == "string" ? italic : italic ? "italic" : "normal"
     }, rest);
   }
   return _objectSpread({
     color: color || fill,
-    fontWeight: typeof bold == "string" ? bold : bold ? 'bold' : 'normal',
-    fontStyle: typeof italic == "string" ? italic : italic ? 'italic' : 'normal'
+    fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
+    fontStyle: typeof italic == "string" ? italic : italic ? "italic" : "normal"
   }, rest);
 };
 var getMargin = exports.getMargin = function getMargin(_ref11) {
@@ -417,7 +417,7 @@ var getMargin = exports.getMargin = function getMargin(_ref11) {
     marginRight = _ref11.marginRight,
     marginBottom = _ref11.marginBottom,
     marginLeft = _ref11.marginLeft;
-  return marginTop + 'px ' + marginRight + 'px ' + marginBottom + 'px ' + marginLeft + 'px';
+  return marginTop + "px " + marginRight + "px " + marginBottom + "px " + marginLeft + "px";
 };
 var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref12) {
   var _ref12$x = _ref12.x,
@@ -426,14 +426,14 @@ var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref12) {
     y = _ref12$y === void 0 ? 0 : _ref12$y,
     _ref12$z = _ref12.z,
     z = _ref12$z === void 0 ? 0 : _ref12$z;
-  return 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
+  return "translate3d(" + x + "px, " + y + "px, " + z + "px)";
 };
 var getTranslate2d = exports.getTranslate2d = function getTranslate2d(_ref13) {
   var _ref13$x = _ref13.x,
     x = _ref13$x === void 0 ? 0 : _ref13$x,
     _ref13$y = _ref13.y,
     y = _ref13$y === void 0 ? 0 : _ref13$y;
-  return 'translate(' + x + ', ' + y + ')';
+  return "translate(" + x + ", " + y + ")";
 };
 function band() {
   var scale = (0, _d3v.scaleOrdinal)().unknown(undefined),
@@ -540,9 +540,9 @@ var getStacks = exports.getStacks = function getStacks(series) {
         yOrZ: yOrZ,
         s: [name]
       };
-      if (type === 'band') {
+      if (type === "band") {
         var index = tmp.filter(function (item) {
-          return item.type === 'band';
+          return item.type === "band";
         }).length;
         tmp.push(_objectSpread(_objectSpread({}, common), {}, {
           index: index
@@ -581,7 +581,7 @@ var seriesYOrZ = exports.seriesYOrZ = function seriesYOrZ(series) {
   var y = new Map();
   var z = new Map();
   series.forEach(function (value, key) {
-    if (value.yOrZ === 'y') {
+    if (value.yOrZ === "y") {
       y.set(key, value);
     } else {
       z.set(key, value);
@@ -609,7 +609,7 @@ var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack,
 };
 var reverseGradientStops = function reverseGradientStops(gradient) {
   var _gradient$linear;
-  if (gradient.type !== 'linear' || !((_gradient$linear = gradient.linear) !== null && _gradient$linear !== void 0 && _gradient$linear.stops)) {
+  if (gradient.type !== "linear" || !((_gradient$linear = gradient.linear) !== null && _gradient$linear !== void 0 && _gradient$linear.stops)) {
     return gradient;
   }
   var stops = gradient.linear.stops;
@@ -641,16 +641,16 @@ var getBandBackground = exports.getBandBackground = function getBandBackground(p
   }
   try {
     var _pattern$backgroundSi = pattern.backgroundSize,
-      backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,
+      backgroundSize = _pattern$backgroundSi === void 0 ? "100% 100%" : _pattern$backgroundSi,
       _pattern = (0, _objectWithoutProperties2["default"])(pattern, _excluded2);
     // 替换原 SVG DataURL 为 Canvas DataURL
     var canvasDataUrl = renderCanvasBackground({
       fill: fill,
       pattern: _pattern
     });
-    return 'center top / ' + backgroundSize + ' url("' + canvasDataUrl + '")';
+    return "center top / " + backgroundSize + ' url("' + canvasDataUrl + '")';
   } catch (e) {
-    console.error('Canvas 绘制背景失败:', e);
+    console.error("Canvas 绘制背景失败:", e);
   }
   return "";
 };
@@ -697,14 +697,14 @@ var isValidHttpUrl = exports.isValidHttpUrl = function isValidHttpUrl(string) {
   } catch (_) {
     return false;
   }
-  return url.protocol === 'http:' || url.protocol === 'https:';
+  return url.protocol === "http:" || url.protocol === "https:";
 };
 var getChildren = exports.getChildren = function getChildren(svgStr) {
-  var wrapper = document.createElement('div');
+  var wrapper = document.createElement("div");
   wrapper.innerHTML = svgStr;
   var childNodes = wrapper.childNodes;
   var svgDom = (0, _toConsumableArray2["default"])(childNodes).find(function (item) {
-    return item.tagName === 'svg';
+    return item.tagName === "svg";
   });
   if (!!svgDom) {
     return (0, _toConsumableArray2["default"])(svgDom.childNodes);
@@ -715,7 +715,7 @@ var _filterChildren = exports.filterChildren = function filterChildren(children,
   return children.reduce(function (prev, node) {
     var nodeName = node.nodeName;
     if (tagNames.indexOf(nodeName) > -1) {
-      if (nodeName === 'g') {
+      if (nodeName === "g") {
         return _filterChildren((0, _toConsumableArray2["default"])(node.childNodes), tagNames);
       } else {
         prev.push(node);
@@ -726,76 +726,76 @@ var _filterChildren = exports.filterChildren = function filterChildren(children,
 };
 var getDomPath = exports.getDomPath = function getDomPath(node) {
   switch (node.nodeName) {
-    case 'circle':
+    case "circle":
       return (0, _svgPoints.toPath)({
-        type: 'circle',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        r: +node.getAttribute('r') || 0
+        type: "circle",
+        cx: +node.getAttribute("cx") || 0,
+        cy: +node.getAttribute("cy") || 0,
+        r: +node.getAttribute("r") || 0
       });
-    case 'ellipse':
+    case "ellipse":
       return (0, _svgPoints.toPath)({
-        type: 'ellipse',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0
+        type: "ellipse",
+        cx: +node.getAttribute("cx") || 0,
+        cy: +node.getAttribute("cy") || 0,
+        rx: +node.getAttribute("rx") || 0,
+        ry: +node.getAttribute("ry") || 0
       });
-    case 'line':
+    case "line":
       return (0, _svgPoints.toPath)({
-        type: 'line',
-        x1: +node.getAttribute('x1') || 0,
-        x2: +node.getAttribute('x2') || 0,
-        y1: +node.getAttribute('y1') || 0,
-        y2: +node.getAttribute('y2') || 0
+        type: "line",
+        x1: +node.getAttribute("x1") || 0,
+        x2: +node.getAttribute("x2") || 0,
+        y1: +node.getAttribute("y1") || 0,
+        y2: +node.getAttribute("y2") || 0
       });
-    case 'path':
+    case "path":
       return (0, _svgPoints.toPath)({
-        type: 'path',
-        d: node.getAttribute('d') || ''
+        type: "path",
+        d: node.getAttribute("d") || ""
       });
-    case 'polygon':
+    case "polygon":
       return (0, _svgPoints.toPath)({
-        type: 'polyline',
-        points: node.getAttribute('points') || ''
+        type: "polyline",
+        points: node.getAttribute("points") || ""
       });
-    case 'polyline':
+    case "polyline":
       return (0, _svgPoints.toPath)({
-        type: 'polyline',
-        points: node.getAttribute('points') || ''
+        type: "polyline",
+        points: node.getAttribute("points") || ""
       });
-    case 'rect':
+    case "rect":
       return (0, _svgPoints.toPath)({
-        type: 'rect',
-        height: +node.getAttribute('height') || 0,
-        width: +node.getAttribute('width') || 0,
-        x: +node.getAttribute('x') || 0,
-        y: +node.getAttribute('y') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0
+        type: "rect",
+        height: +node.getAttribute("height") || 0,
+        width: +node.getAttribute("width") || 0,
+        x: +node.getAttribute("x") || 0,
+        y: +node.getAttribute("y") || 0,
+        rx: +node.getAttribute("rx") || 0,
+        ry: +node.getAttribute("ry") || 0
       });
   }
 };
-var sortPie = exports.sortPie = function sortPie(data, order) {
+var sortPie = exports.sortPie = function sortPie(data, order, acc) {
   var _data = data.map(function (item) {
     return _objectSpread({}, item);
   });
   switch (order) {
-    case '':
+    case "":
       _data.sort(function (_ref22, _ref23) {
         var a = _ref22.index;
         var b = _ref23.index;
         return (0, _d3v.ascending)(a, b);
       });
       break;
-    case 'desc':
+    case "desc":
       _data.sort(function (_ref24, _ref25) {
         var a = _ref24.value;
         var b = _ref25.value;
         return (0, _d3v.descending)(a, b);
       });
       break;
-    case 'asc':
+    case "asc":
       _data.sort(function (_ref26, _ref27) {
         var a = _ref26.value;
         var b = _ref27.value;
@@ -803,6 +803,17 @@ var sortPie = exports.sortPie = function sortPie(data, order) {
       });
       break;
   }
+  if (acc && acc.columns) {
+    _data.forEach(function (item) {
+      item.fields = {};
+      Object.values(acc.columns).forEach(function (columnConfig) {
+        var fieldName = columnConfig.field;
+        if (fieldName) {
+          item.fields[fieldName] = columnConfig;
+        }
+      });
+    });
+  }
   return _data;
 };
 var getDataWithPercent = exports.getDataWithPercent = function getDataWithPercent() {
@@ -855,7 +866,7 @@ var getDataWithPercent = exports.getDataWithPercent = function getDataWithPercen
   });
   return objData;
 };
-var excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
+var excludeTypes = ["array", "object", "group", "modal", "colors"];
 var _reduceConfig = exports.reduceConfig = function reduceConfig() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   if (!Array.isArray(config)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.9",
+  "version": "1.10.10",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Legend.js

@@ -14,7 +14,9 @@ export default memo(
   ({
     series,
     height,
+    data,
     config,
+    columnsSeries,
     config: {
       show,
       order = "",
@@ -83,7 +85,7 @@ export default memo(
       table.scrollTo({ top: ref_scrollTop.current, behavior: "smooth" });
     };
 
-    const _series = sortPie(series, order);
+    const _series = sortPie(series, order, columnsSeries);
     const [_alignment, position] = alignment.split(" ");
     const length = _series.length;
 
@@ -145,6 +147,56 @@ export default memo(
       }),
     );
     const nameMaxWidth = config.name?.maxWidth || 80;
+    const fieldColumnKeys = [];
+    if (columnsSeries?.columns) {
+      Object.values(columnsSeries.columns).forEach((col) => {
+        if (col.field && !fieldColumnKeys.includes(col.field)) {
+          fieldColumnKeys.push(col.field);
+        }
+      });
+    }
+    const fieldsColumnWidths = fieldColumnKeys.map((fieldName) => {
+      let maxMeasured = 0;
+      let maxCfg = 0;
+      _series.forEach((s) => {
+        const cfg = s.fields?.[fieldName];
+        if (
+          !cfg ||
+          !s.data ||
+          !Object.prototype.hasOwnProperty.call(s.data, fieldName)
+        ) {
+          return;
+        }
+        const f = cfg.font || {};
+        const fontStack = `${f.fontSize || 12}px ${f.fontFamily || "Arial"}`;
+        const letter = f.letterSpacing || 0;
+        let w = parseFloat(
+          getCanvasTextWidth(
+            String(s.data[fieldName] ?? ""),
+            letter,
+            fontStack,
+          ),
+        );
+        const suf = cfg.suffix;
+        if (suf?.show && suf.text != null && String(suf.text) !== "") {
+          const sufFont = `${suf.fontSize || f.fontSize || 12}px ${
+            f.fontFamily || "Arial"
+          }`;
+          w += parseFloat(
+            getCanvasTextWidth(String(suf.text), letter, sufFont),
+          );
+        }
+        const tx = Number(cfg.translate?.x) || 0;
+        const stx =
+          suf?.show && suf.text != null && String(suf.text) !== ""
+            ? Number(suf.translate?.x) || 0
+            : 0;
+        w += Math.max(0, tx) + Math.max(0, stx);
+        maxMeasured = Math.max(maxMeasured, w);
+        maxCfg = Math.max(maxCfg, Number(cfg.maxWidth) || 0);
+      });
+      return Math.max(maxMeasured, maxCfg);
+    });
 
     const stylePieOrAxis = formatter
       ? {
@@ -233,6 +285,7 @@ export default memo(
                   alignItems: "center",
                   cursor: "pointer",
                   gap: _icon.gap,
+                  overflow: formatter ? "visible" : undefined,
                 }}
               >
                 {formatter ? (
@@ -241,6 +294,10 @@ export default memo(
                     valueMaxWidth,
                     percentMaxWidth,
                     nameMaxWidth,
+                    otherData: data,
+                    columnsSeries,
+                    fieldColumnKeys,
+                    fieldsColumnWidths,
                   })
                 ) : (
                   <>
@@ -311,6 +368,7 @@ export default memo(
                         alignItems: "center",
                         cursor: "pointer",
                         gap: _icon.gap,
+                        overflow: formatter ? "visible" : undefined,
                       }}
                     >
                       {formatter ? (
@@ -319,6 +377,10 @@ export default memo(
                           valueMaxWidth,
                           percentMaxWidth,
                           nameMaxWidth,
+                          otherData: data,
+                          columnsSeries,
+                          fieldColumnKeys,
+                          fieldsColumnWidths,
                         })
                       ) : (
                         <>