@easyv/charts 1.0.44 → 1.0.48

package/lib/components/PieChart.js

@@ -35,6 +35,8 @@ var _LinearGradient = _interopRequireDefault(require("./LinearGradient"));
 
 var _formatter = require("../formatter");
 
+var _piechartModule = _interopRequireDefault(require("../css/piechart.module.css"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -167,50 +169,100 @@ var getArc = function getArc(radius, _ref3, series) {
   });
 };
 
-var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
-  var _ref4$config = _ref4.config,
-      _ref4$config$chart = _ref4$config.chart,
-      _ref4$config$chart$di = _ref4$config$chart.dimension.chartDimension,
-      width = _ref4$config$chart$di.width,
-      height = _ref4$config$chart$di.height,
-      label = _ref4$config$chart.label,
-      _ref4$config$chart$le = _ref4$config$chart.legend,
-      _ref4$config$chart$le2 = _ref4$config$chart$le.formatter,
-      formatter = _ref4$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref4$config$chart$le2,
-      legend = (0, _objectWithoutProperties2["default"])(_ref4$config$chart$le, ["formatter"]),
-      _ref4$config$chart$ma = _ref4$config$chart.margin,
-      marginLeft = _ref4$config$chart$ma.marginLeft,
-      marginTop = _ref4$config$chart$ma.marginTop,
-      _ref4$config$fan = _ref4$config.fan;
-  _ref4$config$fan = _ref4$config$fan === void 0 ? {} : _ref4$config$fan;
-  var _ref4$config$fan$char = _ref4$config$fan.chart,
-      chart = _ref4$config$fan$char === void 0 ? defaultChart : _ref4$config$fan$char,
-      _ref4$config$fan$char2 = _ref4$config$fan.chart.outerRadius,
-      outerRadius = _ref4$config$fan$char2 === void 0 ? defaultChart.outerRadius : _ref4$config$fan$char2,
-      _ref4$config$fan$angl = _ref4$config$fan.angle,
-      angle = _ref4$config$fan$angl === void 0 ? defaultAngle : _ref4$config$fan$angl,
-      _ref4$config$fan$stro = _ref4$config$fan.stroke;
-  _ref4$config$fan$stro = _ref4$config$fan$stro === void 0 ? {
+var getCircleScale = function getCircleScale() {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tick,
+      count = _ref4.count,
+      color = _ref4.color,
+      width = _ref4.width,
+      length = _ref4.length;
+
+  var radius = arguments.length > 1 ? arguments[1] : undefined;
+  var data = [],
+      arcs = [],
+      centroids = [];
+
+  for (var i = 0; i < count; i++) {
+    data.push(1);
+  }
+
+  var scaleData = (0, _d3v.pie)()(data);
+  scaleData.map(function (data) {
+    var _arc = (0, _d3v.arc)().innerRadius(radius + length / 2).outerRadius(radius + length / 2).startAngle(data.startAngle).endAngle(data.endAngle);
+
+    arcs.push(_arc());
+    centroids.push(_arc.centroid());
+  });
+  return /*#__PURE__*/_react["default"].createElement("g", null, centroids.map(function (center, index) {
+    var x = center[0],
+        y = center[1];
+    var rate = length / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+    return /*#__PURE__*/_react["default"].createElement("path", {
+      key: index,
+      d: "M".concat(x, ",").concat(y, "l").concat(x * rate, ",").concat(y * rate),
+      strokeWidth: width,
+      stroke: color
+    });
+  }));
+};
+
+var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var _ref5$config = _ref5.config,
+      _ref5$config$chart = _ref5$config.chart,
+      _ref5$config$chart$di = _ref5$config$chart.dimension.chartDimension,
+      width = _ref5$config$chart$di.width,
+      height = _ref5$config$chart$di.height,
+      label = _ref5$config$chart.label,
+      _ref5$config$chart$le = _ref5$config$chart.legend,
+      _ref5$config$chart$le2 = _ref5$config$chart$le.formatter,
+      formatter = _ref5$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref5$config$chart$le2,
+      legend = (0, _objectWithoutProperties2["default"])(_ref5$config$chart$le, ["formatter"]),
+      _ref5$config$chart$ma = _ref5$config$chart.margin,
+      marginLeft = _ref5$config$chart$ma.marginLeft,
+      marginTop = _ref5$config$chart$ma.marginTop,
+      _ref5$config$fan = _ref5$config.fan;
+  _ref5$config$fan = _ref5$config$fan === void 0 ? {} : _ref5$config$fan;
+  var _ref5$config$fan$char = _ref5$config$fan.chart,
+      chart = _ref5$config$fan$char === void 0 ? defaultChart : _ref5$config$fan$char,
+      _ref5$config$fan$char2 = _ref5$config$fan.chart,
+      _ref5$config$fan$char3 = _ref5$config$fan$char2.outerRadius,
+      outerRadius = _ref5$config$fan$char3 === void 0 ? defaultChart.outerRadius : _ref5$config$fan$char3,
+      padAngle = _ref5$config$fan$char2.padAngle,
+      _ref5$config$fan$angl = _ref5$config$fan.angle,
+      angle = _ref5$config$fan$angl === void 0 ? defaultAngle : _ref5$config$fan$angl,
+      _ref5$config$fan$stro = _ref5$config$fan.stroke;
+  _ref5$config$fan$stro = _ref5$config$fan$stro === void 0 ? {
     show: false
-  } : _ref4$config$fan$stro;
-  var show = _ref4$config$fan$stro.show,
-      strokeWidth = _ref4$config$fan$stro.strokeWidth,
-      color = _ref4$config$fan$stro.color,
-      decorate = _ref4$config$fan.decorate,
-      current = _ref4$config$fan.current,
-      order = _ref4$config.order,
-      series = _ref4$config.series,
-      _ref4$config$animatio = _ref4$config.animation,
-      on = _ref4$config$animatio.on,
-      _ref4$config$animatio2 = _ref4$config$animatio.current,
-      heighten = _ref4$config$animatio2.heighten,
-      opacity = _ref4$config$animatio2.opacity,
-      _ref4$state = _ref4.state,
-      currentIndex = _ref4$state.currentIndex,
-      trigger = _ref4$state.trigger,
-      onEvent = _ref4.onEvent,
-      _ref4$data = _ref4.data,
-      data = _ref4$data === void 0 ? [] : _ref4$data;
+  } : _ref5$config$fan$stro;
+  var show = _ref5$config$fan$stro.show,
+      strokeWidth = _ref5$config$fan$stro.strokeWidth,
+      color = _ref5$config$fan$stro.color,
+      decorate = _ref5$config$fan.decorate,
+      decorate2 = _ref5$config$fan.decorate2,
+      categoryText = _ref5$config$fan.categoryText,
+      outerDecorate = _ref5$config$fan.outerDecorate,
+      current = _ref5$config$fan.current,
+      order = _ref5$config.order,
+      series = _ref5$config.series,
+      _ref5$config$animatio = _ref5$config.animation,
+      on = _ref5$config$animatio.on,
+      _ref5$config$animatio2 = _ref5$config$animatio.current,
+      _ref5$config$animatio3 = _ref5$config$animatio2.heighten,
+      heighten = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
+      _ref5$config$animatio4 = _ref5$config$animatio2.opacity,
+      opacity = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
+      _ref5$config$animatio5 = _ref5$config$animatio2.width,
+      radiusWidthAdd = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
+      animateColor = _ref5$config$animatio2.color,
+      _ref5$config$animatio6 = _ref5$config$animatio2.gap,
+      gap = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
+      _ref5$config$animatio7 = _ref5$config$animatio.rotate,
+      rotate = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
+      _ref5$state = _ref5.state,
+      currentIndex = _ref5$state.currentIndex,
+      trigger = _ref5$state.trigger,
+      onEvent = _ref5.onEvent,
+      _ref5$data = _ref5.data,
+      data = _ref5$data === void 0 ? [] : _ref5$data;
   var prevIndex = (0, _react.useRef)(null);
   var legendPrecision = legend.config.percent.precision;
 
