@easyv/charts 1.3.33 → 1.3.35

package/lib/components/Axis.js

@@ -244,7 +244,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       tickLine = _ref6$config.tickLine,
       gridLine = _ref6$config.gridLine,
       unit = _ref6$config.unit,
-      positions = _ref6.positions;
+      positions = _ref6.positions,
+      xLineRange = _ref6.xLineRange;
   if (!(on && ticks.length > 0)) return null;
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
@@ -268,7 +269,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
       var _tickSize = tickLine.tickSize || tickSize;
 
-      return /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+      var gridCoord = (0, _utils.getGridCoord)({
+        orientation: orientation,
+        coordinate: coordinate,
+        end: orientation == 'left' || orientation == 'right' ? width : height
+      });
+      var x1 = gridCoord.x1;
+      return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
         className: "__easyv-tickLine",
         key: index,
         config: tickLine
@@ -289,7 +296,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
     var _tickSize = tickLine.tickSize || tickSize;
 
-    return /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+    var gridCoord = (0, _utils.getGridCoord)({
+      orientation: orientation,
+      coordinate: coordinate,
+      end: orientation == 'left' || orientation == 'right' ? width : height
+    });
+    var x1 = gridCoord.x1;
+    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
       className: "__easyv-tickLine",
       key: index,
       config: tickLine
@@ -306,7 +319,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
     var _tickSize = tickLine.tickSize || tickSize;
 
-    return /*#__PURE__*/_react["default"].createElement("g", {
+    var gridCoord = (0, _utils.getGridCoord)({
+      orientation: orientation,
+      coordinate: coordinate,
+      end: orientation == 'left' || orientation == 'right' ? width : height
+    });
+    var x1 = gridCoord.x1;
+    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, label && /*#__PURE__*/_react["default"].createElement(Label, {
       className: "__easyv-label",
@@ -321,11 +340,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
       className: "__easyv-gridLine",
       config: gridLine
-    }, (0, _utils.getGridCoord)({
-      orientation: orientation,
-      coordinate: coordinate,
-      end: orientation == 'left' || orientation == 'right' ? width : height
-    }))));
+    }, gridCoord)));
   }), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
   })));

package/lib/components/CartesianChart.js

@@ -43,6 +43,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$chart$mar = _ref$config$chart.margin,
       marginLeft = _ref$config$chart$mar.marginLeft,
       marginTop = _ref$config$chart$mar.marginTop,
+      marginRight = _ref$config$chart$mar.marginRight,
+      marginBottom = _ref$config$chart$mar.marginBottom,
       animation = _ref$config$chart.animation,
       legend = _ref$config$chart.legend,
       series = _ref$config.series,
@@ -88,6 +90,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     context: context
   });
   var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
+  var xLineRange = width - marginLeft - marginRight;
 
   var _useTooltip = (0, _hooks.useTooltip)({
     svg: svg,
@@ -152,11 +155,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
     var config = item.axisType == 'x' ? axisX : item;
     return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
-      triggerClick: onInteraction
+      triggerClick: onInteraction,
+      xLineRange: xLineRange
     }, config, {
       key: index
     }));
