@easyv/charts 1.9.2 → 1.9.4

package/lib/components/TextOverflow.js

@@ -38,9 +38,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
         };
       case "break-word":
         return {
-          wordBreak: "break-all",
-          wordWrap: "break-word",
-          whiteSpace: "pre-line"
+          wordBreak: "normal",
+          overflowWrap: "break-word",
+          hyphens: "auto",
+          whiteSpace: "normal",
+          wordWrap: "break-word"
         };
       case "marquee":
         return {

package/lib/formatter/legend.js

@@ -65,6 +65,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
   if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
   if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
+  columns[columns.length - 1] = "auto";
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -96,6 +97,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       alignItems: 'center',
       justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center',
       textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center"
+      //------------
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,

package/lib/utils/index.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SvgBackground = void 0;
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -27,7 +28,7 @@ var defaultLineIcon = {
   height: 2,
   background: defaultBackground
 };
-var SvgBackground = function SvgBackground(_ref) {
+var renderCanvasBackground = exports.renderCanvasBackground = function renderCanvasBackground(_ref) {
   var _ref$fill = _ref.fill,
     type = _ref$fill.type,
     pure = _ref$fill.pure,
@@ -46,6 +47,83 @@ var SvgBackground = function SvgBackground(_ref) {
     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;
+
+  // 创建离屏 Canvas
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+
+  // 清空画布
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+  // 1. 解析 SVG Path 为 Canvas Path2D
+  var path2D = new Path2D(path);
+
+  // 2. 处理填充（纯色/渐变）
+  if (type === 'pure') {
+    ctx.fillStyle = pure;
+  } else {
+    // 线性渐变（对应原 SVG linearGradient）
+    var centerX = canvasWidth / 2;
+    var centerY = canvasHeight / 2;
+    var rad = (angle + 180) * Math.PI / 180; // 旋转角度转弧度
+    var gradientLength = Math.hypot(canvasWidth, canvasHeight); // 渐变长度取对角线
+
+    // 计算渐变起点/终点（匹配 SVG rotate 效果）
+    var startX = centerX - Math.sin(rad) * gradientLength;
+    var startY = centerY - Math.cos(rad) * gradientLength;
+    var endX = centerX + Math.sin(rad) * gradientLength;
+    var endY = centerY + Math.cos(rad) * gradientLength;
+
+    // 创建渐变
+    var gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+    stops.forEach(function (_ref2) {
+      var offset = _ref2.offset,
+        color = _ref2.color;
+      gradient.addColorStop(offset / 100, color);
+      gradient.opacity = opacity; // 透明度
+    });
+    ctx.fillStyle = gradient;
+  }
+
+  // 3. 处理描边
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = boderWidth;
+
+  // 4. 绘制路径
+  ctx.fill(path2D);
+  if (boderWidth > 0) {
+    ctx.stroke(path2D);
+  }
+
+  // 5. 转换为 DataURL（替代 SVG DataURL）
+  return canvas.toDataURL('image/png');
+};
+
+// 原 SvgBackground 组件保留（兼容旧逻辑，也可删除）
+var SvgBackground = exports.SvgBackground = function SvgBackground(_ref3) {
+  var _ref3$fill = _ref3.fill,
+    type = _ref3$fill.type,
+    pure = _ref3$fill.pure,
+    _ref3$fill$linear = _ref3$fill.linear,
+    angle = _ref3$fill$linear.angle,
+    opacity = _ref3$fill$linear.opacity,
+    stops = _ref3$fill$linear.stops,
+    _ref3$pattern = _ref3.pattern,
+    _ref3$pattern$path = _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,
+    _ref3$pattern$height = _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,
+    _ref3$pattern$boderWi = _ref3$pattern.boderWidth,
+    boderWidth = _ref3$pattern$boderWi === void 0 ? 0 : _ref3$pattern$boderWi;
   return /*#__PURE__*/React.createElement("svg", {
     preserveAspectRatio: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -58,9 +136,9 @@ var SvgBackground = function SvgBackground(_ref) {
     x2: "0%",
     y2: "100%",
     gradientTransform: 'rotate(' + (angle + 180) + ', 0.5, 0.5)'
-  }, stops.map(function (_ref2, index) {
-    var offset = _ref2.offset,
-      color = _ref2.color;
+  }, stops.map(function (_ref4, index) {
+    var offset = _ref4.offset,
+      color = _ref4.color;
     return /*#__PURE__*/React.createElement("stop", {
       key: index,
       offset: offset + '%',
@@ -74,13 +152,15 @@ var SvgBackground = function SvgBackground(_ref) {
     strokeWidth: boderWidth
   }));
 };
-var getColorList = exports.getColorList = function getColorList(_ref3) {
-  var type = _ref3.type,
-    pure = _ref3.pure,
-    _ref3$linear = _ref3.linear,
-    stops = _ref3$linear.stops,
-    angle = _ref3$linear.angle,
-    opacity = _ref3$linear.opacity;
+
+// ===================== 原有方法（仅改造 getBandBackground） =====================
+var getColorList = exports.getColorList = function getColorList(_ref5) {
+  var type = _ref5.type,
+    pure = _ref5.pure,
+    _ref5$linear = _ref5.linear,
+    stops = _ref5$linear.stops,
+    angle = _ref5$linear.angle,
+    opacity = _ref5$linear.opacity;
   if (type == 'pure') {
     return [{
       color: pure,
@@ -90,9 +170,9 @@ var getColorList = exports.getColorList = function getColorList(_ref3) {
       offset: 0
     }];
   }
-  return stops.map(function (_ref4) {
-    var color = _ref4.color,
-      offset = _ref4.offset;
+  return stops.map(function (_ref6) {
+    var color = _ref6.color,
+      offset = _ref6.offset;
     return {
       color: color,
       offset: offset / 100
@@ -114,7 +194,7 @@ 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) {
@@ -201,15 +281,15 @@ var getTicksOfAxis = exports.getTicksOfAxis = function getTicksOfAxis(domain, ti
   }
   return ticksArr;
 };
-var getTickCoord = exports.getTickCoord = function getTickCoord(_ref5) {
-  var orientation = _ref5.orientation,
-    coordinate = _ref5.coordinate,
-    _ref5$tickSize = _ref5.tickSize,
-    tickSize = _ref5$tickSize === void 0 ? 6 : _ref5$tickSize,
-    _ref5$x = _ref5.x,
-    x = _ref5$x === void 0 ? 0 : _ref5$x,
-    _ref5$y = _ref5.y,
-    y = _ref5$y === void 0 ? 0 : _ref5$y;
+var getTickCoord = exports.getTickCoord = function getTickCoord(_ref7) {
+  var orientation = _ref7.orientation,
+    coordinate = _ref7.coordinate,
+    _ref7$tickSize = _ref7.tickSize,
+    tickSize = _ref7$tickSize === void 0 ? 6 : _ref7$tickSize,
+    _ref7$x = _ref7.x,
+    x = _ref7$x === void 0 ? 0 : _ref7$x,
+    _ref7$y = _ref7.y,
+    y = _ref7$y === void 0 ? 0 : _ref7$y;
   var x1, x2, y1, y2;
   switch (orientation) {
     case 'top':
@@ -240,10 +320,10 @@ var getTickCoord = exports.getTickCoord = function getTickCoord(_ref5) {
     y2: y2
   };
 };
-var getGridCoord = exports.getGridCoord = function getGridCoord(_ref6) {
-  var orientation = _ref6.orientation,
-    coordinate = _ref6.coordinate,
-    end = _ref6.end;
+var getGridCoord = exports.getGridCoord = function getGridCoord(_ref8) {
+  var orientation = _ref8.orientation,
+    coordinate = _ref8.coordinate,
+    end = _ref8.end;
   var x1, x2, y1, y2;
   switch (orientation) {
     case 'top':
@@ -288,14 +368,14 @@ var getMousePos = exports.getMousePos = function getMousePos(evt, dom) {
     h: rect.height
   };
 };
-var getFontStyle = exports.getFontStyle = function getFontStyle(_ref7, type) {
-  var color = _ref7.color,
-    bold = _ref7.bold,
-    italic = _ref7.italic,
-    fontSize = _ref7.fontSize,
-    fontFamily = _ref7.fontFamily,
-    letterSpacing = _ref7.letterSpacing,
-    lineHeight = _ref7.lineHeight;
+var getFontStyle = exports.getFontStyle = function getFontStyle(_ref9, type) {
+  var color = _ref9.color,
+    bold = _ref9.bold,
+    italic = _ref9.italic,
+    fontSize = _ref9.fontSize,
+    fontFamily = _ref9.fontFamily,
+    letterSpacing = _ref9.letterSpacing,
+    lineHeight = _ref9.lineHeight;
   if (type == 'svg') {
     return {
       fontSize: fontSize,
@@ -317,12 +397,12 @@ var getFontStyle = exports.getFontStyle = function getFontStyle(_ref7, type) {
     lineHeight: lineHeight + "px" //不加px默认是倍数关系
   };
 };
-var formatFont = exports.formatFont = function formatFont(_ref8, type) {
-  var color = _ref8.color,
-    fill = _ref8.fill,
-    bold = _ref8.bold,
-    italic = _ref8.italic,
-    rest = (0, _objectWithoutProperties2["default"])(_ref8, _excluded);
+var formatFont = exports.formatFont = function formatFont(_ref10, type) {
+  var color = _ref10.color,
+    fill = _ref10.fill,
+    bold = _ref10.bold,
+    italic = _ref10.italic,
+    rest = (0, _objectWithoutProperties2["default"])(_ref10, _excluded);
   if (type == 'svg') {
     return _objectSpread({
       fill: fill || color,
@@ -336,27 +416,27 @@ var formatFont = exports.formatFont = function formatFont(_ref8, type) {
     fontStyle: typeof italic == "string" ? italic : italic ? 'italic' : 'normal'
   }, rest);
 };
-var getMargin = exports.getMargin = function getMargin(_ref9) {
-  var marginTop = _ref9.marginTop,
-    marginRight = _ref9.marginRight,
-    marginBottom = _ref9.marginBottom,
-    marginLeft = _ref9.marginLeft;
+var getMargin = exports.getMargin = function getMargin(_ref11) {
+  var marginTop = _ref11.marginTop,
+    marginRight = _ref11.marginRight,
+    marginBottom = _ref11.marginBottom,
+    marginLeft = _ref11.marginLeft;
   return marginTop + 'px ' + marginRight + 'px ' + marginBottom + 'px ' + marginLeft + 'px';
 };
-var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref10) {
-  var _ref10$x = _ref10.x,
-    x = _ref10$x === void 0 ? 0 : _ref10$x,
-    _ref10$y = _ref10.y,
-    y = _ref10$y === void 0 ? 0 : _ref10$y,
-    _ref10$z = _ref10.z,
-    z = _ref10$z === void 0 ? 0 : _ref10$z;
+var getTranslate3d = exports.getTranslate3d = function getTranslate3d(_ref12) {
+  var _ref12$x = _ref12.x,
+    x = _ref12$x === void 0 ? 0 : _ref12$x,
+    _ref12$y = _ref12.y,
+    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)';
 };
-var getTranslate2d = exports.getTranslate2d = function getTranslate2d(_ref11) {
-  var _ref11$x = _ref11.x,
-    x = _ref11$x === void 0 ? 0 : _ref11$x,
-    _ref11$y = _ref11.y,
-    y = _ref11$y === void 0 ? 0 : _ref11$y;
+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 + ')';
 };
 function band() {
@@ -370,9 +450,6 @@ function band() {
     round = false,
     paddingInner = 0,
     paddingOuter = 0,
-    // seriesPaddingInner = 0,
-    // seriesPaddingOuter = 0,
-    // seriesLength = 0,
     align = 0.5;
   delete scale.unknown;
   function rescale() {
@@ -394,12 +471,12 @@ function band() {
     return arguments.length ? (domain(_), rescale()) : domain();
   };
   scale.range = function (_) {
-    var _ref12;
-    return arguments.length ? (_ref12 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref12[0], r1 = _ref12[1], r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
+    var _ref14;
+    return arguments.length ? (_ref14 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref14[0], r1 = _ref14[1], r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
   };
   scale.rangeRound = function (_) {
-    var _ref13;
-    return _ref13 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref13[0], r1 = _ref13[1], r0 = +r0, r1 = +r1, round = true, rescale();
+    var _ref15;
+    return _ref15 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref15[0], r1 = _ref15[1], r0 = +r0, r1 = +r1, round = true, rescale();
   };
   scale.bandwidth = function () {
     return bandwidth;
@@ -448,14 +525,14 @@ function initRange(domain, range) {
 }
 var getStacks = exports.getStacks = function getStacks(series) {
   var tmp = [];
-  series.forEach(function (_ref14, name) {
-    var type = _ref14.type,
-      stack = _ref14.stack,
-      yOrZ = _ref14.yOrZ;
-    var current = tmp.find(function (_ref15) {
-      var _type = _ref15.type,
-        _stack = _ref15.stack,
-        _yOrZ = _ref15.yOrZ;
+  series.forEach(function (_ref16, name) {
+    var type = _ref16.type,
+      stack = _ref16.stack,
+      yOrZ = _ref16.yOrZ;
+    var current = tmp.find(function (_ref17) {
+      var _type = _ref17.type,
+        _stack = _ref17.stack,
+        _yOrZ = _ref17.yOrZ;
       return _type == type && stack && _stack == stack && yOrZ == _yOrZ;
     });
     if (!current) {
@@ -485,9 +562,9 @@ var getStacks = exports.getStacks = function getStacks(series) {
   });
   return tmp;
 };
-var dataYOrZ = exports.dataYOrZ = function dataYOrZ(data, _ref16) {
-  var seriesY = _ref16.y,
-    seriesZ = _ref16.z;
+var dataYOrZ = exports.dataYOrZ = function dataYOrZ(data, _ref18) {
+  var seriesY = _ref18.y,
+    seriesZ = _ref18.z;
   var tmp = {
     y: [],
     z: []
@@ -526,11 +603,11 @@ var resetStacks = exports.resetStacks = function resetStacks(stacks) {
   });
 };
 var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack, stackMap) {
-  return stackMap.find(function (_ref17) {
-    var _stack = _ref17.stack,
-      _type = _ref17.type,
-      _yOrZ = _ref17.yOrZ,
-      _s = _ref17.s;
+  return stackMap.find(function (_ref19) {
+    var _stack = _ref19.stack,
+      _type = _ref19.type,
+      _yOrZ = _ref19.yOrZ,
+      _s = _ref19.s;
     return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
   });
 };
@@ -562,6 +639,8 @@ var reverseGradientStops = function reverseGradientStops(gradient) {
     })
   });
 };
+
+// ===================== 核心改动：改造 getBandBackground 方法 =====================
 var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill, y) {
   if (!(pattern && pattern.path)) {
     return (0, _utils.getColor)(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
@@ -570,20 +649,24 @@ var getBandBackground = exports.getBandBackground = function getBandBackground(p
     var _pattern$backgroundSi = pattern.backgroundSize,
       backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,
       _pattern = (0, _objectWithoutProperties2["default"])(pattern, _excluded2);
-    return 'center top / ' + backgroundSize + ' url("data:image/svg+xml,' + encodeURIComponent((0, _server.renderToStaticMarkup)(/*#__PURE__*/React.createElement(SvgBackground, {
+    // 替换原 SVG DataURL 为 Canvas DataURL
+    var canvasDataUrl = renderCanvasBackground({
       fill: fill,
       pattern: _pattern
-    }))) + '")';
-  } catch (e) {}
+    });
+    return 'center top / ' + backgroundSize + ' url("' + canvasDataUrl + '")';
+  } catch (e) {
+    console.error('Canvas 绘制背景失败:', e);
+  }
   return "";
 };
 var getBandwidth = exports.getBandwidth = function getBandwidth(step, paddingOuter) {
   return step * (1 - paddingOuter);
 };
-var getBandSeriesStepAndWidth = exports.getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref18) {
-  var width = _ref18.width,
-    paddingInner = _ref18.paddingInner,
-    bandLength = _ref18.bandLength;
+var getBandSeriesStepAndWidth = exports.getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref20) {
+  var width = _ref20.width,
+    paddingInner = _ref20.paddingInner,
+    bandLength = _ref20.bandLength;
   var seriesStep = width / (bandLength == 0 ? 1 : bandLength);
   var seriesWidth = seriesStep * (1 - paddingInner);
   return {
@@ -591,14 +674,14 @@ var getBandSeriesStepAndWidth = exports.getBandSeriesStepAndWidth = function get
     seriesWidth: seriesWidth
   };
 };
-var getSeriesInfo = exports.getSeriesInfo = function getSeriesInfo(_ref19) {
-  var step = _ref19.step,
-    _ref19$bandLength = _ref19.bandLength,
-    bandLength = _ref19$bandLength === void 0 ? 1 : _ref19$bandLength,
-    _ref19$paddingInner = _ref19.paddingInner,
-    paddingInner = _ref19$paddingInner === void 0 ? 0 : _ref19$paddingInner,
-    _ref19$paddingOuter = _ref19.paddingOuter,
-    paddingOuter = _ref19$paddingOuter === void 0 ? 0 : _ref19$paddingOuter;
+var getSeriesInfo = exports.getSeriesInfo = function getSeriesInfo(_ref21) {
+  var step = _ref21.step,
+    _ref21$bandLength = _ref21.bandLength,
+    bandLength = _ref21$bandLength === void 0 ? 1 : _ref21$bandLength,
+    _ref21$paddingInner = _ref21.paddingInner,
+    paddingInner = _ref21$paddingInner === void 0 ? 0 : _ref21$paddingInner,
+    _ref21$paddingOuter = _ref21.paddingOuter,
+    paddingOuter = _ref21$paddingOuter === void 0 ? 0 : _ref21$paddingOuter;
   if (bandLength == 0) return {
     seriesWidth: step,
     seriesStep: step,
@@ -705,54 +788,29 @@ var sortPie = exports.sortPie = function sortPie(data, order) {
   });
   switch (order) {
     case '':
-      _data.sort(function (_ref20, _ref21) {
-        var a = _ref20.index;
-        var b = _ref21.index;
+      _data.sort(function (_ref22, _ref23) {
+        var a = _ref22.index;
+        var b = _ref23.index;
         return (0, _d3v.ascending)(a, b);
       });
       break;
     case 'desc':
-      _data.sort(function (_ref22, _ref23) {
-        var a = _ref22.value;
-        var b = _ref23.value;
+      _data.sort(function (_ref24, _ref25) {
+        var a = _ref24.value;
+        var b = _ref25.value;
         return (0, _d3v.descending)(a, b);
       });
       break;
     case 'asc':
-      _data.sort(function (_ref24, _ref25) {
-        var a = _ref24.value;
-        var b = _ref25.value;
+      _data.sort(function (_ref26, _ref27) {
+        var a = _ref26.value;
+        var b = _ref27.value;
         return (0, _d3v.ascending)(a, b);
       });
       break;
   }
   return _data;
 };
-
-// const getDataWithPercent = (data = [], precision = 0, type) => {
-//   const digits = Math.pow(10, precision);
-//   const targetSeats = digits * 100;
-
-//   const total = sum(data, (d) => d.value);
-
-//   const votesPerQuota = data.map((d, index) => ({
-//     ...d,
-//     vote: Math.round((d.value / total) * digits * 100),
-//     index,
-//   }));
-//   const currentSum = sum(votesPerQuota, (d) => d.vote);
-//   const remainder = targetSeats - currentSum;
-//   console.log(type+":",votesPerQuota, toFixed);
-//   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
-
-//   const tmp = votesPerQuota.map(({ vote, ...data }, index) => ({
-//     ...data,
-//     percent: toFixed((vote + (index < remainder ? 1 : 0)) / digits, precision),
-//   }));
-
-//   return tmp;
-// };
-
 var getDataWithPercent = exports.getDataWithPercent = function getDataWithPercent() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/TextOverflow.tsx

@@ -34,12 +34,14 @@ export default memo(
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
           };
-        case "break-word":
-          return {
-            wordBreak: "break-all",
-            wordWrap: "break-word",
-            whiteSpace: "pre-line",
-          };
+          case "break-word":
+            return {
+              wordBreak: "normal",
+              overflowWrap: "break-word",
+              hyphens: "auto",
+              whiteSpace: "normal",
+              wordWrap: "break-word",
+            };
         case "marquee":
           return {
             whiteSpace: "nowrap",

package/src/formatter/legend.js

@@ -49,11 +49,11 @@ export const pieLegendFormatter = (
   const textMarginLeft = 5;
 
   // 1. 计算每列宽度（加上间距）
-  const columns = [];
+  let columns = [];
   if (showName) columns.push(`${props.nameMaxWidth}px`);
   if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
   if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
-
+  columns[columns.length-1]="auto"
   return (
     <>
       {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
@@ -84,6 +84,7 @@ export const pieLegendFormatter = (
               alignItems: 'center',
               justifyContent: valueAlign=="left"?"flex-start":valueAlign=="right"?"flex-end":'center',
               textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center",
+              //------------
             }}
           >
             <span><SplitText value={data.y} config={splitConfig} /></span>

package/src/utils/index.js

@@ -18,6 +18,76 @@ const defaultLineIcon = {
   height: 2,
   background: defaultBackground,
 };
+const renderCanvasBackground = ({
+  fill: {
+    type,
+    pure,
+    linear: { angle, opacity, stops },
+  },
+  pattern: {
+    path = '',
+    width = '100%',
+    height = '100%',
+    boderColor: stroke = 'transparent',
+    boderWidth = 0,
+  },
+}) => {
+  // 处理宽高（支持百分比/数字）
+  const canvasWidth = width === '100%' ? 200 : Number(width) || 200; // 百分比默认200，可根据实际场景调整
+  const canvasHeight = height === '100%' ? 200 : Number(height) || 200;
+
+  // 创建离屏 Canvas
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+
+  // 清空画布
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+  // 1. 解析 SVG Path 为 Canvas Path2D
+  const path2D = new Path2D(path);
+
+  // 2. 处理填充（纯色/渐变）
+  if (type === 'pure') {
+    ctx.fillStyle = pure;
+  } else {
+    // 线性渐变（对应原 SVG linearGradient）
+    const centerX = canvasWidth / 2;
+    const centerY = canvasHeight / 2;
+    const rad = (angle + 180) * Math.PI / 180; // 旋转角度转弧度
+    const gradientLength = Math.hypot(canvasWidth, canvasHeight); // 渐变长度取对角线
+
+    // 计算渐变起点/终点（匹配 SVG rotate 效果）
+    const startX = centerX - Math.sin(rad) * gradientLength;
+    const startY = centerY - Math.cos(rad) * gradientLength;
+    const endX = centerX + Math.sin(rad) * gradientLength;
+    const endY = centerY + Math.cos(rad) * gradientLength;
+
+    // 创建渐变
+    const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+    stops.forEach(({ offset, color }) => {
+      gradient.addColorStop(offset / 100, color);
+      gradient.opacity = opacity; // 透明度
+    });
+    ctx.fillStyle = gradient;
+  }
+
+  // 3. 处理描边
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = boderWidth;
+
+  // 4. 绘制路径
+  ctx.fill(path2D);
+  if (boderWidth > 0) {
+    ctx.stroke(path2D);
+  }
+
+  // 5. 转换为 DataURL（替代 SVG DataURL）
+  return canvas.toDataURL('image/png');
+};
+
+// 原 SvgBackground 组件保留（兼容旧逻辑，也可删除）
 const SvgBackground = ({
   fill: {
     type,
@@ -67,6 +137,8 @@ const SvgBackground = ({
     </svg>
   );
 };
+
+// ===================== 原有方法（仅改造 getBandBackground） =====================
 const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
   if (type == 'pure') {
     return [
@@ -76,20 +148,22 @@ const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
   }
   return stops.map(({ color, offset }) => ({ color, offset: offset / 100 }));
 };
-const getMultiColorStr = (colors)=>{
-  if(colors){
+
+const getMultiColorStr = (colors) => {
+  if (colors) {
     const { stops, angle } = colors;
     let result = 'linear-gradient(' + angle + 'deg, ';
     const stops_ = JSON.parse(JSON.stringify(stops));
-    stops_.sort((a,b)=>a.offset-b.offset);
-    for(let i=0;i<stops_.length;i++){
+    stops_.sort((a, b) => a.offset - b.offset);
+    for (let i = 0; i < stops_.length; i++) {
       const { color, offset } = stops_[i];
       result += `${color} ${offset}%,`;
     }
-    return result.slice(0,-1)+")";
+    return result.slice(0, -1) + ')';
   }
-}
-const getIcon = (type, icon, lineType="solid") => {
+};
+
+const getIcon = (type, icon, lineType = "solid") => {
   switch (type) {
     case 'area':
     case 'line':
@@ -99,7 +173,7 @@ const getIcon = (type, icon, lineType="solid") => {
             ...defaultLineIcon,
             ...icon,
             minWidth: icon.width,
-            background:lineType=="solid"?color:`linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
+            background: lineType == "solid" ? color : `linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
           }
         : defaultLineIcon;
     default:
@@ -150,6 +224,7 @@ const dateFormat = (date, fmt) => {
       );
   return fmt;
 };
+
 const getBreakWord = (str, breakNumber) => {
   const re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
   return str.match(re);
@@ -164,27 +239,27 @@ const getTicksOfAxis = (domain, ticksCount, showLast) => {
   if (showLast) {
     let count = ticksCount, gap = 0;
     step = (len - 1) / (count - 1);
-    const maxGap = Math.max(count-2,len-count);
+    const maxGap = Math.max(count - 2, len - count);
     //循环计算出最接近count值且能让step为整数的值
-    if(!Number.isInteger(step)){
-      while(gap<=maxGap){
+    if (!Number.isInteger(step)) {
+      while (gap <= maxGap) {
         gap++;
-        const left = (len-1)/(count-gap-1), right = (len-1)/(count+gap-1);
-        if(Number.isInteger(left)){
+        const left = (len - 1) / (count - gap - 1), right = (len - 1) / (count + gap - 1);
+        if (Number.isInteger(left)) {
           step = left;
           break;
         }
-        if(Number.isInteger(right)){
+        if (Number.isInteger(right)) {
           step = right;
           break;
         }
       }
     }
-    if(!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
+    if (!Number.isInteger(step)) step = 1; //如果找不到整数的step，直接取1，返回所有刻度
     ticksArr = domain.filter(function (d, i) {
       return i % step === 0;
     });
-  }else{
+  } else {
     ticksArr = domain.filter(function (d, i) {
       return i % (step + 1) === 0;
     });
@@ -224,6 +299,7 @@ const getTickCoord = ({
   }
   return { x1, x2, y1, y2 };
 };
+
 const getGridCoord = ({ orientation, coordinate, end }) => {
   let x1, x2, y1, y2;
   switch (orientation) {
@@ -265,7 +341,7 @@ const getMousePos = (evt, dom) => {
 };
 
 const getFontStyle = (
-  { color, bold, italic, fontSize, fontFamily, letterSpacing,lineHeight },
+  { color, bold, italic, fontSize, fontFamily, letterSpacing, lineHeight },
   type
 ) => {
   if (type == 'svg') {
@@ -276,7 +352,7 @@ const getFontStyle = (
       fill: color,
       fontWeight: bold ? 'bold' : 'normal',
       fontStyle: italic ? 'italic' : 'normal',
-      lineHeight:lineHeight+"px"
+      lineHeight: lineHeight + "px"
     };
   }
   return {
@@ -286,26 +362,26 @@ const getFontStyle = (
     color,
     fontWeight: bold ? 'bold' : 'normal',
     fontStyle: italic ? 'italic' : 'normal',
-    lineHeight:lineHeight+"px"//不加px默认是倍数关系
+    lineHeight: lineHeight + "px"//不加px默认是倍数关系
   };
 };
-const formatFont=({ color, fill, bold, italic, ...rest },
-  type)=>{
+
+const formatFont = ({ color, fill, bold, italic, ...rest }, type) => {
   if (type == 'svg') {
     return {
       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 {
-    color:color|| fill,
-    fontWeight: typeof bold=="string" ? bold : ( bold ? 'bold' : 'normal'),
-    fontStyle: typeof italic=="string"? italic : (italic ? 'italic' : 'normal'),
+    color: color || fill,
+    fontWeight: typeof bold == "string" ? bold : (bold ? 'bold' : 'normal'),
+    fontStyle: typeof italic == "string" ? italic : (italic ? 'italic' : 'normal'),
     ...rest
   };
-}
+};
 
 const getMargin = ({ marginTop, marginRight, marginBottom, marginLeft }) =>
   marginTop +
@@ -316,9 +392,12 @@ const getMargin = ({ marginTop, marginRight, marginBottom, marginLeft }) =>
   'px ' +
   marginLeft +
   'px';
+
 const getTranslate3d = ({ x = 0, y = 0, z = 0 }) =>
   'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
+
 const getTranslate2d = ({ x = 0, y = 0 }) => 'translate(' + x + ', ' + y + ')';
+
 function band() {
   var scale = ordinal().unknown(undefined),
     domain = scale.domain,
@@ -330,9 +409,6 @@ function band() {
     round = false,
     paddingInner = 0,
     paddingOuter = 0,
-    // seriesPaddingInner = 0,
-    // seriesPaddingOuter = 0,
-    // seriesLength = 0,
     align = 0.5;
 
   delete scale.unknown;
@@ -515,49 +591,53 @@ const getCurrentStack = (stack, stackMap) =>
       _yOrZ == stack.yOrZ &&
       _s.includes(stack.name)
   );
-  const reverseGradientStops=(gradient)=>{
-    if (gradient.type !== 'linear' || !gradient.linear?.stops) {
-      return gradient;
-    }
-    const stops = gradient.linear.stops;
-    //先按 offset 排序（升序），确保输入是规范的
-    const sortedStops = [...stops].sort((a, b) => a.offset - b.offset);
-  
-    // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
-    // 颜色保持不变，只是位置镜像翻转
-    const reversedStops = sortedStops.map(stop => ({
-      ...stop,
-      offset: 100 - stop.offset
-    }));
-    //再按新的 offset 升序排序，确保输出结构正确
-    const finalStops = reversedStops.sort((a, b) => a.offset - b.offset);
-  
-    return {
-      ...gradient,
-      linear: {
-        ...gradient.linear,
-        stops: finalStops
-      }
-    };
+
+const reverseGradientStops = (gradient) => {
+  if (gradient.type !== 'linear' || !gradient.linear?.stops) {
+    return gradient;
   }
-const getBandBackground = (pattern, fill,y) => {
-  if (!(pattern && pattern.path)){
-    return getColor(y<0?reverseGradientStops(fill):fill);//小于0颜色翻转
+  const stops = gradient.linear.stops;
+  //先按 offset 排序（升序），确保输入是规范的
+  const sortedStops = [...stops].sort((a, b) => a.offset - b.offset);
+
+  // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
+  // 颜色保持不变，只是位置镜像翻转
+  const reversedStops = sortedStops.map(stop => ({
+    ...stop,
+    offset: 100 - stop.offset
+  }));
+  //再按新的 offset 升序排序，确保输出结构正确
+  const finalStops = reversedStops.sort((a, b) => a.offset - b.offset);
+
+  return {
+    ...gradient,
+    linear: {
+      ...gradient.linear,
+      stops: finalStops
+    }
+  };
+};
+
+// ===================== 核心改动：改造 getBandBackground 方法 =====================
+const getBandBackground = (pattern, fill, y) => {
+  if (!(pattern && pattern.path)) {
+    return getColor(y < 0 ? reverseGradientStops(fill) : fill);//小于0颜色翻转
   }
-  try{
+  try {
     const { backgroundSize = '100% 100%', ..._pattern } = pattern;
+    // 替换原 SVG DataURL 为 Canvas DataURL
+    const canvasDataUrl = renderCanvasBackground({ fill, pattern: _pattern });
     return (
       'center top / ' +
       backgroundSize +
-      ' url("data:image/svg+xml,' +
-      encodeURIComponent(
-        renderToStaticMarkup(<SvgBackground fill={fill} pattern={_pattern} />)
-      ) +
-      '")'
+      ' url("' + canvasDataUrl + '")'
     );
-  }catch(e){}
+  } catch (e) {
+    console.error('Canvas 绘制背景失败:', e);
+  }
   return "";
 };
+
 const getBandwidth = (step, paddingOuter) => step * (1 - paddingOuter);
 
 const getBandSeriesStepAndWidth = ({ width, paddingInner, bandLength }) => {
@@ -708,37 +788,13 @@ const sortPie = (data, order) => {
   return _data;
 };
 
-// const getDataWithPercent = (data = [], precision = 0, type) => {
-//   const digits = Math.pow(10, precision);
-//   const targetSeats = digits * 100;
-
-//   const total = sum(data, (d) => d.value);
-
-//   const votesPerQuota = data.map((d, index) => ({
-//     ...d,
-//     vote: Math.round((d.value / total) * digits * 100),
-//     index,
-//   }));
-//   const currentSum = sum(votesPerQuota, (d) => d.vote);
-//   const remainder = targetSeats - currentSum;
-//   console.log(type+":",votesPerQuota, toFixed);
-//   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
-
-//   const tmp = votesPerQuota.map(({ vote, ...data }, index) => ({
-//     ...data,
-//     percent: toFixed((vote + (index < remainder ? 1 : 0)) / digits, precision),
-//   }));
-
-//   return tmp;
-// };
-
 const getDataWithPercent = (data = [], precision = 0) => {
   let objData = [];
   function getPercentWithPrecision(valueList, idx, precision) {
     if (!valueList[idx]) {
       return 0;
     }
-    const sum = valueList.reduce( function (acc, val) {
+    const sum = valueList.reduce(function (acc, val) {
       return acc + val.value;
     }, 0);
     if (sum === 0) {
@@ -752,7 +808,7 @@ const getDataWithPercent = (data = [], precision = 0) => {
     const seats = votesPerQuota.map(function (votes) {
       return Math.floor(votes);
     });
-    let currentSum = seats.reduce( function (acc, val) {
+    let currentSum = seats.reduce(function (acc, val) {
       return acc + val;
     }, 0);
     const remainder = votesPerQuota.map(function (votes, idx) {
@@ -800,10 +856,10 @@ const reduceConfig = (config = []) => {
 };
 
 //限制value的值在min和max之间
-const mathR=(value, range)=>{
-  const [min,max] = range;
-  return Math.max(min,Math.min(value,max));
-}
+const mathR = (value, range) => {
+  const [min, max] = range;
+  return Math.max(min, Math.min(value, max));
+};
 
 export {
   dateFormat,
@@ -838,5 +894,7 @@ export {
   getDataWithPercent,
   reduceConfig,
   getSeriesInfo,
-  mathR
-};
+  mathR,
+  renderCanvasBackground, // 导出 Canvas 绘制方法（可选）
+  SvgBackground // 保留原 SVG 组件（兼容旧逻辑，可选删除）
+};