@easyv/charts 1.3.32 → 1.3.34

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/components/TextOverflow.js

@@ -42,7 +42,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       case 'break-word':
         return {
           wordBreak: 'break-all',
-          wordWrap: 'break-word'
+          wordWrap: 'break-word',
+          whiteSpace: "normal"
         };
 
       case 'marquee':

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.32",
+  "version": "1.3.34",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

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/components/TextOverflow.tsx

@@ -32,6 +32,7 @@ export default memo(forwardRef((props:flowText, ref:any) => {
         return {
           wordBreak: 'break-all',
           wordWrap: 'break-word',
+          whiteSpace: "normal"
         };
       case 'marquee':
         return {

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>
     </>
   );
 };