-  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), series.map(function (_ref2, index) {
+  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: {
+      width: width - marginLeft - marginRight,
+      height: height - marginTop - marginBottom
+    }
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    height: "100%"
+  }, series.map(function (_ref2, index) {
     var Component = _ref2.Component,
         yOrZ = _ref2.yOrZ,
         config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
@@ -182,7 +194,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
-  }), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
+  }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {

package/lib/components/Legend.js

@@ -83,7 +83,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var dataset = e.currentTarget.dataset;
     var name = dataset.name;
     filterData && interactive && filterData(name);
-  }, [interactive, filterData]); //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
+  }, [interactive, filterData]);
 
   if (judge == 0) {
     _series.forEach(function (d) {

package/lib/components/PieChart.js

@@ -727,7 +727,9 @@ var Current = function Current(_ref9) {
       showName = _ref9$config$name.show,
       nameColor = _ref9$config$name.sameColor,
       nameFont = _ref9$config$name.font,
-      textBreak = _ref9$config$name.textBreak,
+      maxWidth = _ref9$config$name.maxWidth,
+      textOverflow = _ref9$config$name.textOverflow,
+      speed = _ref9$config$name.speed,
       _ref9$config$percent = _ref9$config.percent,
       showPercent = _ref9$config$percent.show,
       percentColor = _ref9$config$percent.sameColor,
@@ -776,17 +778,6 @@ var Current = function Current(_ref9) {
       percent = currentData.percent;
   var nameTemp = displayName ? displayName : fieldName; //类目名
 
-  var nameList = [];
-
-  if (textBreak) {
-    //如果限制了首行字符，则切割组件
-    while (nameTemp.length > textBreak) {
-      nameList.push(nameTemp.slice(0, textBreak));
-      nameTemp = nameTemp.slice(textBreak);
-    }
-  }
-
-  nameList.push(nameTemp);
   var foreignStyle = {
     //foreignObject标签样式，
     width: width,
@@ -809,20 +800,19 @@ var Current = function Current(_ref9) {
     style: foreignStyle
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: boxStyle
-  }, //类目名称
-  showName && /*#__PURE__*/_react["default"].createElement("div", {
-    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(nameFont)), {}, {
+  }, showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
+    type: textOverflow,
+    value: nameTemp,
+    speed: speed,
+    style: _objectSpread(_objectSpread({
+      maxWidth: maxWidth,
+      display: textOverflow == "marquee" ? "flex" : "bolck",
+      justifyContent: "center"
+    }, (0, _utils.getFontStyle)(nameFont)), {}, {
       margin: gap / 2 + 'px 0',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
       color: nameColor ? seriesColor : nameFont.color
     })
-  }, nameList.map(function (d, i) {
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      key: i
-    }, d);
-  })), //真实值
+  }), //真实值
   showValue && /*#__PURE__*/_react["default"].createElement("span", {
     style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
       transform: 'translate(' + translateValueX + 'px,' + translateValueY + 'px)',
@@ -860,6 +850,9 @@ var Label = function Label(_ref10) {
       _ref10$config$name = _ref10$config.name,
       showName = _ref10$config$name.show,
       nameFont = _ref10$config$name.font,
+      maxWidth = _ref10$config$name.maxWidth,
+      textOverflow = _ref10$config$name.textOverflow,
+      speed = _ref10$config$name.speed,
       _ref10$config$value = _ref10$config.value,
       showValue = _ref10$config$value.show,
       valueFont = _ref10$config$value.font,
@@ -870,14 +863,10 @@ var Label = function Label(_ref10) {
       _ref10$config$value$s2 = _ref10$config$value$s.translate,
       suffixTranslateX = _ref10$config$value$s2.x,
       suffixTranslateY = _ref10$config$value$s2.y,
-      _ref10$config$value$s3 = _ref10$config$value.sameColor,
-      valueSameColor = _ref10$config$value$s3 === void 0 ? false : _ref10$config$value$s3,
       _ref10$config$percent = _ref10$config.percent,
       showPercent = _ref10$config$percent.show,
       percentFont = _ref10$config$percent.font,
       precision = _ref10$config$percent.precision,
-      _ref10$config$percent2 = _ref10$config$percent.sameColor,
-      percentSameColor = _ref10$config$percent2 === void 0 ? false : _ref10$config$percent2,
       arcs = _ref10.arcs,
       judge = _ref10.judge,
       animation = _ref10.animation;
@@ -934,6 +923,7 @@ var Label = function Label(_ref10) {
 
     var _showValue = showValue && (value || showSuffix);
 
+    var nameStyle = (0, _utils.getFontStyle)(nameFont);
     return show && (_showName || showPercent || showValue) && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("path", {
@@ -944,34 +934,43 @@ var Label = function Label(_ref10) {
       d: 'M' + x1 + ', ' + y1 + 'L' + x2 + ', ' + y2 + 'L' + x3 + ', ' + y2,
       stroke: lineColor ? lineColor : type == 'pure' ? pure : stops[0].color,
       fill: "none"
-    }), /*#__PURE__*/_react["default"].createElement("text", {
-      className: animation ? _piechartModule["default"]['label-text'] : '',
-      style: {
-        animationDelay: "".concat(animation ? (actualIndex + 1) * 2000 - 800 : 0, "ms")
-      },
+    }), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      width: "1",
+      height: "1",
       x: _x,
       y: y2 + translateY,
-      dominantBaseline: "middle",
-      textAnchor: x3 >= 0 ? 'start' : 'end'
-    }, _showName && /*#__PURE__*/_react["default"].createElement("tspan", {
-      style: (0, _utils.getFontStyle)(nameFont, 'svg')
-    }, displayName + (showValue || showPercent ? ':' : '')), showValue && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tspan", {
-      x: !!(_showName && mode == 'vertical') ? _x : '',
-      dx: valueDx(_showName, mode),
-      dy: !!(_showName && mode == 'vertical') ? '1.5em' : '',
-      style: (0, _utils.getFontStyle)(valueFont, 'svg')
-    }, data.y), showSuffix && /*#__PURE__*/_react["default"].createElement("tspan", {
-      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont, 'svg')), {}, {
-        fontSize: suffixFontSize
-      }),
-      dx: suffixTranslateX,
-      dy: suffixTranslateY
-    }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("tspan", {
-      x: percentX(_showName, _showValue, mode, _x),
-      dx: percentDx(_showName, _showValue, mode),
-      dy: percentDy(_showName, _showValue, mode) + (_showValue && showSuffix ? suffixTranslateY * -1 : ''),
-      style: (0, _utils.getFontStyle)(percentFont, 'svg')
-    }, (_showValue ? '(' : '') + percent + '%' + (_showValue ? ')' : ''))));
+      style: {
+        overflow: "visible"
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: animation ? _piechartModule["default"]['label-text'] : "",
+      style: {
+        transform: "translate(0,-50%)",
+        whiteSpace: "nowrap",
+        "float": x3 >= 0 ? "left" : "right",
+        width: "max-content"
+      }
+    }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
+      type: textOverflow,
+      value: displayName + (showValue || showPercent ? ":" : ""),
+      speed: speed,
+      style: _objectSpread(_objectSpread({
+        maxWidth: maxWidth
+      }, nameStyle), {}, {
+        "float": mode == "horizontal" ? "left" : "none"
+      })
+    }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
+      style: (0, _utils.getFontStyle)(valueFont)
+    }, data.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        position: "relative",
+        fontSize: suffixFontSize,
+        marginLeft: suffixTranslateX,
+        top: suffixTranslateY
+      }
+    }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
+      style: (0, _utils.getFontStyle)(percentFont)
+    }, (_showValue ? '（' : '') + percent + '%' + (_showValue ? '）' : '')))));
   }));
 };
 