@@ -283,10 +335,10 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
 
       var _angle = PI * 2 / _legendDataWithPercent.length;
 
-      return _legendDataWithPercent.map(function (_ref5, index) {
-        var startAngle = _ref5.startAngle,
-            endAngle = _ref5.endAngle,
-            arc = (0, _objectWithoutProperties2["default"])(_ref5, ["startAngle", "endAngle"]);
+      return _legendDataWithPercent.map(function (_ref6, index) {
+        var startAngle = _ref6.startAngle,
+            endAngle = _ref6.endAngle,
+            arc = (0, _objectWithoutProperties2["default"])(_ref6, ["startAngle", "endAngle"]);
         return _objectSpread(_objectSpread({}, arc), {}, {
           id: id + '_linear_' + index,
           startAngle: roseType == 'area' ? _angle * index : startAngle,
@@ -374,28 +426,117 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
   }, [JSON.stringify(arcs), on, currentIndex, trigger, onEmit, triggerOnRelative]);
   var halfChartWidth = chartWidth / 2;
   var halfChartHeight = chartHeight / 2;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
+  var rotate_ = decorate2 ? -(arcs[+currentIndex].startAngle + arcs[+currentIndex].endAngle) * 90 / Math.PI + rotate : 0;
+  var maxRadius = 0;
+
+  _arcs.map(function (d) {
+    maxRadius = Math.max(maxRadius, d.outerRadius);
+  });
+
+  var centerRadius = 0.5 * maxRadius + 0.5 * _arcs[0].innerRadius;
+  return outerDecorate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+  , {
     width: width,
     height: height,
     marginLeft: marginLeft,
     marginTop: marginTop
   }, /*#__PURE__*/_react["default"].createElement("g", {
-    transform: 'translate(' + halfChartWidth + ', ' + halfChartHeight + ')'
-  }, _arcs.map(function (_ref6, index) {
-    var id = _ref6.id,
-        value = _ref6.value,
-        series = _ref6.series,
-        arc = _ref6.arc,
-        innerRadius = _ref6.innerRadius,
-        outerRadius = _ref6.outerRadius,
-        dataIndex = _ref6.index;
-    var current = index == currentIndex;
-    var prev = index == prevIndex.current; // const offset = current ? y : prev ? 1 - y : 0;
+    style: {
+      transition: "transform ease-in-out 0.3s",
+      transform: 'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate(' + rotate_ + "deg)"
+    }
+  }, //用于生成外环装饰的刻度
+  outerDecorate.tick.show && getCircleScale(outerDecorate.tick, maxRadius), /*#__PURE__*/_react["default"].createElement("circle", {
+    //外环装饰
+    cx: "0",
+    cy: "0",
+    r: maxRadius + 2,
+    fill: "none",
+    stroke: outerDecorate.color,
+    strokeWidth: outerDecorate.width
+  }), _arcs.map(function (_ref7, index) {
+    var id = _ref7.id,
+        value = _ref7.value,
+        series = _ref7.series,
+        arc = _ref7.arc,
+        innerRadius = _ref7.innerRadius,
+        outerRadius = _ref7.outerRadius,
+        dataIndex = _ref7.index;
+    var arcWidth = outerRadius - innerRadius;
+    var path = arc.innerRadius(centerRadius).outerRadius(centerRadius)(value);
+    var dashLength = Math.ceil(Math.PI * centerRadius * 2 / _arcs.length);
+    var pie = (0, _utils.getColorList)(series.color);
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("path", {
+      className: _piechartModule["default"]['inner-arc'],
+      style: {
+        strokeDasharray: "".concat(dashLength, ",").concat(2 * dashLength),
+        strokeDashoffset: dashLength,
+        animationDelay: "".concat(index * 2000, "ms")
+      },
+      "data-index": dataIndex,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      d: path.split("L")[0],
+      stroke: 'url(#' + id + ')',
+      strokeWidth: arcWidth,
+      fill: "none"
+    }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_LinearGradient["default"], {
+      id: id,
+      colors: pie,
+      rotate: series.color.linear.angle + 180 // gradientUnits='objectBoundingBox'
 
+    })));
+  }), label && /*#__PURE__*/_react["default"].createElement(Label, {
+    config: _objectSpread(_objectSpread({}, label), {}, {
+      maxRadius: maxRadius + 2
+    }),
+    arcs: _arcs,
+    animation: true
+  }))), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
+    series: _arcs,
+    formatter: formatter
+  }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
+    width: width,
+    height: height,
+    marginLeft: marginLeft,
+    marginTop: marginTop
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    style: {
+      transition: "transform ease-in-out 0.3s",
+      transform: 'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate(' + rotate_ + "deg)"
+    }
+  }, _arcs.map(function (_ref8, index) {
+    var id = _ref8.id,
+        value = _ref8.value,
+        series = _ref8.series,
+        arc = _ref8.arc,
+        innerRadius = _ref8.innerRadius,
+        outerRadius = _ref8.outerRadius,
+        dataIndex = _ref8.index;
+    var current = index == currentIndex;
+    var prev = index == prevIndex.current;
     var offset = current ? y : prev ? 1 - y : 0;
-    var fillOpacity = current ? opacity / 100 : 1;
-    var path = arc.innerRadius(innerRadius + offset * heighten).outerRadius(outerRadius + offset * heighten)(value);
+    var fillOpacity = animateColor ? 1 : current ? opacity / 100 : 1;
+    var deltaHeighten = offset * heighten;
+    var path = arc.innerRadius(innerRadius + deltaHeighten).outerRadius(outerRadius + deltaHeighten)(value);
     var pie = (0, _utils.getColorList)(series.color);
+    var currentPie = animateColor ? (0, _utils.getColorList)(animateColor) : (0, _utils.getColorList)(series.color);
+    var textPath = "",
+        categoryTextStyle = {};
+
+    if (categoryText && categoryText.show) {
+      //如果有类目文本，则需要计算文字路径
+      //let offsetWidth=decorate2.radiusWidth/2 + radiusWidthAdd/2;   //当前文字需生成在装饰物内，故而半径需要减小
+      var textArc = arc.innerRadius(outerRadius + (current ? gap : categoryText.gap)).outerRadius(outerRadius + (current ? gap : categoryText.gap))(value);
+      var lastA = textArc.lastIndexOf('A');
+      textPath = textArc.slice(0, lastA > 0 ? lastA : textArc.length); //文字路径
+
+      categoryTextStyle = categoryText.textStyle; //这里把textstyle拿出来
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("path", {
@@ -408,17 +549,50 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
       strokeWidth: show ? strokeWidth : '0',
       fill: 'url(#' + id + ')',
       fillOpacity: fillOpacity
-    }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_LinearGradient["default"], {
+    }), //装饰物2，产生于每个弧的外部
+    decorate2 && decorate2.show && /*#__PURE__*/_react["default"].createElement("path", {
+      "data-index": dataIndex,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      d: arc.innerRadius(outerRadius).outerRadius(outerRadius + decorate2.radiusWidth + radiusWidthAdd)(value),
+      stroke: show ? color : 'none',
+      strokeWidth: show ? strokeWidth : '0',
+      fill: 'url(#' + id + ')',
+      fillOpacity: decorate2.opacity / 100
+    }), //类目文本
+    categoryText && categoryText.show && /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      id: id + '_text_' + index,
+      d: textPath,
+      fill: "none",
+      stroke: "none"
+    }), /*#__PURE__*/_react["default"].createElement("text", {
+      textAnchor: "middle",
+      style: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
+        fontWeight: categoryTextStyle.bold ? "bold" : "normal",
+        fontStyle: categoryTextStyle.italic ? "italic" : "normal"
+      }),
+      fill: categoryText.textStyle.color
+    }, /*#__PURE__*/_react["default"].createElement("textPath", {
+      startOffset: "50%",
+      href: '#' + id + '_text_' + index
+    }, _arcs[index].displayName || _arcs[index].fieldName))), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_LinearGradient["default"], {
       id: id,
-      colors: pie,
-      rotate: series.color.linear.angle + 180 // gradientUnits='objectBoundingBox'
+      colors: current ? currentPie : pie,
+      rotate: current ? animateColor ? animateColor.linear.angle + 180 : series.color.linear.angle + 180 : series.color.linear.angle + 180 // gradientUnits='objectBoundingBox'
 
     })));
   }), label && /*#__PURE__*/_react["default"].createElement(Label, {
     config: label,
     arcs: _arcs
   }), current && /*#__PURE__*/_react["default"].createElement("g", {
-    fillOpacity: y
+    fillOpacity: y,
+    style: {
+      transform: "rotate(" + -rotate_ + "deg)"
+    }
   }, /*#__PURE__*/_react["default"].createElement(Current, {
     config: current,
     data: _arcs,
@@ -437,35 +611,35 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
   })));
 });
 
