@easyv/charts 1.0.47 → 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,63 +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,
-      _ref4$config$fan$char3 = _ref4$config$fan$char2.outerRadius,
-      outerRadius = _ref4$config$fan$char3 === void 0 ? defaultChart.outerRadius : _ref4$config$fan$char3,
-      padAngle = _ref4$config$fan$char2.padAngle,
-      _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,
-      decorate2 = _ref4$config$fan.decorate2,
-      categoryText = _ref4$config$fan.categoryText,
-      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,
-      _ref4$config$animatio3 = _ref4$config$animatio2.heighten,
-      heighten = _ref4$config$animatio3 === void 0 ? 0 : _ref4$config$animatio3,
-      _ref4$config$animatio4 = _ref4$config$animatio2.opacity,
-      opacity = _ref4$config$animatio4 === void 0 ? 0 : _ref4$config$animatio4,
-      _ref4$config$animatio5 = _ref4$config$animatio2.width,
-      radiusWidthAdd = _ref4$config$animatio5 === void 0 ? 0 : _ref4$config$animatio5,
-      animateColor = _ref4$config$animatio2.color,
-      _ref4$config$animatio6 = _ref4$config$animatio2.gap,
-      gap = _ref4$config$animatio6 === void 0 ? 0 : _ref4$config$animatio6,
-      _ref4$config$animatio7 = _ref4$config$animatio.rotate,
-      rotate = _ref4$config$animatio7 === void 0 ? 0 : _ref4$config$animatio7,
-      _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;
 
@@ -296,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,
@@ -388,7 +427,78 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
   var halfChartWidth = chartWidth / 2;
   var halfChartHeight = chartHeight / 2;
   var rotate_ = decorate2 ? -(arcs[+currentIndex].startAngle + arcs[+currentIndex].endAngle) * 90 / Math.PI + rotate : 0;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
+  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", {
+    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,
@@ -398,14 +508,14 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
       transition: "transform ease-in-out 0.3s",
       transform: 'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate(' + rotate_ + "deg)"
     }
-  }, _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;
+  }, _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;
@@ -501,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);
@@ -560,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);
@@ -633,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),
@@ -651,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),
@@ -675,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",
@@ -699,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

@@ -39,4 +39,4 @@
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
-}
+}

package/lib/css/piechart.module.css

@@ -0,0 +1,27 @@
+/*甜甜圈图专用css*/
+.label-line {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: dash 800ms ease forwards;
+  }
+  
+  .label-text {
+    opacity: 0;
+    animation: show 800ms ease forwards;
+  }
+  
+  .inner-arc {
+    animation: dash 2s ease forwards;
+  }
+  
+  @keyframes dash {
+    100% {
+      stroke-dashoffset: 0%;
+    }
+  }
+  
+  @keyframes show {
+    100% {
+      opacity: 1;
+    }
+  }

package/package.json

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

package/src/components/PieChart.js

@@ -23,6 +23,7 @@ import { pie, arc, extent, scaleLinear } from 'd3v7';
 import { animate, linear } from 'popmotion';
 import LinearGradient from './LinearGradient';
 import { pieLegendFormatter as legendFormatter } from '../formatter';
+import ringCss from '../css/piechart.module.css';
 
 const PI = Math.PI;
 
@@ -141,6 +142,42 @@ const getArc = (
     .padAngle(padAngle),
 });
 
