@easyv/charts 1.2.1 → 1.2.2

package/lib/components/PieChart.js

@@ -1,1062 +1,1070 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require(".");
-
-var _context = require("../context");
-
-var _utils = require("../utils");
-
-var _d3v = require("d3v7");
-
-var _popmotion = require("popmotion");
-
-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; }
-
-var PI = Math.PI;
-var defaultChart = {
-  outerRadius: 1,
-  innerRadius: 0,
-  cornerRadius: 0,
-  rose: false,
-  roseType: 'radius',
-  baseRadius: 0,
-  padAngle: 0
-};
-var defaultAngle = {
-  startAngle: 0,
-  endAngle: 360,
-  antiClockwise: false
-};
-
-var nameDy = function nameDy(showValue, showPercent, mode, dir) {
-  if (showValue || showPercent) {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-2.6em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir * 1.1 + "em";
-    } else {
-      return 0;
-    }
-  }
-};
-
-var valueDy = function valueDy(value1, mode, dir) {
-  if (value1) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-1.1em";
-    } else {
-      return 0;
-    }
-  }
-};
-
-var percentDy_ = function percentDy_(showName, showValue, mode, dir) {
-  if (showValue) {
-    return 0;
-  }
-
-  if (showName) {
-    if (mode == 'vertical') {
-      return '1.5em';
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == 'vertical') {
-      return dir * 1.1 + 'em';
-    } else {
-      return 0;
-    }
-  }
-};
-
-var percentX = function percentX(showName, showValue, mode, x) {
-  if (showValue) {
-    return '';
-  }
-
-  if (showName) {
-    if (mode == 'vertical') {
-      return x;
-    } else {
-      return '';
-    }
-  } else {
-    return x;
-  }
-};
-
-var percentDx = function percentDx(showName, showValue, mode) {
-  if (showValue) {
-    return '0.5em';
-  }
-
-  if (showName) {
-    if (mode == 'vertical') {
-      return 0;
-    } else {
-      return '0.5em';
-    }
-  } else {
-    return 0;
-  }
-};
-
-var percentDy = function percentDy(showName, showValue, mode) {
-  if (showValue) {
-    return 0;
-  }
-
-  if (showName) {
-    if (mode == 'vertical') {
-      return '1.5em';
-    } else {
-      return 0;
-    }
-  } else {
-    return 0;
-  }
-};
-
-var valueDx = function valueDx(showName, mode) {
-  if (!showName) {
-    return '';
-  }
-
-  if (mode == 'vertical') {
-    return '';
-  } else {
-    return '0.5em';
-  }
-};
-
-var getCoord = function getCoord(deg, radius) {
-  var x = Math.cos(deg) * radius,
-      y = Math.sin(deg) * radius;
-  return [x, y];
-};
-
-var getRoseRadius = function getRoseRadius(_ref) {
-  var innerRadius = _ref.innerRadius,
-      baseRadius = _ref.baseRadius;
-  return innerRadius + (1 - innerRadius) * baseRadius;
-};
-
-var getAngle = function getAngle(_ref2) {
-  var startAngle = _ref2.startAngle,
-      endAngle = _ref2.endAngle,
-      antiClockwise = _ref2.antiClockwise,
-      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["startAngle", "endAngle", "antiClockwise"]);
-  if (antiClockwise) return _objectSpread(_objectSpread({}, rest), {}, {
-    startAngle: endAngle - 180,
-    endAngle: startAngle - 180
-  });
-  return _objectSpread(_objectSpread({}, rest), {}, {
-    startAngle: startAngle,
-    endAngle: endAngle
-  });
-};
-
-var getArc = function getArc(radius, _ref3, series) {
-  var _ref3$padAngle = _ref3.padAngle,
-      padAngle = _ref3$padAngle === void 0 ? 0 : _ref3$padAngle,
-      _ref3$innerRadius = _ref3.innerRadius,
-      innerRadius = _ref3$innerRadius === void 0 ? 0 : _ref3$innerRadius,
-      _ref3$outerRadius = _ref3.outerRadius,
-      outerRadius = _ref3$outerRadius === void 0 ? 1 : _ref3$outerRadius,
-      _ref3$cornerRadius = _ref3.cornerRadius,
-      cornerRadius = _ref3$cornerRadius === void 0 ? 0 : _ref3$cornerRadius,
-      _ref3$startAngle = _ref3.startAngle,
-      startAngle = _ref3$startAngle === void 0 ? 0 : _ref3$startAngle,
-      _ref3$endAngle = _ref3.endAngle,
-      endAngle = _ref3$endAngle === void 0 ? 360 : _ref3$endAngle,
-      rest = (0, _objectWithoutProperties2["default"])(_ref3, ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"]);
-  return _objectSpread(_objectSpread({}, rest), {}, {
-    type: 'pie',
-    fieldName: series.fieldName,
-    displayName: series.displayName || rest.data.s,
-    series: series,
-    innerRadius: innerRadius * radius,
-    outerRadius: outerRadius * radius,
-    arc: (0, _d3v.arc)().innerRadius(innerRadius * radius).outerRadius(outerRadius * radius).cornerRadius(cornerRadius).startAngle(startAngle).endAngle(endAngle).padAngle(padAngle)
-  });
-};
-
-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
-  } : _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,
-      animateCTS = _ref5$config$animatio2.textStyle,
-      _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;
-
-  var _useContext = (0, _react.useContext)(_context.chartContext),
-      id = _useContext.id,
-      chartWidth = _useContext.width,
-      chartHeight = _useContext.height,
-      triggerOnRelative = _useContext.triggerOnRelative,
-      onEmit = _useContext.onEmit;
-
-  var _useState = (0, _react.useState)(1),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      y = _useState2[0],
-      setY = _useState2[1];
-
-  var radius = Math.min(chartWidth, chartHeight) / 2 * outerRadius;
-  var arcsFunc = (0, _react.useMemo)(function () {
-    var _getAngle = getAngle(angle),
-        _getAngle$startAngle = _getAngle.startAngle,
-        startAngle = _getAngle$startAngle === void 0 ? 0 : _getAngle$startAngle,
-        _getAngle$endAngle = _getAngle.endAngle,
-        endAngle = _getAngle$endAngle === void 0 ? 360 : _getAngle$endAngle;
-
-    var arcsFunc = (0, _d3v.pie)().startAngle(startAngle * PI / 180).endAngle(endAngle * PI / 180).value(function (d) {
-      return d.y;
-    });
-    return arcsFunc;
-  }, [angle]);
-  var arcs = (0, _react.useMemo)(function () {
-    var _chart = Object.assign(defaultChart, chart);
-
-    var innerRadius = _chart.innerRadius,
-        outerRadius = _chart.outerRadius,
-        rose = _chart.rose,
-        cornerRadius = _chart.cornerRadius,
-        padAngle = _chart.padAngle,
-        roseType = _chart.roseType;
-
-    var _padAngle = padAngle * Math.PI / 180;
-
-    switch (order) {
-      case '':
-        arcsFunc.sort(null);
-        break;
-
-      case 'desc':
-        arcsFunc.sort(function (a, b) {
-          return b.y - a.y;
-        });
-        break;
-
-      case 'asc':
-        arcsFunc.sort(function (a, b) {
-          return a.y - b.y;
-        });
-        break;
-    }
-
-    var arcs = arcsFunc(data);
-    var legendDataWithPercent = (0, _utils.getDataWithPercent)(arcs, legendPrecision);
-
-    var _legendDataWithPercent = (0, _utils.sortPie)(legendDataWithPercent, order);
-
-    if (rose) {
-      var domain = (0, _d3v.extent)(_legendDataWithPercent, function (d) {
-        return d.value;
-      });
-      var roseRadius = getRoseRadius(_chart);
-      var scaler = (0, _d3v.scaleLinear)().domain(domain).range([roseRadius, 1]);
-
-      var _angle = PI * 2 / _legendDataWithPercent.length;
-
-      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,
-          endAngle: roseType == 'area' ? _angle * (index + 1) : endAngle,
-          cornerRadius: cornerRadius,
-          padAngle: _padAngle,
-          innerRadius: innerRadius,
-          outerRadius: scaler(arc.value)
-        });
-      });
-    }
-
-    return _legendDataWithPercent.map(function (arc, index) {
-      return _objectSpread(_objectSpread({}, arc), {}, {
-        id: id + '_linear_' + index,
-        cornerRadius: cornerRadius,
-        padAngle: _padAngle,
-        innerRadius: innerRadius,
-        outerRadius: outerRadius
-      });
-    });
-  }, [data, arcsFunc, chart, legendPrecision]);
-
-  var _arcs = (0, _react.useMemo)(function () {
-    var seriesLength = series.size;
-    if (!seriesLength) return [];
-
-    var _series = (0, _toConsumableArray2["default"])(series.values());
-
-    return arcs.map(function (arc, index) {
-      return getArc(radius, arc, _series[index]);
-    });
-  }, [series, arcs, radius]);
-
-  var onClick = (0, _react.useCallback)(function (e) {
-    return onEvent({
-      currentIndex: +e.currentTarget.dataset.index,
-      type: 'onClick'
-    });
-  }, [onEvent]);
-  var onMouseEnter = (0, _react.useCallback)(function (e) {
-    return onEvent({
-      currentIndex: +e.currentTarget.dataset.index,
-      type: 'onMouseEnter'
-    });
-  }, [onEvent]);
-  var onMouseLeave = (0, _react.useCallback)(function (e) {
-    return onEvent({
-      currentIndex: +e.currentTarget.dataset.index,
-      type: 'onMouseLeave'
-    });
-  }, [onEvent]);
-  (0, _react.useLayoutEffect)(function () {
-    var animation;
-
-    if (!!on) {
-      animation = (0, _popmotion.animate)({
-        from: 0,
-        to: 1,
-        duration: 500,
-        ease: _popmotion.linear,
-        onPlay: function onPlay() {},
-        onUpdate: function onUpdate(v) {
-          setY(v);
-        },
-        onComplete: function onComplete() {
-          var _data = arcs[+currentIndex].data;
-          triggerOnRelative(_data);
-          onEmit('carousel', _data);
-        }
-      });
-    } else {
-      if (currentIndex !== null && trigger === 'onClick') {
-        var _data = arcs[+currentIndex].data;
-        triggerOnRelative(_data);
-        onEmit(trigger, _data);
-      }
-    }
-
-    return function () {
-      prevIndex.current = currentIndex;
-      animation && animation.stop();
-      animation = null;
-    };
-  }, [JSON.stringify(arcs), on, currentIndex, trigger, onEmit, triggerOnRelative]);
-  var halfChartWidth = chartWidth / 2;
-  var halfChartHeight = chartHeight / 2;
-  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", {
-    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(RingLabel, {
-    config: _objectSpread(_objectSpread({}, label), {}, {
-      maxRadius: maxRadius + 2
-    }),
-    arcs: _arcs
-  }))), /*#__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 = 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 = current ? animateCTS : categoryText.textStyle; //这里把textstyle拿出来
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
-      key: index
-    }, /*#__PURE__*/_react["default"].createElement("path", {
-      "data-index": dataIndex,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      d: path,
-      stroke: show ? color : 'none',
-      strokeWidth: show ? strokeWidth : '0',
-      fill: 'url(#' + id + ')',
-      fillOpacity: fillOpacity
-    }), //装饰物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 + (current ? radiusWidthAdd : 0))(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",
-        pointerEvents: "none"
-      }),
-      fill: categoryTextStyle.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: 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,
-    style: {
-      transform: "rotate(" + -rotate_ + "deg)"
-    }
-  }, /*#__PURE__*/_react["default"].createElement(Current, {
-    config: current,
-    width: width,
-    height: height,
-    data: _arcs,
-    currentIndex: +currentIndex
-  })))), decorate && /*#__PURE__*/_react["default"].createElement(_.ConicalGradient, {
-    width: width,
-    height: height,
-    centerX: halfChartWidth + marginLeft,
-    centerY: halfChartHeight + marginTop,
-    config: decorate,
-    arcs: _arcs,
-    radius: radius
-  }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
-    series: _arcs,
-    formatter: formatter
-  })));
-});
-
-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,
-      textBreak = _ref9$config$name.textBreak,
-      _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,
-      width = _ref9.width,
-      height = _ref9.height,
-      data = _ref9.data,
-      currentIndex = _ref9.currentIndex;
-
-  var _data = (0, _react.useMemo)(function () {
-    var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
-    return (0, _utils.sortPie)(legendDataWithPercent, '');
-  }, [data, precision]);
-
-  var currentData = _data[currentIndex];
-  if (!currentData) return null;
-  var displayName = currentData.displayName,
-      fieldName = currentData.fieldName,
-      value = currentData.value,
-      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,
-    height: height,
-    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
-    pointerEvents: "none"
-  },
-      boxStyle = {
-    //弹性盒子样式，用于当前值的上下居中对齐等
-    width: width,
-    height: height,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center"
-  };
-  return show && /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    style: foreignStyle
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: boxStyle
-  }, //类目名称
-  showName && /*#__PURE__*/_react["default"].createElement("div", {
-    style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(nameFont)), {}, {
-      margin: gap / 2 + "px 0",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center"
-    })
-  }, 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)",
-      margin: gap / 2 + "px 0"
-    })
-  }, value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("span", {
-    style: {
-      transform: "translate(" + translateSuffixX + "px," + translateSuffixY + "px)",
-      fontSize: fontSize
-    }
-  }, text)), //百分比值
-  showPercent && /*#__PURE__*/_react["default"].createElement("span", {
-    style: _objectSpread(_objectSpread({
-      transform: "translate(" + translatePercentX + "px," + translatePercentY + "px)"
-    }, (0, _utils.getFontStyle)(percentFont)), {}, {
-      margin: gap / 2 + "px 0"
-    })
-  }, percent + '%')));
-};
-
-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);
-  var _arcs = (0, _react.useMemo)(function () {
-    return (0, _utils.getDataWithPercent)(arcs, precision);
-  }, [arcs, precision]); // useEffect(() => {
-  //   if (labels) {
-  //     const children = [...labels.children];
-  //     const bbox = children.reduce(
-  //       (prev, current) => {
-  //         const { topRight, bottomRight, bottomLeft, topLeft } = prev;
-  //         const { x, y, height } = current.getBBox();
-  //         current._y1 = y;
-  //         current._y2 = y + height;
-  //         current._delta = 0;
-  //         if (x > 0) {
-  //           if (y > 0) {
-  //             bottomRight.push(current);
-  //           } else {
-  //             topRight.push(current);
-  //           }
-  //         } else {
-  //           if (y > 0) {
-  //             bottomLeft.push(current);
-  //           } else {
-  //             topLeft.push(current);
-  //           }
-  //         }
-  //         return prev;
-  //       },
-  //       {
-  //         topRight: [],
-  //         bottomRight: [],
-  //         bottomLeft: [],
-  //         topLeft: [],
-  //       }
-  //     );
-  //     console.log('bbox: ', bbox);
-  //   }
-  // }, [labels]);
-
-
-  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),
-        x = _arc$centroid2[0],
-        y = _arc$centroid2[1];
-
-    var midAngle = Math.atan2(y, x);
-
-    var _getCoord = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
-        _getCoord2 = (0, _slicedToArray2["default"])(_getCoord, 2),
-        x1 = _getCoord2[0],
-        y1 = _getCoord2[1];
-
-    var radius = (maxRadius ? maxRadius : outerRadius) + distance;
-
-    var _getCoord3 = getCoord(midAngle, radius),
-        _getCoord4 = (0, _slicedToArray2["default"])(_getCoord3, 2),
-        x2 = _getCoord4[0],
-        y2 = _getCoord4[1];
-
-    var direction = x2 < 0 ? -1 : 1;
-    var x3 = x2 + lineLength * direction;
-
-    var _x = x3 + (translateX + 6) * direction;
-
-    var _showName = showName && displayName;
-
-    var _showValue = showValue && (value || showSuffix);
-
-    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: 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",
-      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')
-    }, value), 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 ? ')' : ''))));
-  }));
-};
-
-var RingLabel = function RingLabel(_ref12) {
-  var _ref12$config = _ref12.config,
-      _ref12$config$maxRadi = _ref12$config.maxRadius,
-      maxRadius = _ref12$config$maxRadi === void 0 ? 0 : _ref12$config$maxRadi,
-      lineLength = _ref12$config.lineLength,
-      lineColor = _ref12$config.lineColor,
-      distance = _ref12$config.distance,
-      mode = _ref12$config.mode,
-      show = _ref12$config.show,
-      _ref12$config$transla = _ref12$config.translate,
-      translateX = _ref12$config$transla.x,
-      translateY = _ref12$config$transla.y,
-      _ref12$config$name = _ref12$config.name,
-      showName = _ref12$config$name.show,
-      nameFont = _ref12$config$name.font,
-      _ref12$config$value = _ref12$config.value,
-      showValue = _ref12$config$value.show,
-      valueFont = _ref12$config$value.font,
-      _ref12$config$value$s = _ref12$config$value.suffix,
-      showSuffix = _ref12$config$value$s.show,
-      text = _ref12$config$value$s.text,
-      suffixFontSize = _ref12$config$value$s.fontSize,
-      _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,
-      arcs = _ref12.arcs;
-
-  var _arcs = (0, _react.useMemo)(function () {
-    return (0, _utils.getDataWithPercent)(arcs, precision);
-  }, [arcs, precision]);
-
-  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref13, index) {
-    var _ref13$series$color = _ref13.series.color,
-        type = _ref13$series$color.type,
-        pure = _ref13$series$color.pure,
-        stops = _ref13$series$color.linear.stops,
-        realData = _ref13.data,
-        displayName = _ref13.displayName,
-        value = _ref13.value,
-        percent = _ref13.percent,
-        arc = _ref13.arc,
-        outerRadius = _ref13.outerRadius,
-        actualIndex = _ref13.index;
-
-    var _arc$centroid3 = arc.centroid(),
-        _arc$centroid4 = (0, _slicedToArray2["default"])(_arc$centroid3, 2),
-        x = _arc$centroid4[0],
-        y = _arc$centroid4[1];
-
-    var midAngle = Math.atan2(y, x);
-
-    var _getCoord5 = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
-        _getCoord6 = (0, _slicedToArray2["default"])(_getCoord5, 2),
-        x1 = _getCoord6[0],
-        y1 = _getCoord6[1];
-
-    var radius = (maxRadius ? maxRadius : outerRadius) + distance;
-
-    var _getCoord7 = getCoord(midAngle, radius),
-        _getCoord8 = (0, _slicedToArray2["default"])(_getCoord7, 2),
-        x2 = _getCoord8[0],
-        y2 = _getCoord8[1];
-
-    var directionX = x2 < 0 ? -1 : 1;
-    var directionY = y2 < 0 ? -1 : 1;
-    var x3 = x2 + lineLength * directionX;
-
-    var _x = x3 + (translateX + 6) * directionX;
-
-    var _showName = showName && displayName;
-
-    var _showValue = showValue && (value || showSuffix);
-
-    return show && (_showName || showPercent || _showValue) && /*#__PURE__*/_react["default"].createElement("g", {
-      key: index
-    }, /*#__PURE__*/_react["default"].createElement("path", {
-      className: _piechartModule["default"]['label-line'],
-      style: {
-        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms")
-      },
-      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: _piechartModule["default"]['label-text'],
-      style: {
-        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 ? ')' : ''))));
-  }));
-};
-
-var _default = (0, _.Mapping)((0, _.Carousel)(Component));
-
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require(".");
+
+var _context = require("../context");
+
+var _utils = require("../utils");
+
+var _d3v = require("d3v7");
+
+var _popmotion = require("popmotion");
+
+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; }
+
+var PI = Math.PI;
+var defaultChart = {
+  outerRadius: 1,
+  innerRadius: 0,
+  cornerRadius: 0,
+  rose: false,
+  roseType: 'radius',
+  baseRadius: 0,
+  padAngle: 0
+};
+var defaultAngle = {
+  startAngle: 0,
+  endAngle: 360,
+  antiClockwise: false
+};
+
+var nameDy = function nameDy(showValue, showPercent, mode, dir) {
+  if (showValue || showPercent) {
+    if (mode == 'vertical') {
+      return dir == 1 ? '1.1em' : '-2.6em';
+    } else {
+      return 0;
+    }
+  } else {
+    if (mode == 'vertical') {
+      return dir * 1.1 + 'em';
+    } else {
+      return 0;
+    }
+  }
+};
+
+var valueDy = function valueDy(value1, mode, dir) {
+  if (value1) {
+    if (mode == 'vertical') {
+      return '1.5em';
+    } else {
+      return 0;
+    }
+  } else {
+    if (mode == 'vertical') {
+      return dir == 1 ? '1.1em' : '-1.1em';
+    } else {
+      return 0;
+    }
+  }
+};
+
+var percentDy_ = function percentDy_(showName, showValue, mode, dir) {
+  if (showValue) {
+    return 0;
+  }
+
+  if (showName) {
+    if (mode == 'vertical') {
+      return '1.5em';
+    } else {
+      return 0;
+    }
+  } else {
+    if (mode == 'vertical') {
+      return dir * 1.1 + 'em';
+    } else {
+      return 0;
+    }
+  }
+};
+
+var percentX = function percentX(showName, showValue, mode, x) {
+  if (showValue) {
+    return '';
+  }
+
+  if (showName) {
+    if (mode == 'vertical') {
+      return x;
+    } else {
+      return '';
+    }
+  } else {
+    return x;
+  }
+};
+
+var percentDx = function percentDx(showName, showValue, mode) {
+  if (showValue) {
+    return '0.5em';
+  }
+
+  if (showName) {
+    if (mode == 'vertical') {
+      return 0;
+    } else {
+      return '0.5em';
+    }
+  } else {
+    return 0;
+  }
+};
+
+var percentDy = function percentDy(showName, showValue, mode) {
+  if (showValue) {
+    return 0;
+  }
+
+  if (showName) {
+    if (mode == 'vertical') {
+      return '1.5em';
+    } else {
+      return 0;
+    }
+  } else {
+    return 0;
+  }
+};
+
+var valueDx = function valueDx(showName, mode) {
+  if (!showName) {
+    return '';
+  }
+
+  if (mode == 'vertical') {
+    return '';
+  } else {
+    return '0.5em';
+  }
+};
+
+var getCoord = function getCoord(deg, radius) {
+  var x = Math.cos(deg) * radius,
+      y = Math.sin(deg) * radius;
+  return [x, y];
+};
+
+var getRoseRadius = function getRoseRadius(_ref) {
+  var innerRadius = _ref.innerRadius,
+      baseRadius = _ref.baseRadius;
+  return innerRadius + (1 - innerRadius) * baseRadius;
+};
+
+var getAngle = function getAngle(_ref2) {
+  var startAngle = _ref2.startAngle,
+      endAngle = _ref2.endAngle,
+      antiClockwise = _ref2.antiClockwise,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["startAngle", "endAngle", "antiClockwise"]);
+  if (antiClockwise) return _objectSpread(_objectSpread({}, rest), {}, {
+    startAngle: endAngle - 180,
+    endAngle: startAngle - 180
+  });
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    startAngle: startAngle,
+    endAngle: endAngle
+  });
+};
+
+var getArc = function getArc(radius, _ref3, series) {
+  var _ref3$padAngle = _ref3.padAngle,
+      padAngle = _ref3$padAngle === void 0 ? 0 : _ref3$padAngle,
+      _ref3$innerRadius = _ref3.innerRadius,
+      innerRadius = _ref3$innerRadius === void 0 ? 0 : _ref3$innerRadius,
+      _ref3$outerRadius = _ref3.outerRadius,
+      outerRadius = _ref3$outerRadius === void 0 ? 1 : _ref3$outerRadius,
+      _ref3$cornerRadius = _ref3.cornerRadius,
+      cornerRadius = _ref3$cornerRadius === void 0 ? 0 : _ref3$cornerRadius,
+      _ref3$startAngle = _ref3.startAngle,
+      startAngle = _ref3$startAngle === void 0 ? 0 : _ref3$startAngle,
+      _ref3$endAngle = _ref3.endAngle,
+      endAngle = _ref3$endAngle === void 0 ? 360 : _ref3$endAngle,
+      rest = (0, _objectWithoutProperties2["default"])(_ref3, ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"]);
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    type: 'pie',
+    fieldName: series.fieldName,
+    displayName: series.displayName || rest.data.s,
+    series: series,
+    innerRadius: innerRadius * radius,
+    outerRadius: outerRadius * radius,
+    arc: (0, _d3v.arc)().innerRadius(innerRadius * radius).outerRadius(outerRadius * radius).cornerRadius(cornerRadius).startAngle(startAngle).endAngle(endAngle).padAngle(padAngle)
+  });
+};
+
+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
+  } : _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,
+      animateCTS = _ref5$config$animatio2.textStyle,
+      _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;
+
+  var _useContext = (0, _react.useContext)(_context.chartContext),
+      id = _useContext.id,
+      chartWidth = _useContext.width,
+      chartHeight = _useContext.height,
+      triggerOnRelative = _useContext.triggerOnRelative,
+      onEmit = _useContext.onEmit;
+
+  var _useState = (0, _react.useState)(1),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      y = _useState2[0],
+      setY = _useState2[1];
+
+  var radius = Math.min(chartWidth, chartHeight) / 2 * outerRadius;
+  var arcsFunc = (0, _react.useMemo)(function () {
+    var _getAngle = getAngle(angle),
+        _getAngle$startAngle = _getAngle.startAngle,
+        startAngle = _getAngle$startAngle === void 0 ? 0 : _getAngle$startAngle,
+        _getAngle$endAngle = _getAngle.endAngle,
+        endAngle = _getAngle$endAngle === void 0 ? 360 : _getAngle$endAngle;
+
+    var arcsFunc = (0, _d3v.pie)().startAngle(startAngle * PI / 180).endAngle(endAngle * PI / 180).value(function (d) {
+      return d.y;
+    });
+    return arcsFunc;
+  }, [angle]);
+  var arcs = (0, _react.useMemo)(function () {
+    var _chart = Object.assign(defaultChart, chart);
+
+    var innerRadius = _chart.innerRadius,
+        outerRadius = _chart.outerRadius,
+        rose = _chart.rose,
+        cornerRadius = _chart.cornerRadius,
+        padAngle = _chart.padAngle,
+        roseType = _chart.roseType;
+
+    var _padAngle = padAngle * Math.PI / 180;
+
+    switch (order) {
+      case '':
+        arcsFunc.sort(null);
+        break;
+
+      case 'desc':
+        arcsFunc.sort(function (a, b) {
+          return b.y - a.y;
+        });
+        break;
+
+      case 'asc':
+        arcsFunc.sort(function (a, b) {
+          return a.y - b.y;
+        });
+        break;
+    }
+
+    var arcs = arcsFunc(data);
+    var legendDataWithPercent = (0, _utils.getDataWithPercent)(arcs, legendPrecision);
+
+    var _legendDataWithPercent = (0, _utils.sortPie)(legendDataWithPercent, order);
+
+    if (rose) {
+      var domain = (0, _d3v.extent)(_legendDataWithPercent, function (d) {
+        return d.value;
+      });
+      var roseRadius = getRoseRadius(_chart);
+      var scaler = (0, _d3v.scaleLinear)().domain(domain).range([roseRadius, 1]);
+
+      var _angle = PI * 2 / _legendDataWithPercent.length;
+
+      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,
+          endAngle: roseType == 'area' ? _angle * (index + 1) : endAngle,
+          cornerRadius: cornerRadius,
+          padAngle: _padAngle,
+          innerRadius: innerRadius,
+          outerRadius: scaler(arc.value)
+        });
+      });
+    }
+
+    return _legendDataWithPercent.map(function (arc, index) {
+      return _objectSpread(_objectSpread({}, arc), {}, {
+        id: id + '_linear_' + index,
+        cornerRadius: cornerRadius,
+        padAngle: _padAngle,
+        innerRadius: innerRadius,
+        outerRadius: outerRadius
+      });
+    });
+  }, [data, arcsFunc, chart, legendPrecision]);
+
+  var _arcs = (0, _react.useMemo)(function () {
+    var seriesLength = series.size;
+    if (!seriesLength) return [];
+
+    var _series = (0, _toConsumableArray2["default"])(series.values());
+
+    return arcs.map(function (arc, index) {
+      return getArc(radius, arc, _series[index]);
+    });
+  }, [series, arcs, radius]);
+
+  var onClick = (0, _react.useCallback)(function (e) {
+    return onEvent({
+      currentIndex: +e.currentTarget.dataset.index,
+      type: 'onClick'
+    });
+  }, [onEvent]);
+  var onMouseEnter = (0, _react.useCallback)(function (e) {
+    return onEvent({
+      currentIndex: +e.currentTarget.dataset.index,
+      type: 'onMouseEnter'
+    });
+  }, [onEvent]);
+  var onMouseLeave = (0, _react.useCallback)(function (e) {
+    return onEvent({
+      currentIndex: +e.currentTarget.dataset.index,
+      type: 'onMouseLeave'
+    });
+  }, [onEvent]);
+  (0, _react.useLayoutEffect)(function () {
+    var animation;
+
+    if (!!on) {
+      animation = (0, _popmotion.animate)({
+        from: 0,
+        to: 1,
+        duration: 500,
+        ease: _popmotion.linear,
+        onPlay: function onPlay() {},
+        onUpdate: function onUpdate(v) {
+          setY(v);
+        },
+        onComplete: function onComplete() {
+          var _data = arcs[+currentIndex].data;
+          triggerOnRelative(_data);
+          onEmit('carousel', _data);
+        }
+      });
+    } else {
+      if (currentIndex !== null && trigger === 'onClick') {
+        var _data = arcs[+currentIndex].data;
+        triggerOnRelative(_data);
+        onEmit(trigger, _data);
+      }
+    }
+
+    return function () {
+      prevIndex.current = currentIndex;
+      animation && animation.stop();
+      animation = null;
+    };
+  }, [JSON.stringify(arcs), on, currentIndex, trigger, onEmit, triggerOnRelative]);
+  var halfChartWidth = chartWidth / 2;
+  var halfChartHeight = chartHeight / 2;
+  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", {
+    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(RingLabel, {
+    config: _objectSpread(_objectSpread({}, label), {}, {
+      maxRadius: maxRadius + 2
+    }),
+    arcs: _arcs
+  }))), /*#__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 = 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 = current ? animateCTS : categoryText.textStyle; //这里把textstyle拿出来
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("path", {
+      "data-index": dataIndex,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      d: path,
+      stroke: show ? color : 'none',
+      strokeWidth: show ? strokeWidth : '0',
+      fill: 'url(#' + id + ')',
+      fillOpacity: fillOpacity
+    }), //装饰物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 + (current ? radiusWidthAdd : 0))(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',
+        pointerEvents: 'none'
+      }),
+      fill: categoryTextStyle.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: 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,
+    style: {
+      transform: 'rotate(' + -rotate_ + 'deg)'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Current, {
+    config: current,
+    width: width,
+    height: height,
+    data: _arcs,
+    currentIndex: +currentIndex
+  })))), decorate && /*#__PURE__*/_react["default"].createElement(_.ConicalGradient, {
+    width: width,
+    height: height,
+    centerX: halfChartWidth + marginLeft,
+    centerY: halfChartHeight + marginTop,
+    config: decorate,
+    arcs: _arcs,
+    radius: radius
+  }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
+    series: _arcs,
+    formatter: formatter
+  })));
+});
+
+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,
+      nameColor = _ref9$config$name.sameColor,
+      nameFont = _ref9$config$name.font,
+      textBreak = _ref9$config$name.textBreak,
+      _ref9$config$percent = _ref9$config.percent,
+      showPercent = _ref9$config$percent.show,
+      percentColor = _ref9$config$percent.sameColor,
+      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,
+      valueColor = _ref9$config$value.sameColor,
+      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,
+      width = _ref9.width,
+      height = _ref9.height,
+      data = _ref9.data,
+      currentIndex = _ref9.currentIndex;
+
+  var _data = (0, _react.useMemo)(function () {
+    var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
+    return (0, _utils.sortPie)(legendDataWithPercent, '');
+  }, [data, precision]);
+
+  var currentData = _data[currentIndex];
+  if (!currentData) return null;
+  var displayName = currentData.displayName,
+      fieldName = currentData.fieldName,
+      value = currentData.value,
+      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,
+    height: height,
+    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
+    pointerEvents: 'none'
+  },
+      boxStyle = {
+    //弹性盒子样式，用于当前值的上下居中对齐等
+    width: width,
+    height: height,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  };
+  var seriesColor = currentData.series.color;
+  seriesColor = seriesColor.type == 'pure' ? seriesColor.pure : seriesColor.linear.stops[0].color;
+  return show && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: foreignStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: boxStyle
+  }, //类目名称
+  showName && /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, (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)',
+      margin: gap / 2 + 'px 0',
+      color: valueColor ? seriesColor : valueFont.color
+    })
+  }, value, showSuffix && text && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      transform: 'translate(' + translateSuffixX + 'px,' + translateSuffixY + 'px)',
+      fontSize: fontSize
+    }
+  }, text)), //百分比值
+  showPercent && /*#__PURE__*/_react["default"].createElement("span", {
+    style: _objectSpread(_objectSpread({
+      transform: 'translate(' + translatePercentX + 'px,' + translatePercentY + 'px)'
+    }, (0, _utils.getFontStyle)(percentFont)), {}, {
+      margin: gap / 2 + 'px 0',
+      color: percentColor ? seriesColor : percentFont.color
+    })
+  }, percent + '%')));
+};
+
+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);
+  var _arcs = (0, _react.useMemo)(function () {
+    return (0, _utils.getDataWithPercent)(arcs, precision);
+  }, [arcs, precision]); // useEffect(() => {
+  //   if (labels) {
+  //     const children = [...labels.children];
+  //     const bbox = children.reduce(
+  //       (prev, current) => {
+  //         const { topRight, bottomRight, bottomLeft, topLeft } = prev;
+  //         const { x, y, height } = current.getBBox();
+  //         current._y1 = y;
+  //         current._y2 = y + height;
+  //         current._delta = 0;
+  //         if (x > 0) {
+  //           if (y > 0) {
+  //             bottomRight.push(current);
+  //           } else {
+  //             topRight.push(current);
+  //           }
+  //         } else {
+  //           if (y > 0) {
+  //             bottomLeft.push(current);
+  //           } else {
+  //             topLeft.push(current);
+  //           }
+  //         }
+  //         return prev;
+  //       },
+  //       {
+  //         topRight: [],
+  //         bottomRight: [],
+  //         bottomLeft: [],
+  //         topLeft: [],
+  //       }
+  //     );
+  //     console.log('bbox: ', bbox);
+  //   }
+  // }, [labels]);
+
+
+  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),
+        x = _arc$centroid2[0],
+        y = _arc$centroid2[1];
+
+    var midAngle = Math.atan2(y, x);
+
+    var _getCoord = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
+        _getCoord2 = (0, _slicedToArray2["default"])(_getCoord, 2),
+        x1 = _getCoord2[0],
+        y1 = _getCoord2[1];
+
+    var radius = (maxRadius ? maxRadius : outerRadius) + distance;
+
+    var _getCoord3 = getCoord(midAngle, radius),
+        _getCoord4 = (0, _slicedToArray2["default"])(_getCoord3, 2),
+        x2 = _getCoord4[0],
+        y2 = _getCoord4[1];
+
+    var direction = x2 < 0 ? -1 : 1;
+    var x3 = x2 + lineLength * direction;
+
+    var _x = x3 + (translateX + 6) * direction;
+
+    var _showName = showName && displayName;
+
+    var _showValue = showValue && (value || showSuffix);
+
+    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: 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",
+      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')
+    }, value), 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 ? ')' : ''))));
+  }));
+};
+
+var RingLabel = function RingLabel(_ref12) {
+  var _ref12$config = _ref12.config,
+      _ref12$config$maxRadi = _ref12$config.maxRadius,
+      maxRadius = _ref12$config$maxRadi === void 0 ? 0 : _ref12$config$maxRadi,
+      lineLength = _ref12$config.lineLength,
+      lineColor = _ref12$config.lineColor,
+      distance = _ref12$config.distance,
+      mode = _ref12$config.mode,
+      show = _ref12$config.show,
+      _ref12$config$transla = _ref12$config.translate,
+      translateX = _ref12$config$transla.x,
+      translateY = _ref12$config$transla.y,
+      _ref12$config$name = _ref12$config.name,
+      showName = _ref12$config$name.show,
+      nameFont = _ref12$config$name.font,
+      _ref12$config$value = _ref12$config.value,
+      showValue = _ref12$config$value.show,
+      valueFont = _ref12$config$value.font,
+      _ref12$config$value$s = _ref12$config$value.suffix,
+      showSuffix = _ref12$config$value$s.show,
+      text = _ref12$config$value$s.text,
+      suffixFontSize = _ref12$config$value$s.fontSize,
+      _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,
+      arcs = _ref12.arcs;
+
+  var _arcs = (0, _react.useMemo)(function () {
+    return (0, _utils.getDataWithPercent)(arcs, precision);
+  }, [arcs, precision]);
+
+  return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref13, index) {
+    var _ref13$series$color = _ref13.series.color,
+        type = _ref13$series$color.type,
+        pure = _ref13$series$color.pure,
+        stops = _ref13$series$color.linear.stops,
+        realData = _ref13.data,
+        displayName = _ref13.displayName,
+        value = _ref13.value,
+        percent = _ref13.percent,
+        arc = _ref13.arc,
+        outerRadius = _ref13.outerRadius,
+        actualIndex = _ref13.index;
+
+    var _arc$centroid3 = arc.centroid(),
+        _arc$centroid4 = (0, _slicedToArray2["default"])(_arc$centroid3, 2),
+        x = _arc$centroid4[0],
+        y = _arc$centroid4[1];
+
+    var midAngle = Math.atan2(y, x);
+
+    var _getCoord5 = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
+        _getCoord6 = (0, _slicedToArray2["default"])(_getCoord5, 2),
+        x1 = _getCoord6[0],
+        y1 = _getCoord6[1];
+
+    var radius = (maxRadius ? maxRadius : outerRadius) + distance;
+
+    var _getCoord7 = getCoord(midAngle, radius),
+        _getCoord8 = (0, _slicedToArray2["default"])(_getCoord7, 2),
+        x2 = _getCoord8[0],
+        y2 = _getCoord8[1];
+
+    var directionX = x2 < 0 ? -1 : 1;
+    var directionY = y2 < 0 ? -1 : 1;
+    var x3 = x2 + lineLength * directionX;
+
+    var _x = x3 + (translateX + 6) * directionX;
+
+    var _showName = showName && displayName;
+
+    var _showValue = showValue && (value || showSuffix);
+
+    return show && (_showName || showPercent || _showValue) && /*#__PURE__*/_react["default"].createElement("g", {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement("path", {
+      className: _piechartModule["default"]['label-line'],
+      style: {
+        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms")
+      },
+      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: _piechartModule["default"]['label-text'],
+      style: {
+        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 ? ')' : ''))));
+  }));
+};
+
+var _default = (0, _.Mapping)((0, _.Carousel)(Component));
+
 exports["default"] = _default;