-var Current = function Current(_ref7) {
-  var _ref7$config = _ref7.config,
-      show = _ref7$config.show,
-      gap = _ref7$config.gap,
-      _ref7$config$name = _ref7$config.name,
-      showName = _ref7$config$name.show,
-      nameFont = _ref7$config$name.font,
-      _ref7$config$percent = _ref7$config.percent,
-      showPercent = _ref7$config$percent.show,
-      percentFont = _ref7$config$percent.font,
-      precision = _ref7$config$percent.precision,
-      _ref7$config$percent$ = _ref7$config$percent.translate,
-      translatePercentX = _ref7$config$percent$.x,
-      translatePercentY = _ref7$config$percent$.y,
-      _ref7$config$value = _ref7$config.value,
-      showValue = _ref7$config$value.show,
-      valueFont = _ref7$config$value.font,
-      _ref7$config$value$tr = _ref7$config$value.translate,
-      translateValueX = _ref7$config$value$tr.x,
-      translateValueY = _ref7$config$value$tr.y,
-      _ref7$config$value$su = _ref7$config$value.suffix,
-      showSuffix = _ref7$config$value$su.show,
-      fontSize = _ref7$config$value$su.fontSize,
-      text = _ref7$config$value$su.text,
-      _ref7$config$value$su2 = _ref7$config$value$su.translate,
-      translateSuffixX = _ref7$config$value$su2.x,
-      translateSuffixY = _ref7$config$value$su2.y,
-      data = _ref7.data,
-      currentIndex = _ref7.currentIndex;
+var Current = function Current(_ref9) {
+  var _ref9$config = _ref9.config,
+      show = _ref9$config.show,
+      gap = _ref9$config.gap,
+      _ref9$config$name = _ref9$config.name,
+      showName = _ref9$config$name.show,
+      nameFont = _ref9$config$name.font,
+      _ref9$config$percent = _ref9$config.percent,
+      showPercent = _ref9$config$percent.show,
+      percentFont = _ref9$config$percent.font,
+      precision = _ref9$config$percent.precision,
+      _ref9$config$percent$ = _ref9$config$percent.translate,
+      translatePercentX = _ref9$config$percent$.x,
+      translatePercentY = _ref9$config$percent$.y,
+      _ref9$config$value = _ref9$config.value,
+      showValue = _ref9$config$value.show,
+      valueFont = _ref9$config$value.font,
+      _ref9$config$value$tr = _ref9$config$value.translate,
+      translateValueX = _ref9$config$value$tr.x,
+      translateValueY = _ref9$config$value$tr.y,
+      _ref9$config$value$su = _ref9$config$value.suffix,
+      showSuffix = _ref9$config$value$su.show,
+      fontSize = _ref9$config$value$su.fontSize,
+      text = _ref9$config$value$su.text,
+      _ref9$config$value$su2 = _ref9$config$value$su.translate,
+      translateSuffixX = _ref9$config$value$su2.x,
+      translateSuffixY = _ref9$config$value$su2.y,
+      data = _ref9.data,
+      currentIndex = _ref9.currentIndex;
 
   var _data = (0, _react.useMemo)(function () {
     var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
@@ -496,37 +670,41 @@ var Current = function Current(_ref7) {
   }, (0, _utils.getFontStyle)(percentFont, 'svg')), percent + '%'));
 };
 