+const getCircleScale = ({ count, color, width, length }=tick, radius)=>{
+  let data = [],
+      arcs = [],
+      centroids = [];
+    for (let i = 0; i < count; i++) {
+      data.push(1);
+    }
+    let scaleData = pie()(data);
+    scaleData.map((data) => {
+      let _arc = arc()
+        .innerRadius(radius + length/2)
+        .outerRadius(radius + length/2)
+        .startAngle(data.startAngle)
+        .endAngle(data.endAngle);
+      arcs.push(_arc());
+      centroids.push(_arc.centroid());
+    });
+    return (
+      <g>
+        {centroids.map((center, index) => {
+          let x = center[0],
+            y = center[1];
+          let rate = length / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+          return (
+            <path
+              key={index}
+              d={`M${x},${y}l${x * rate},${y * rate}`}
+              strokeWidth={width}
+              stroke={color}
+            />
+          );
+        })}
+      </g>
+    );
+}
+
 const Component = memo(
   ({
     config: {
@@ -160,6 +197,7 @@ const Component = memo(
         decorate,
         decorate2,
         categoryText,
+        outerDecorate,
         current,
       } = {},
       order,
@@ -176,7 +214,6 @@ const Component = memo(
   }) => {
     const prevIndex = useRef(null);
     const { precision: legendPrecision } = legend.config.percent;
-
     const {
       id,
       width: chartWidth,
@@ -330,9 +367,82 @@ const Component = memo(
     const halfChartHeight = chartHeight / 2;
 
     const rotate_ = decorate2?-(arcs[+currentIndex].startAngle+arcs[+currentIndex].endAngle)*90/Math.PI+rotate:0;
-
+    let maxRadius = 0;
+    _arcs.map(d=>{
+      maxRadius=Math.max(maxRadius,d.outerRadius);
+    })
+    let centerRadius =0.5*maxRadius + 0.5*_arcs[0].innerRadius
     return (
-      <>
+      outerDecorate?<>
+        <ChartContainer   //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+          width={width}
+          height={height}
+          marginLeft={marginLeft}
+          marginTop={marginTop}
+        >
+          <g
+            style={{
+              transition:"transform ease-in-out 0.3s",
+              transform:'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate('+rotate_+"deg)"
+            }}
+          >
+            {
+              //用于生成外环装饰的刻度
+              outerDecorate.tick.show && getCircleScale(outerDecorate.tick, maxRadius)
+            }
+            <circle     //外环装饰
+              cx='0'
+              cy='0'
+              r={maxRadius+2}
+              fill='none'
+              stroke={outerDecorate.color}
+              strokeWidth={outerDecorate.width}
+            />
+            {
+              _arcs.map(
+                ({ id, value, series, arc, innerRadius, outerRadius, index: dataIndex }, index) => {
+                  const arcWidth = (outerRadius-innerRadius);
+                  const path = arc
+                    .innerRadius(centerRadius)
+                    .outerRadius(centerRadius)(value);
+                  const dashLength=Math.ceil(Math.PI*(centerRadius)*2/_arcs.length);
+                  const pie = getColorList(series.color);
+                  return (
+                    <Fragment key={index}>
+                      <path
+                        className={ringCss['inner-arc']}
+                        style={{
+                          strokeDasharray:`${dashLength},${2*dashLength}`,
+                          strokeDashoffset: dashLength,
+                          animationDelay: `${index * 2000}ms`
+                        }}
+                        data-index={dataIndex}
+                        onClick={onClick}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        d={path.split("L")[0]}
+                        stroke={'url(#' + id + ')'}
+                        strokeWidth={arcWidth}
+                        fill="none"
+                      />
+                      <defs>
+                        <LinearGradient
+                          id={id}
+                          colors={pie}
+                          rotate={series.color.linear.angle + 180}
+                          // gradientUnits='objectBoundingBox'
+                        />
+                      </defs>
+                    </Fragment>
+                  );
+                }
+              )
+            }
+          {label && <Label config={{...label,maxRadius: maxRadius+2}} arcs={_arcs} animation={true}/>}
+          </g>
+        </ChartContainer>
+        <Legend {...legend} series={_arcs} formatter={formatter}/>
+      </> : <>
         <ChartContainer
           width={width}
           height={height}
@@ -570,7 +680,9 @@ const Current = ({
 
 const Label = ({
   config: {
+    maxRadius = 0,
     lineLength,
+    lineColor,
     distance,
     mode,
     show,
@@ -595,6 +707,7 @@ const Label = ({
     },
   },
   arcs,
+  animation
 }) => {
   // const [labels, setLabels] = useState(null);
   // const [opacity, setOpacity] = useState(0);
@@ -603,7 +716,6 @@ const Label = ({
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
-
   // useEffect(() => {
   //   if (labels) {
   //     const children = [...labels.children];
@@ -641,7 +753,7 @@ const Label = ({
   //     console.log('bbox: ', bbox);
   //   }
   // }, [labels]);
-
+  
   return (
     <g
     // style={{ opacity }} ref={setLabels}
@@ -661,16 +773,18 @@ const Label = ({
             percent,
             arc,
             outerRadius,
+            index:actualIndex
           },
           index
         ) => {
+
           const [x, y] = arc.centroid();
 
           const midAngle = Math.atan2(y, x);
 
-          const [x1, y1] = getCoord(midAngle, outerRadius);
+          const [x1, y1] = getCoord(midAngle, maxRadius?maxRadius:outerRadius);
 
-          const radius = outerRadius + distance;
+          const radius = (maxRadius?maxRadius:outerRadius) + distance;
           const [x2, y2] = getCoord(midAngle, radius);
 
           const direction = x2 < 0 ? -1 : 1;
@@ -686,24 +800,19 @@ const Label = ({
             (_showName || showPercent || _showValue) && (
               <g key={index}>
                 <path
+                  className={animation? ringCss['label-line']:""}
+                  style={{ animationDelay:`${animation? ((actualIndex+1) * 2000 - 800) : 0}ms`}}
                   d={
-                    'M' +
-                    x1 +
-                    ', ' +
-                    y1 +
-                    'L' +
-                    x2 +
-                    ', ' +
-                    y2 +
-                    'L' +
-                    x3 +
-                    ', ' +
-                    y2
+                    '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'
                 />
                 <text
+                  className={animation? ringCss['label-text']:""}
+                  style={{ animationDelay:`${animation? ((actualIndex+1) * 2000 - 800) : 0}ms`}}
                   x={_x}
                   y={y2 + translateY}
                   dominantBaseline='middle'
@@ -744,7 +853,7 @@ const Label = ({
                       dx={percentDx(_showName, _showValue, mode)}
                       dy={
                         percentDy(_showName, _showValue, mode) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : 0)
+                        (_showValue && showSuffix ? suffixTranslateY * -1 : "")
                       }
                       style={getFontStyle(percentFont, 'svg')}
                     >

package/src/css/index.module.css

@@ -39,4 +39,4 @@
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
-}
+}

package/src/css/piechart.module.css

@@ -0,0 +1,27 @@
+/*甜甜圈图专用css*/
+.label-line {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: dash 800ms ease forwards;
+  }
+  
+  .label-text {
+    opacity: 0;
+    animation: show 800ms ease forwards;
+  }
+  
+  .inner-arc {
+    animation: dash 2s ease forwards;
+  }
+  
+  @keyframes dash {
+    100% {
+      stroke-dashoffset: 0%;
+    }
+  }
+  
+  @keyframes show {
+    100% {
+      opacity: 1;
+    }
+  }