@@ -990,6 +989,9 @@ var RingLabel = function RingLabel(_ref12) {
       _ref12$config$name = _ref12$config.name,
       showName = _ref12$config$name.show,
       nameFont = _ref12$config$name.font,
+      maxWidth = _ref12$config$name.maxWidth,
+      textOverflow = _ref12$config$name.textOverflow,
+      speed = _ref12$config$name.speed,
       _ref12$config$value = _ref12$config.value,
       showValue = _ref12$config$value.show,
       valueFont = _ref12$config$value.font,
@@ -1000,14 +1002,10 @@ var RingLabel = function RingLabel(_ref12) {
       _ref12$config$value$s2 = _ref12$config$value$s.translate,
       suffixTranslateX = _ref12$config$value$s2.x,
       suffixTranslateY = _ref12$config$value$s2.y,
-      _ref12$config$value$s3 = _ref12$config$value.sameColor,
-      valueSameColor = _ref12$config$value$s3 === void 0 ? false : _ref12$config$value$s3,
       _ref12$config$percent = _ref12$config.percent,
       showPercent = _ref12$config$percent.show,
       percentFont = _ref12$config$percent.font,
       precision = _ref12$config$percent.precision,
-      _ref12$config$percent2 = _ref12$config$percent.sameColor,
-      percentSameColor = _ref12$config$percent2 === void 0 ? false : _ref12$config$percent2,
       judge = _ref12.judge,
       arcs = _ref12.arcs;
 
@@ -1074,35 +1072,44 @@ var RingLabel = function RingLabel(_ref12) {
       d: 'M' + x1 + ', ' + y1 + 'L' + x2 + ', ' + y2 + 'L' + x3 + ', ' + y2,
       stroke: lineColor ? lineColor : type == 'pure' ? pure : stops[0].color,
       fill: "none"
-    }), /*#__PURE__*/_react["default"].createElement("text", {
+    }), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      width: "1",
+      height: "1",
+      x: _x,
+      y: y2 + translateY,
+      style: {
+        overflow: "visible"
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: _piechartModule["default"]['label-text'],
       style: {
+        transform: "translate(0,-50%)",
+        whiteSpace: "nowrap",
+        "float": x3 >= 0 ? "left" : "right",
+        width: "max-content",
         animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms")
-      },
-      x: mode == 'horizontal' ? _x : x2,
-      y: y2 + translateY,
-      dominantBaseline: "middle",
-      textAnchor: x3 >= 0 ? 'start' : 'end'
-    }, _showName && /*#__PURE__*/_react["default"].createElement("tspan", {
-      dy: nameDy(_showValue, showPercent, mode, directionY),
-      style: (0, _utils.getFontStyle)(nameFont, 'svg')
-    }, displayName + (showValue || showPercent ? ':' : '')), _showValue && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tspan", {
-      x: _showName ? mode == 'horizontal' ? '' : x2 : '',
-      dx: valueDx(_showName, mode),
-      dy: valueDy(_showName, mode, directionY),
-      style: (0, _utils.getFontStyle)(valueFont, 'svg')
-    }, realData.y), showSuffix && /*#__PURE__*/_react["default"].createElement("tspan", {
-      style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont, 'svg')), {}, {
-        fontSize: suffixFontSize
-      }),
-      dx: suffixTranslateX,
-      dy: suffixTranslateY
-    }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("tspan", {
-      x: _showName ? _showValue ? '' : mode == 'vertical' ? x2 : '' : '',
-      dx: percentDx(_showName, _showValue, mode),
-      dy: percentDy_(_showName, _showValue, mode, directionY) + (_showValue && showSuffix ? suffixTranslateY * -1 : ''),
-      style: (0, _utils.getFontStyle)(percentFont, 'svg')
-    }, (_showValue ? '(' : '') + percent + '%' + (_showValue ? ')' : ''))));
+      }
+    }, _showName && /*#__PURE__*/_react["default"].createElement(_.TextOverflow, {
+      type: textOverflow,
+      value: displayName + (showValue || showPercent ? ":" : ""),
+      speed: speed,
+      style: _objectSpread(_objectSpread({
+        maxWidth: maxWidth
+      }, (0, _utils.getFontStyle)(nameFont)), {}, {
+        "float": mode == "horizontal" ? "left" : "none"
+      })
+    }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
+      style: (0, _utils.getFontStyle)(valueFont)
+    }, realData.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        position: "relative",
+        fontSize: suffixFontSize,
+        marginLeft: suffixTranslateX,
+        top: suffixTranslateY
+      }
+    }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
+      style: (0, _utils.getFontStyle)(percentFont)
+    }, (_showValue ? '（' : '') + percent + '%' + (_showValue ? '）' : '')))));
   }));
 };
 