-var Label = function Label(_ref8) {
-  var _ref8$config = _ref8.config,
-      lineLength = _ref8$config.lineLength,
-      distance = _ref8$config.distance,
-      mode = _ref8$config.mode,
-      show = _ref8$config.show,
-      _ref8$config$translat = _ref8$config.translate,
-      translateX = _ref8$config$translat.x,
-      translateY = _ref8$config$translat.y,
-      _ref8$config$name = _ref8$config.name,
-      showName = _ref8$config$name.show,
-      nameFont = _ref8$config$name.font,
-      _ref8$config$value = _ref8$config.value,
-      showValue = _ref8$config$value.show,
-      valueFont = _ref8$config$value.font,
-      _ref8$config$value$su = _ref8$config$value.suffix,
-      showSuffix = _ref8$config$value$su.show,
-      text = _ref8$config$value$su.text,
-      suffixFontSize = _ref8$config$value$su.fontSize,
-      _ref8$config$value$su2 = _ref8$config$value$su.translate,
-      suffixTranslateX = _ref8$config$value$su2.x,
-      suffixTranslateY = _ref8$config$value$su2.y,
-      _ref8$config$value$sa = _ref8$config$value.sameColor,
-      valueSameColor = _ref8$config$value$sa === void 0 ? false : _ref8$config$value$sa,
-      _ref8$config$percent = _ref8$config.percent,
-      showPercent = _ref8$config$percent.show,
-      percentFont = _ref8$config$percent.font,
-      precision = _ref8$config$percent.precision,
-      _ref8$config$percent$ = _ref8$config$percent.sameColor,
-      percentSameColor = _ref8$config$percent$ === void 0 ? false : _ref8$config$percent$,
-      arcs = _ref8.arcs;
+var Label = function Label(_ref10) {
+  var _ref10$config = _ref10.config,
+      _ref10$config$maxRadi = _ref10$config.maxRadius,
+      maxRadius = _ref10$config$maxRadi === void 0 ? 0 : _ref10$config$maxRadi,
+      lineLength = _ref10$config.lineLength,
+      lineColor = _ref10$config.lineColor,
+      distance = _ref10$config.distance,
+      mode = _ref10$config.mode,
+      show = _ref10$config.show,
+      _ref10$config$transla = _ref10$config.translate,
+      translateX = _ref10$config$transla.x,
+      translateY = _ref10$config$transla.y,
+      _ref10$config$name = _ref10$config.name,
+      showName = _ref10$config$name.show,
+      nameFont = _ref10$config$name.font,
+      _ref10$config$value = _ref10$config.value,
+      showValue = _ref10$config$value.show,
+      valueFont = _ref10$config$value.font,
+      _ref10$config$value$s = _ref10$config$value.suffix,
+      showSuffix = _ref10$config$value$s.show,
+      text = _ref10$config$value$s.text,
+      suffixFontSize = _ref10$config$value$s.fontSize,
+      _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,
+      animation = _ref10.animation;
 
   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
@@ -569,16 +747,17 @@ var Label = function Label(_ref8) {
   // }, [labels]);
 
 
-  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref9, index) {
-    var _ref9$series$color = _ref9.series.color,
-        type = _ref9$series$color.type,
-        pure = _ref9$series$color.pure,
-        stops = _ref9$series$color.linear.stops,
-        displayName = _ref9.displayName,
-        value = _ref9.value,
-        percent = _ref9.percent,
-        arc = _ref9.arc,
-        outerRadius = _ref9.outerRadius;
+  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref11, index) {
+    var _ref11$series$color = _ref11.series.color,
+        type = _ref11$series$color.type,
+        pure = _ref11$series$color.pure,
+        stops = _ref11$series$color.linear.stops,
+        displayName = _ref11.displayName,
+        value = _ref11.value,
+        percent = _ref11.percent,
+        arc = _ref11.arc,
+        outerRadius = _ref11.outerRadius,
+        actualIndex = _ref11.index;
 
     var _arc$centroid = arc.centroid(),
         _arc$centroid2 = (0, _slicedToArray2["default"])(_arc$centroid, 2),
@@ -587,12 +766,12 @@ var Label = function Label(_ref8) {
 
     var midAngle = Math.atan2(y, x);
 
-    var _getCoord = getCoord(midAngle, outerRadius),
+    var _getCoord = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
         _getCoord2 = (0, _slicedToArray2["default"])(_getCoord, 2),
         x1 = _getCoord2[0],
         y1 = _getCoord2[1];
 
-    var radius = outerRadius + distance;
+    var radius = (maxRadius ? maxRadius : outerRadius) + distance;
 
     var _getCoord3 = getCoord(midAngle, radius),
         _getCoord4 = (0, _slicedToArray2["default"])(_getCoord3, 2),
@@ -611,10 +790,18 @@ var Label = function Label(_ref8) {
     return show && (_showName || showPercent || _showValue) && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, /*#__PURE__*/_react["default"].createElement("path", {
+      className: animation ? _piechartModule["default"]['label-line'] : "",
+      style: {
+        animationDelay: "".concat(animation ? (actualIndex + 1) * 2000 - 800 : 0, "ms")
+      },
       d: 'M' + x1 + ', ' + y1 + 'L' + x2 + ', ' + y2 + 'L' + x3 + ', ' + y2,
-      stroke: type == 'pure' ? pure : stops[0].color,
+      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")
+      },
       x: _x,
       y: y2 + translateY,
       dominantBaseline: "middle",
@@ -635,7 +822,7 @@ var Label = function Label(_ref8) {
     }, 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 : 0),
+      dy: percentDy(_showName, _showValue, mode) + (_showValue && showSuffix ? suffixTranslateY * -1 : ""),
       style: (0, _utils.getFontStyle)(percentFont, 'svg')
     }, (_showValue ? '(' : '') + percent + '%' + (_showValue ? ')' : ''))));
   }));

package/lib/css/index.module.css

@@ -1,42 +1,42 @@
-.rotateClockwise {
-  animation-name: rotateClockwise;
-}
-
-@keyframes rotateClockwise {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.rotateCounterClockwise {
-  animation-name: rotateCounterClockwise;
-}
-
-@keyframes rotateCounterClockwise {
-  0% {
-    transform: rotate(360deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-.showAllStyle {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 50% 25% 25%;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.notShowAllStyle {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
+.rotateClockwise {
+  animation-name: rotateClockwise;
+}
+
+@keyframes rotateClockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rotateCounterClockwise {
+  animation-name: rotateCounterClockwise;
+}
+
+@keyframes rotateCounterClockwise {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.showAllStyle {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50% 25% 25%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.notShowAllStyle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}