package/lib/css/index.module.css

@@ -35,7 +35,8 @@
 
 .notShowAllStyle {
   display: flex;
-  width: 100%;
+  /* width: 100%; */
+  /* flex:1; */
   align-items: center;
   flex-direction: row;
   justify-content: space-between;

package/lib/formatter/legend.js

@@ -13,6 +13,8 @@ var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
 
 var _utils = require("../utils");
 
+var _components = require("../components");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -28,6 +30,9 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
   var _ref2$name = _ref2.name,
       showName = _ref2$name.show,
       nameFont = _ref2$name.font,
+      textOverflow = _ref2$name.textOverflow,
+      speed = _ref2$name.speed,
+      maxWidth = _ref2$name.maxWidth,
       _ref2$value = _ref2.value,
       showValue = _ref2$value.show,
       valueFont = _ref2$value.font,
@@ -55,15 +60,17 @@ var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight
     })
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle
-  }, showName && /*#__PURE__*/React.createElement("span", {
-    style: _objectSpread(_objectSpread({
-      paddingLeft: 5
-    }, (0, _utils.getFontStyle)(nameFont)), {}, {
-      whiteSpace: "nowrap"
-    })
-  }, displayName), showValue && /*#__PURE__*/React.createElement("span", {
+  }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
+    value: displayName,
+    type: textOverflow,
+    speed: speed,
+    style: _objectSpread({
+      width: maxWidth,
+      marginLeft: 5
+    }, (0, _utils.getFontStyle)(nameFont))
+  }), showValue && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(valueFont)), {}, {

package/package.json

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

package/src/components/Axis.tsx

@@ -229,11 +229,13 @@ export default memo(
     triggerClick,
     config: { on, label, axisLine, tickLine, gridLine, unit },
     positions,
+    xLineRange
   }: any) => {
     if (!(on && ticks.length > 0)) return null;
     const { width, height } = useContext(chartContext);
     const x = orientation == 'right' ? width : 0;
     const y = orientation == 'bottom' ? height : 0;
+
     return (
       <>
         {axisLine && tickLine && (
@@ -248,8 +250,17 @@ export default memo(
                         const coordinate = scaler(tick);
                         if (isNaN(coordinate)) return null;
                         const _tickSize = tickLine.tickSize || tickSize;
+                        const gridCoord = getGridCoord({
+                          orientation,
+                          coordinate,
+                          end:
+                            orientation == 'left' || orientation == 'right'
+                              ? width
+                              : height,
+                        });
+                        const x1 = gridCoord.x1;
                         return (
-                          <Line
+                          !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <Line
                             className='__easyv-tickLine'
                             key={index}
                             config={tickLine}
@@ -271,8 +282,17 @@ export default memo(
                       const coordinate = scaler(tick);
                       if (isNaN(coordinate)) return null;
                       const _tickSize = tickLine.tickSize || tickSize;
+                      const gridCoord = getGridCoord({
+                        orientation,
+                        coordinate,
+                        end:
+                          orientation == 'left' || orientation == 'right'
+                            ? width
+                            : height,
+                      });
+                      const x1 = gridCoord.x1;
                       return (
-                        <Line
+                        !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <Line
                           className='__easyv-tickLine'
                           key={index}
                           config={tickLine}
@@ -295,8 +315,17 @@ export default memo(
               const coordinate = scaler(tick);
               if (isNaN(coordinate)) return null;
               const _tickSize = tickLine.tickSize || tickSize;
+              const gridCoord = getGridCoord({
+                orientation,
+                coordinate,
+                end:
+                  orientation == 'left' || orientation == 'right'
+                    ? width
+                    : height,
+              });
+              const x1 = gridCoord.x1;
               return (
-                <g key={index}>
+                !(orientation=="bottom" && (x1<0 || x1>xLineRange)) && <g key={index}>
                   {label && (
                     <Label
                       className='__easyv-label'
@@ -314,14 +343,7 @@ export default memo(
                     <Line
                       className='__easyv-gridLine'
                       config={gridLine}
-                      {...getGridCoord({
-                        orientation,
-                        coordinate,
-                        end:
-                          orientation == 'left' || orientation == 'right'
-                            ? width
-                            : height,
-                      })}
+                      {...gridCoord}
                     />
                   )}
                 </g>

package/src/components/CartesianChart.js

@@ -37,7 +37,7 @@ const Chart = memo(
         dimension: {
           chartDimension: { height, width },
         },
-        margin: { marginLeft, marginTop },
+        margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
       },
@@ -71,6 +71,7 @@ const Chart = memo(
     const svg = createRef();
     const axes = useAxes({ axes: axesConfig, context });
     const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
+    const xLineRange = width-marginLeft-marginRight;
 
     const {
       x: tooltipX,
@@ -143,43 +144,49 @@ const Chart = memo(
           {[...axes.values()].reverse().map((item, index) => {
             const config = item.axisType == 'x' ? axisX : item;
             return (
-              <Axis triggerClick={onInteraction} {...config} key={index} />
+              <Axis triggerClick={onInteraction} xLineRange={xLineRange} {...config} key={index} />
             );
           })}
 
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
-          
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            return (
-              yAxis &&
-              Component && (
-                <Component
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={axisX}
-                  yAxis={yAxis}
-                  triggerClick={onInteraction}
-                />
-              )
-            );
-          })}
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            return (
-              yAxis && (
-                <Label
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={axisX}
-                  yAxis={yAxis}
-                  triggerClick={onInteraction}
-                />
-              )
-            );
-          })}
+          <foreignObject style={{
+            width:width-marginLeft-marginRight,
+            height:height-marginTop-marginBottom
+          }}>
+            <svg width="100%" height="100%">
+              {series.map(({ Component, yOrZ, ...config }, index) => {
+                const yAxis = axes.get(yOrZ);
+                return (
+                  yAxis &&
+                  Component && (
+                    <Component
+                      key={index}
+                      {...config}
+                      bandLength={bandLength}
+                      xAxis={axisX}
+                      yAxis={yAxis}
+                      triggerClick={onInteraction}
+                    />
+                  )
+                );
+              })}
+              {series.map(({ Component, yOrZ, ...config }, index) => {
+                const yAxis = axes.get(yOrZ);
+                return (
+                  yAxis && (
+                    <Label
+                      key={index}
+                      {...config}
+                      bandLength={bandLength}
+                      xAxis={axisX}
+                      yAxis={yAxis}
+                      triggerClick={onInteraction}
+                    />
+                  )
+                );
+              })}
+            </svg>
+          </foreignObject>
           {baseLineData &&
             baseLineData.length > 0 &&
             baseLineData.map((item, index) => {

package/src/components/Legend.js

@@ -48,12 +48,11 @@ export default memo(
       [interactive, filterData]
     );
 
-     //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
-     if (judge == 0) {
-       _series.forEach((d) => {
-         d.percent=0
-       })
-     }
+    if (judge == 0) {
+      _series.forEach((d) => {
+        d.percent=0
+      })
+    }
 
     return (
       <div

package/src/components/PieChart.js

@@ -11,7 +11,7 @@ import React, {
   useLayoutEffect,
   Fragment,
 } from 'react';
-import { ChartContainer, Carousel, Legend, ConicalGradient, Mapping } from '.';
+import { ChartContainer, Carousel, Legend, ConicalGradient, Mapping, TextOverflow } from '.';
 import { chartContext } from '../context';
 import {
   getFontStyle,
@@ -752,7 +752,7 @@ const Current = ({
   config: {
     show,
     gap,
-    name: { show: showName, sameColor: nameColor, font: nameFont, textBreak },
+    name: { show: showName, sameColor: nameColor, font: nameFont, maxWidth, textOverflow, speed },
     percent: {
       show: showPercent,
       sameColor: percentColor,
@@ -784,14 +784,12 @@ const Current = ({
     const legendDataWithPercent = getDataWithPercent(data, precision);
     return sortPie(legendDataWithPercent, '');
   }, [data, precision]);
-  
  
   //数据容错,当data都为零那么需要进行以下容错
   if (judge == 0) {
     _data.forEach((d) => {
-      d.percent = 0, d.value = 0
-      
-    })
+      d.percent = 0, d.value = 0;
+    });
   }
 
   const currentData = _data[currentIndex];
@@ -800,15 +798,7 @@ const Current = ({
 
   const { displayName, fieldName, value, percent } = currentData;
   let nameTemp = displayName ? displayName : fieldName; //类目名
-  let nameList = [];
-  if (textBreak) {
-    //如果限制了首行字符，则切割组件
-    while (nameTemp.length > textBreak) {
-      nameList.push(nameTemp.slice(0, textBreak));
-      nameTemp = nameTemp.slice(textBreak);
-    }
-  }
-  nameList.push(nameTemp);
+
   let foreignStyle = {
       //foreignObject标签样式，
       width,
@@ -834,25 +824,14 @@ const Current = ({
     show && (
       <foreignObject style={foreignStyle}>
         <div style={boxStyle}>
-          {
-            //类目名称
-            showName && (
-              <div
-                style={{
-                  ...getFontStyle(nameFont),
-                  margin: gap / 2 + 'px 0',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  color: nameColor ? seriesColor : nameFont.color,
-                }}
-              >
-                {nameList.map((d, i) => {
-                  return <span key={i}>{d}</span>;
-                })}
-              </div>
-            )
-          }
+          {showName &&<TextOverflow type={textOverflow} value={nameTemp} speed={speed} style={{
+            maxWidth,
+            display:textOverflow=="marquee"?"flex":"bolck",
+            justifyContent:"center",
+            ...getFontStyle(nameFont),
+            margin: gap / 2 + 'px 0',
+            color: nameColor ? seriesColor : nameFont.color,
+          }}></TextOverflow>}
           {
             //真实值
             showValue && (
@@ -923,7 +902,7 @@ const Label = ({
     mode,
     show,
     translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont },
+    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed },
     value: {
       show: showValue,
       font: valueFont,
@@ -932,14 +911,12 @@ const Label = ({
         text,
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
-      },
-      sameColor: valueSameColor = false,
+      }
     },
     percent: {
       show: showPercent,
       font: percentFont,
-      precision,
-      sameColor: percentSameColor = false,
+      precision
     },
   },
   arcs,
@@ -996,6 +973,7 @@ const Label = ({
 
           const _showName = showName && displayName;
           const _showValue = showValue && (value || showSuffix);
+          const nameStyle = getFontStyle(nameFont);
 
           return (
             show &&
@@ -1031,64 +1009,43 @@ const Label = ({
                   }
                   fill='none'
                 />
-                <text
-                  className={animation ? ringCss['label-text'] : ''}
-                  style={{
-                    animationDelay: `${
-                      animation ? (actualIndex + 1) * 2000 - 800 : 0
-                    }ms`,
-                  }}
-                  x={_x}
-                  y={y2 + translateY}
-                  dominantBaseline='middle'
-                  textAnchor={x3 >= 0 ? 'start' : 'end'}
-                >
-                  {_showName && (
-                    <tspan style={getFontStyle(nameFont, 'svg')}>
-                      {displayName + (showValue || showPercent ? ':' : '')}
-                    </tspan>
-                  )}
-                  {showValue && (
-                    <>
-                      <tspan
-                        x={!!(_showName && mode == 'vertical') ? _x : ''}
-                        dx={valueDx(_showName, mode)}
-                        dy={!!(_showName && mode == 'vertical') ? '1.5em' : ''}
-                        style={getFontStyle(valueFont, 'svg')}
-                      >
+                <foreignObject width="1" height="1" x={_x} y={y2+translateY} style={{overflow:"visible"}}>
+                  <div className={animation? ringCss['label-text']:""} style={{
+                    transform:"translate(0,-50%)",
+                    whiteSpace:"nowrap",
+                    float:x3>=0?"left":"right",
+                    width:"max-content"
+                  }}>
+                    {_showName &&<TextOverflow type={textOverflow} value={displayName+((showValue || showPercent)?":":"")} speed={speed} style={{
+                      maxWidth,
+                      ...nameStyle,
+                      float:mode=="horizontal"?"left":"none"
+                    }}></TextOverflow>}
+                    {
+                      showValue && <span style={getFontStyle(valueFont)}>
                         {data.y}
-                      </tspan>
-                      {showSuffix && (
-                        <tspan
-                          style={{
-                            ...getFontStyle(valueFont, 'svg'),
-                            fontSize: suffixFontSize,
-                          }}
-                          dx={suffixTranslateX}
-                          dy={suffixTranslateY}
-                        >
-                          {text}
-                        </tspan>
-                      )}
-                    </>
-                  )}
-                  {showPercent && (
-                    <tspan
-                      x={percentX(_showName, _showValue, mode, _x)}
-                      dx={percentDx(_showName, _showValue, mode)}
-                      dy={
-                        percentDy(_showName, _showValue, mode) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : '')
-                      }
-                      style={getFontStyle(percentFont, 'svg')}
-                    >
-                      {(_showValue ? '(' : '') +
-                        percent +
-                        '%' +
-                        (_showValue ? ')' : '')}
-                    </tspan>
-                  )}
-                </text>
+                        {showSuffix && <span style={{
+                          position:"relative",
+                          fontSize:suffixFontSize,
+                          marginLeft:suffixTranslateX,
+                          top:suffixTranslateY
+                        }}>
+                          { text }
+                        </span>}
+                      </span>
+                    }
+                    {
+                      showPercent && <span style={getFontStyle(percentFont)}>
+                        {
+                          (_showValue ? '（' : '') +
+                          percent +
+                          '%' +
+                          (_showValue ? '）' : '')
+                        }
+                      </span>
+                    }
+                  </div>
+                </foreignObject>
               </g>
             )
           );
@@ -1107,7 +1064,7 @@ const RingLabel = ({
     mode,
     show,
     translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont },
+    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed },
     value: {
       show: showValue,
       font: valueFont,
@@ -1116,14 +1073,12 @@ const RingLabel = ({
         text,
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
-      },
-      sameColor: valueSameColor = false,
+      }
     },
     percent: {
       show: showPercent,
       font: percentFont,
-      precision,
-      sameColor: percentSameColor = false,
+      precision
     },
   },
   judge,
@@ -1215,73 +1170,44 @@ const RingLabel = ({
                   }
                   fill='none'
                 />
-                <text
-                  className={ringCss['label-text']}
-                  style={{
+                <foreignObject width="1" height="1" x={_x} y={y2+translateY} style={{overflow:"visible"}}>
+                  <div className={ringCss['label-text']} style={{
+                    transform:"translate(0,-50%)",
+                    whiteSpace:"nowrap",
+                    float:x3>=0?"left":"right",
+                    width:"max-content",
                     animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
-                  }}
-                  x={mode == 'horizontal' ? _x : x2}
-                  y={y2 + translateY}
-                  dominantBaseline='middle'
-                  textAnchor={x3 >= 0 ? 'start' : 'end'}
-                >
-                  {_showName && (
-                    <tspan
-                      dy={nameDy(_showValue, showPercent, mode, directionY)}
-                      style={getFontStyle(nameFont, 'svg')}
-                    >
-                      {displayName + (showValue || showPercent ? ':' : '')}
-                    </tspan>
-                  )}
-                  {_showValue && (
-                    <>
-                      <tspan
-                        x={_showName ? (mode == 'horizontal' ? '' : x2) : ''}
-                        dx={valueDx(_showName, mode)}
-                        dy={valueDy(_showName, mode, directionY)}
-                        style={getFontStyle(valueFont, 'svg')}
-                      >
+                  }}>
+                    {_showName &&<TextOverflow type={textOverflow} value={displayName+((showValue || showPercent)?":":"")} speed={speed} style={{
+                      maxWidth,
+                      ...getFontStyle(nameFont),
+                      float:mode=="horizontal"?"left":"none"
+                    }}></TextOverflow>}
+                    {
+                      showValue && <span style={getFontStyle(valueFont)}>
                         {realData.y}
-                      </tspan>
-                      {showSuffix && (
-                        <tspan
-                          style={{
-                            ...getFontStyle(valueFont, 'svg'),
-                            fontSize: suffixFontSize,
-                          }}
-                          dx={suffixTranslateX}
-                          dy={suffixTranslateY}
-                        >
-                          {text}
-                        </tspan>
-                      )}
-                    </>
-                  )}
-                  {showPercent && (
-                    <tspan
-                      x={
-                        _showName
-                          ? _showValue
-                            ? ''
-                            : mode == 'vertical'
-                            ? x2
-                            : ''
-                          : ''
-                      }
-                      dx={percentDx(_showName, _showValue, mode)}
-                      dy={
-                        percentDy_(_showName, _showValue, mode, directionY) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : '')
-                      }
-                      style={getFontStyle(percentFont, 'svg')}
-                    >
-                      {(_showValue ? '(' : '') +
-                        percent +
-                        '%' +
-                        (_showValue ? ')' : '')}
-                    </tspan>
-                  )}
-                </text>
+                        {showSuffix && <span style={{
+                          position:"relative",
+                          fontSize:suffixFontSize,
+                          marginLeft:suffixTranslateX,
+                          top:suffixTranslateY
+                        }}>
+                          { text }
+                        </span>}
+                      </span>
+                    }
+                    {
+                      showPercent && <span style={getFontStyle(percentFont)}>
+                        {
+                          (_showValue ? '（' : '') +
+                          percent +
+                          '%' +
+                          (_showValue ? '）' : '')
+                        }
+                      </span>
+                    }
+                  </div>
+                </foreignObject>
               </g>
             )
           );

package/src/css/index.module.css

@@ -35,7 +35,8 @@
 
 .notShowAllStyle {
   display: flex;
-  width: 100%;
+  /* width: 100%; */
+  /* flex:1; */
   align-items: center;
   flex-direction: row;
   justify-content: space-between;

package/src/formatter/legend.js

@@ -1,9 +1,11 @@
 import css from '../css/index.module.css';
 import { getFontStyle } from '../utils';
+import { TextOverflow } from '../components';
+
 export const pieLegendFormatter = (
   { displayName, data, percent, series: { color: seriesColor, icon="" } },
   {
-    name: { show: showName, font: nameFont },
+    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth },
     value: {
       show: showValue,
       font: valueFont,
@@ -34,7 +36,7 @@ export const pieLegendFormatter = (
   return (
     <>
       {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
-      <span
+      <div
         className={
           showName && showValue && showPercent
             ? css.showAllStyle
@@ -42,9 +44,9 @@ export const pieLegendFormatter = (
         }
       >
         {showName && (
-          <span style={{ paddingLeft: 5, ...getFontStyle(nameFont), whiteSpace:"nowrap" }}>
-            {displayName}
-          </span>
+          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
+            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont)
+          }}></TextOverflow>
         )}
         {showValue && (
           <span
@@ -84,7 +86,7 @@ export const pieLegendFormatter = (
             {percent + '%'}
           </span>
         )}
-      </span>
+      </div>
     </>
   );
 };