@easyv/charts 1.0.44 → 1.0.48

package/src/components/PieChart.js

@@ -1,709 +1,876 @@
-/**
- * 饼环图
- */
-import React, {
-  memo,
-  useMemo,
-  useCallback,
-  useRef,
-  useState,
-  useContext,
-  useLayoutEffect,
-  Fragment,
-} from 'react';
-import { ChartContainer, Carousel, Legend, ConicalGradient, Mapping } from '.';
-import { chartContext } from '../context';
-import {
-  getFontStyle,
-  sortPie,
-  getDataWithPercent,
-  getColorList,
-} from '../utils';
-import { pie, arc, extent, scaleLinear } from 'd3v7';
-import { animate, linear } from 'popmotion';
-import LinearGradient from './LinearGradient';
-import { pieLegendFormatter as legendFormatter } from '../formatter';
-
-const PI = Math.PI;
-
-const defaultChart = {
-  outerRadius: 1,
-  innerRadius: 0,
-  cornerRadius: 0,
-  rose: false,
-  roseType: 'radius',
-  baseRadius: 0,
-  padAngle: 0,
-};
-const defaultAngle = { startAngle: 0, endAngle: 360, antiClockwise: false };
-
-const percentX = (showName, showValue, mode, x) => {
-  if (showValue) {
-    return '';
-  }
-  if (showName) {
-    if (mode == 'vertical') {
-      return x;
-    } else {
-      return '';
-    }
-  } else {
-    return x;
-  }
-};
-
-const percentDx = (showName, showValue, mode) => {
-  if (showValue) {
-    return '0.5em';
-  }
-  if (showName) {
-    if (mode == 'vertical') {
-      return 0;
-    } else {
-      return '0.5em';
-    }
-  } else {
-    return 0;
-  }
-};
-
-const percentDy = (showName, showValue, mode) => {
-  if (showValue) {
-    return 0;
-  }
-  if (showName) {
-    if (mode == 'vertical') {
-      return '1.5em';
-    } else {
-      return 0;
-    }
-  } else {
-    return 0;
-  }
-};
-
-const valueDx = (showName, mode) => {
-  if (!showName) {
-    return '';
-  }
-  if (mode == 'vertical') {
-    return '';
-  } else {
-    return '0.5em';
-  }
-};
-
-const getCoord = (deg, radius) => {
-  var x = Math.cos(deg) * radius,
-    y = Math.sin(deg) * radius;
-  return [x, y];
-};
-
-const getRoseRadius = ({ innerRadius, baseRadius }) =>
-  innerRadius + (1 - innerRadius) * baseRadius;
-
-const getAngle = ({ startAngle, endAngle, antiClockwise, ...rest }) => {
-  if (antiClockwise)
-    return {
-      ...rest,
-      startAngle: endAngle - 180,
-      endAngle: startAngle - 180,
-    };
-  return { ...rest, startAngle, endAngle };
-};
-
-const getArc = (
-  radius,
-  {
-    padAngle = 0,
-    innerRadius = 0,
-    outerRadius = 1,
-    cornerRadius = 0,
-    startAngle = 0,
-    endAngle = 360,
-    ...rest
-  },
-  series
-) => ({
-  ...rest,
-  type: 'pie',
-  fieldName: series.fieldName,
-  displayName: series.displayName || rest.data.s,
-  series: series,
-  innerRadius: innerRadius * radius,
-  outerRadius: outerRadius * radius,
-  arc: arc()
-    .innerRadius(innerRadius * radius)
-    .outerRadius(outerRadius * radius)
-    .cornerRadius(cornerRadius)
-    .startAngle(startAngle)
-    .endAngle(endAngle)
-    .padAngle(padAngle),
-});
-
-const Component = memo(
-  ({
-    config: {
-      chart: {
-        dimension: {
-          chartDimension: { width, height },
-        },
-        label,
-        legend: { formatter = legendFormatter, ...legend },
-        margin: { marginLeft, marginTop },
-      },
-      fan: {
-        chart = defaultChart,
-        chart: { outerRadius = defaultChart.outerRadius },
-        angle = defaultAngle,
-        stroke: { show, strokeWidth, color } = { show: false },
-        decorate,
-        current,
-      } = {},
-      order,
-      series,
-      animation: {
-        on,
-        current: { heighten, opacity },
-      },
-    },
-    state: { currentIndex, trigger },
-    onEvent,
-    data = [],
-  }) => {
-    const prevIndex = useRef(null);
-    const { precision: legendPrecision } = legend.config.percent;
-
-    const {
-      id,
-      width: chartWidth,
-      height: chartHeight,
-      triggerOnRelative,
-      onEmit,
-    } = useContext(chartContext);
-
-    const [y, setY] = useState(1);
-    const radius = (Math.min(chartWidth, chartHeight) / 2) * outerRadius;
-
-    const arcsFunc = useMemo(() => {
-      const { startAngle = 0, endAngle = 360 } = getAngle(angle);
-      const arcsFunc = pie()
-        .startAngle((startAngle * PI) / 180)
-        .endAngle((endAngle * PI) / 180)
-        .value((d) => d.y);
-      return arcsFunc;
-    }, [angle]);
-
-    const arcs = useMemo(() => {
-      const _chart = Object.assign(defaultChart, chart);
-      const {
-        innerRadius,
-        outerRadius,
-        rose,
-        cornerRadius,
-        padAngle,
-        roseType,
-      } = _chart;
-      const _padAngle = (padAngle * Math.PI) / 180;
-
-      switch (order) {
-        case '':
-          arcsFunc.sort(null);
-          break;
-        case 'desc':
-          arcsFunc.sort((a, b) => b.y - a.y);
-          break;
-        case 'asc':
-          arcsFunc.sort((a, b) => a.y - b.y);
-          break;
-      }
-
-      const arcs = arcsFunc(data);
-      const legendDataWithPercent = getDataWithPercent(arcs, legendPrecision);
-      const _legendDataWithPercent = sortPie(legendDataWithPercent, order);
-
-      if (rose) {
-        const domain = extent(_legendDataWithPercent, (d) => d.value);
-        const roseRadius = getRoseRadius(_chart);
-        const scaler = scaleLinear().domain(domain).range([roseRadius, 1]);
-
-        const angle = (PI * 2) / _legendDataWithPercent.length;
-        return _legendDataWithPercent.map(
-          ({ startAngle, endAngle, ...arc }, index) => ({
-            ...arc,
-            id: id + '_linear_' + index,
-            startAngle: roseType == 'area' ? angle * index : startAngle,
-            endAngle: roseType == 'area' ? angle * (index + 1) : endAngle,
-            cornerRadius,
-            padAngle: _padAngle,
-            innerRadius,
-            outerRadius: scaler(arc.value),
-          })
-        );
-      }
-      return _legendDataWithPercent.map((arc, index) => ({
-        ...arc,
-        id: id + '_linear_' + index,
-        cornerRadius,
-        padAngle: _padAngle,
-        innerRadius,
-        outerRadius,
-      }));
-    }, [data, arcsFunc, chart, legendPrecision]);
-
-    const _arcs = useMemo(() => {
-      const seriesLength = series.size;
-      if (!seriesLength) return [];
-      const _series = [...series.values()];
-      return arcs.map((arc, index) => getArc(radius, arc, _series[index]));
-    }, [series, arcs, radius]);
-
-    const onClick = useCallback(
-      (e) =>
-        onEvent({
-          currentIndex: +e.currentTarget.dataset.index,
-          type: 'onClick',
-        }),
-      [onEvent]
-    );
-
-    const onMouseEnter = useCallback(
-      (e) =>
-        onEvent({
-          currentIndex: +e.currentTarget.dataset.index,
-          type: 'onMouseEnter',
-        }),
-      [onEvent]
-    );
-
-    const onMouseLeave = useCallback(
-      (e) =>
-        onEvent({
-          currentIndex: +e.currentTarget.dataset.index,
-          type: 'onMouseLeave',
-        }),
-      [onEvent]
-    );
-
-    useLayoutEffect(() => {
-      let animation;
-      if (!!on) {
-        animation = animate({
-          from: 0,
-          to: 1,
-          duration: 500,
-          ease: linear,
-          onPlay: () => {},
-          onUpdate: (v) => {
-            setY(v);
-          },
-          onComplete: () => {
-            const _data = arcs[+currentIndex].data;
-            triggerOnRelative(_data);
-            onEmit('carousel', _data);
-          },
-        });
-      } else {
-        if (currentIndex !== null && trigger === 'onClick') {
-          const _data = arcs[+currentIndex].data;
-          triggerOnRelative(_data);
-          onEmit(trigger, _data);
-        }
-      }
-      return () => {
-        prevIndex.current = currentIndex;
-        animation && animation.stop();
-        animation = null;
-      };
-    }, [
-      JSON.stringify(arcs),
-      on,
-      currentIndex,
-      trigger,
-      onEmit,
-      triggerOnRelative,
-    ]);
-
-    const halfChartWidth = chartWidth / 2;
-    const halfChartHeight = chartHeight / 2;
-
-    return (
-      <>
-        <ChartContainer
-          width={width}
-          height={height}
-          marginLeft={marginLeft}
-          marginTop={marginTop}
-        >
-          <g
-            transform={
-              'translate(' + halfChartWidth + ', ' + halfChartHeight + ')'
-            }
-          >
-            {_arcs.map(
-              ({ id, value, series, arc, innerRadius, outerRadius, index: dataIndex }, index) => {
-                const current = index == currentIndex;
-
-                const prev = index == prevIndex.current;
-                // const offset = current ? y : prev ? 1 - y : 0;
-                const offset = current ? y : prev ? 1 - y : 0;
-
-                const fillOpacity = current ? opacity / 100 : 1;
-
-                const path = arc
-                  .innerRadius(innerRadius + offset * heighten)
-                  .outerRadius(outerRadius + offset * heighten)(value);
-
-                const pie = getColorList(series.color);
-                return (
-                  <Fragment key={index}>
-                    <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}
-                    />
-                    <defs>
-                      <LinearGradient
-                        id={id}
-                        colors={pie}
-                        rotate={series.color.linear.angle + 180}
-                        // gradientUnits='objectBoundingBox'
-                      />
-                    </defs>
-                  </Fragment>
-                );
-              }
-            )}
-            {label && <Label config={label} arcs={_arcs} />}
-            {current && (
-              <g fillOpacity={y}>
-                <Current
-                  config={current}
-                  data={_arcs}
-                  currentIndex={+currentIndex}
-                />
-              </g>
-            )}
-          </g>
-        </ChartContainer>
-        {decorate && (
-          <ConicalGradient
-            width={width}
-            height={height}
-            centerX={halfChartWidth + marginLeft}
-            centerY={halfChartHeight + marginTop}
-            config={decorate}
-            arcs={_arcs}
-            radius={radius}
-          />
-        )}
-        <Legend {...legend} series={_arcs} formatter={formatter} />
-      </>
-    );
-  }
-);
-const Current = ({
-  config: {
-    show,
-    gap,
-    name: { show: showName, font: nameFont },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      precision,
-      translate: { x: translatePercentX, y: translatePercentY },
-    },
-    value: {
-      show: showValue,
-      font: valueFont,
-      translate: { x: translateValueX, y: translateValueY },
-      suffix: {
-        show: showSuffix,
-        fontSize,
-        text,
-        translate: { x: translateSuffixX, y: translateSuffixY },
-      },
-    },
-  },
-  data,
-  currentIndex,
-}) => {
-  const _data = useMemo(() => {
-    const legendDataWithPercent = getDataWithPercent(data, precision);
-    return sortPie(legendDataWithPercent, '');
-  }, [data, precision]);
-  const currentData = _data[currentIndex];
-
-  if (!currentData) return null;
-
-  const { displayName, fieldName, value, percent } = currentData;
-
-  return (
-    show && (
-      <>
-        {showName && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showValue && showPercent
-                ? -1
-                : showValue || showPercent
-                ? -0.5
-                : 0) * gap
-            }
-            {...getFontStyle(nameFont, 'svg')}
-          >
-            {displayName || fieldName}
-          </text>
-        )}
-        {showValue && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showPercent
-                ? 0
-                : showName && !showPercent
-                ? 0.5
-                : showPercent
-                ? -0.5
-                : 0) *
-                gap +
-              translateValueY
-            }
-            dx={translateValueX}
-            {...getFontStyle(valueFont, 'svg')}
-          >
-            {value}
-            {showSuffix && text && (
-              <tspan
-                dx={translateSuffixX}
-                dy={translateSuffixY}
-                fontSize={fontSize}
-              >
-                {text}
-              </tspan>
-            )}
-          </text>
-        )}
-        {showPercent && (
-          <text
-            textAnchor='middle'
-            dy={
-              (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) *
-                gap +
-              translatePercentY
-            }
-            dx={translatePercentX}
-            {...getFontStyle(percentFont, 'svg')}
-          >
-            {percent + '%'}
-          </text>
-        )}
-      </>
-    )
-  );
-};
-
-const Label = ({
-  config: {
-    lineLength,
-    distance,
-    mode,
-    show,
-    translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont },
-    value: {
-      show: showValue,
-      font: valueFont,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize: suffixFontSize,
-        translate: { x: suffixTranslateX, y: suffixTranslateY },
-      },
-      sameColor: valueSameColor = false,
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      precision,
-      sameColor: percentSameColor = false,
-    },
-  },
-  arcs,
-}) => {
-  // const [labels, setLabels] = useState(null);
-  // const [opacity, setOpacity] = useState(0);
-
-  const _arcs = useMemo(
-    () => 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 (
-    <g
-    // style={{ opacity }} ref={setLabels}
-    >
-      {_arcs.map(
-        (
-          {
-            series: {
-              color: {
-                type,
-                pure,
-                linear: { stops },
-              },
-            },
-            displayName,
-            value,
-            percent,
-            arc,
-            outerRadius,
-          },
-          index
-        ) => {
-          const [x, y] = arc.centroid();
-
-          const midAngle = Math.atan2(y, x);
-
-          const [x1, y1] = getCoord(midAngle, outerRadius);
-
-          const radius = outerRadius + distance;
-          const [x2, y2] = getCoord(midAngle, radius);
-
-          const direction = x2 < 0 ? -1 : 1;
-          const x3 = x2 + lineLength * direction;
-
-          const _x = x3 + (translateX + 6) * direction;
-
-          const _showName = showName && displayName;
-          const _showValue = showValue && (value || showSuffix);
-
-          return (
-            show &&
-            (_showName || showPercent || _showValue) && (
-              <g key={index}>
-                <path
-                  d={
-                    'M' +
-                    x1 +
-                    ', ' +
-                    y1 +
-                    'L' +
-                    x2 +
-                    ', ' +
-                    y2 +
-                    'L' +
-                    x3 +
-                    ', ' +
-                    y2
-                  }
-                  stroke={type == 'pure' ? pure : stops[0].color}
-                  fill='none'
-                />
-                <text
-                  x={_x}
-                  y={y2 + translateY}
-                  dominantBaseline='middle'
-                  textAnchor={x3 >= 0 ? 'start' : 'end'}
-                >
-                  {_showName && (
-                    <tspan style={getFontStyle(nameFont, 'svg')}>
-                      {displayName + (showValue || showPercent ? ':' : '')}
-                    </tspan>
-                  )}
-                  {_showValue && (
-                    <>
-                      <tspan
-                        x={!!(_showName && mode == 'vertical') ? _x : ''}
-                        dx={valueDx(_showName, mode)}
-                        dy={!!(_showName && mode == 'vertical') ? '1.5em' : ''}
-                        style={getFontStyle(valueFont, 'svg')}
-                      >
-                        {value}
-                      </tspan>
-                      {showSuffix && (
-                        <tspan
-                          style={{
-                            ...getFontStyle(valueFont, 'svg'),
-                            fontSize: suffixFontSize,
-                          }}
-                          dx={suffixTranslateX}
-                          dy={suffixTranslateY}
-                        >
-                          {text}
-                        </tspan>
-                      )}
-                    </>
-                  )}
-                  {showPercent && (
-                    <tspan
-                      x={percentX(_showName, _showValue, mode, _x)}
-                      dx={percentDx(_showName, _showValue, mode)}
-                      dy={
-                        percentDy(_showName, _showValue, mode) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : 0)
-                      }
-                      style={getFontStyle(percentFont, 'svg')}
-                    >
-                      {(_showValue ? '(' : '') +
-                        percent +
-                        '%' +
-                        (_showValue ? ')' : '')}
-                    </tspan>
-                  )}
-                </text>
-              </g>
-            )
-          );
-        }
-      )}
-    </g>
-  );
-};
-
-export default Mapping(Carousel(Component));
+/**
+ * 饼环图
+ */
+import React, {
+  memo,
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+  useContext,
+  useLayoutEffect,
+  Fragment,
+} from 'react';
+import { ChartContainer, Carousel, Legend, ConicalGradient, Mapping } from '.';
+import { chartContext } from '../context';
+import {
+  getFontStyle,
+  sortPie,
+  getDataWithPercent,
+  getColorList,
+} from '../utils';
+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;
+
+const defaultChart = {
+  outerRadius: 1,
+  innerRadius: 0,
+  cornerRadius: 0,
+  rose: false,
+  roseType: 'radius',
+  baseRadius: 0,
+  padAngle: 0,
+};
+const defaultAngle = { startAngle: 0, endAngle: 360, antiClockwise: false };
+
+const percentX = (showName, showValue, mode, x) => {
+  if (showValue) {
+    return '';
+  }
+  if (showName) {
+    if (mode == 'vertical') {
+      return x;
+    } else {
+      return '';
+    }
+  } else {
+    return x;
+  }
+};
+
+const percentDx = (showName, showValue, mode) => {
+  if (showValue) {
+    return '0.5em';
+  }
+  if (showName) {
+    if (mode == 'vertical') {
+      return 0;
+    } else {
+      return '0.5em';
+    }
+  } else {
+    return 0;
+  }
+};
+
+const percentDy = (showName, showValue, mode) => {
+  if (showValue) {
+    return 0;
+  }
+  if (showName) {
+    if (mode == 'vertical') {
+      return '1.5em';
+    } else {
+      return 0;
+    }
+  } else {
+    return 0;
+  }
+};
+
+const valueDx = (showName, mode) => {
+  if (!showName) {
+    return '';
+  }
+  if (mode == 'vertical') {
+    return '';
+  } else {
+    return '0.5em';
+  }
+};
+
+const getCoord = (deg, radius) => {
+  var x = Math.cos(deg) * radius,
+    y = Math.sin(deg) * radius;
+  return [x, y];
+};
+
+const getRoseRadius = ({ innerRadius, baseRadius }) =>
+  innerRadius + (1 - innerRadius) * baseRadius;
+
+const getAngle = ({ startAngle, endAngle, antiClockwise, ...rest }) => {
+  if (antiClockwise)
+    return {
+      ...rest,
+      startAngle: endAngle - 180,
+      endAngle: startAngle - 180,
+    };
+  return { ...rest, startAngle, endAngle };
+};
+
+const getArc = (
+  radius,
+  {
+    padAngle = 0,
+    innerRadius = 0,
+    outerRadius = 1,
+    cornerRadius = 0,
+    startAngle = 0,
+    endAngle = 360,
+    ...rest
+  },
+  series
+) => ({
+  ...rest,
+  type: 'pie',
+  fieldName: series.fieldName,
+  displayName: series.displayName || rest.data.s,
+  series: series,
+  innerRadius: innerRadius * radius,
+  outerRadius: outerRadius * radius,
+  arc: arc()
+    .innerRadius(innerRadius * radius)
+    .outerRadius(outerRadius * radius)
+    .cornerRadius(cornerRadius)
+    .startAngle(startAngle)
+    .endAngle(endAngle)
+    .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: {
+      chart: {
+        dimension: {
+          chartDimension: { width, height },
+        },
+        label,
+        legend: { formatter = legendFormatter, ...legend },
+        margin: { marginLeft, marginTop },
+      },
+      fan: {
+        chart = defaultChart,
+        chart: { outerRadius = defaultChart.outerRadius,padAngle },
+        angle = defaultAngle,
+        stroke: { show, strokeWidth, color } = { show: false },
+        decorate,
+        decorate2,
+        categoryText,
+        outerDecorate,
+        current,
+      } = {},
+      order,
+      series,
+      animation: {
+        on,
+        current: { heighten=0, opacity=0, width:radiusWidthAdd=0, color:animateColor, gap=0 },
+        rotate = 0
+      },
+    },
+    state: { currentIndex, trigger },
+    onEvent,
+    data = [],
+  }) => {
+    const prevIndex = useRef(null);
+    const { precision: legendPrecision } = legend.config.percent;
+    const {
+      id,
+      width: chartWidth,
+      height: chartHeight,
+      triggerOnRelative,
+      onEmit,
+    } = useContext(chartContext);
+
+    const [y, setY] = useState(1);
+    const radius = (Math.min(chartWidth, chartHeight) / 2) * outerRadius;
+
+    const arcsFunc = useMemo(() => {
+      const { startAngle = 0, endAngle = 360 } = getAngle(angle);
+      const arcsFunc = pie()
+        .startAngle((startAngle * PI) / 180)
+        .endAngle((endAngle * PI) / 180)
+        .value((d) => d.y);
+      return arcsFunc;
+    }, [angle]);
+
+    const arcs = useMemo(() => {
+      const _chart = Object.assign(defaultChart, chart);
+      const {
+        innerRadius,
+        outerRadius,
+        rose,
+        cornerRadius,
+        padAngle,
+        roseType,
+      } = _chart;
+      const _padAngle = (padAngle * Math.PI) / 180;
+
+      switch (order) {
+        case '':
+          arcsFunc.sort(null);
+          break;
+        case 'desc':
+          arcsFunc.sort((a, b) => b.y - a.y);
+          break;
+        case 'asc':
+          arcsFunc.sort((a, b) => a.y - b.y);
+          break;
+      }
+
+      const arcs = arcsFunc(data);
+      const legendDataWithPercent = getDataWithPercent(arcs, legendPrecision);
+      const _legendDataWithPercent = sortPie(legendDataWithPercent, order);
+
+      if (rose) {
+        const domain = extent(_legendDataWithPercent, (d) => d.value);
+        const roseRadius = getRoseRadius(_chart);
+        const scaler = scaleLinear().domain(domain).range([roseRadius, 1]);
+
+        const angle = (PI * 2) / _legendDataWithPercent.length;
+        return _legendDataWithPercent.map(
+          ({ startAngle, endAngle, ...arc }, index) => ({
+            ...arc,
+            id: id + '_linear_' + index,
+            startAngle: roseType == 'area' ? angle * index : startAngle,
+            endAngle: roseType == 'area' ? angle * (index + 1) : endAngle,
+            cornerRadius,
+            padAngle: _padAngle,
+            innerRadius,
+            outerRadius: scaler(arc.value),
+          })
+        );
+      }
+      return _legendDataWithPercent.map((arc, index) => ({
+        ...arc,
+        id: id + '_linear_' + index,
+        cornerRadius,
+        padAngle: _padAngle,
+        innerRadius,
+        outerRadius,
+      }));
+    }, [data, arcsFunc, chart, legendPrecision]);
+    
+    const _arcs = useMemo(() => {
+      const seriesLength = series.size;
+      if (!seriesLength) return [];
+      const _series = [...series.values()];
+      return arcs.map((arc, index) => getArc(radius, arc, _series[index]));
+    }, [series, arcs, radius]);
+    const onClick = useCallback(
+      (e) =>
+        onEvent({
+          currentIndex: +e.currentTarget.dataset.index,
+          type: 'onClick',
+        }),
+      [onEvent]
+    );
+
+    const onMouseEnter = useCallback(
+      (e) =>
+        onEvent({
+          currentIndex: +e.currentTarget.dataset.index,
+          type: 'onMouseEnter',
+        }),
+      [onEvent]
+    );
+
+    const onMouseLeave = useCallback(
+      (e) =>
+        onEvent({
+          currentIndex: +e.currentTarget.dataset.index,
+          type: 'onMouseLeave',
+        }),
+      [onEvent]
+    );
+
+    useLayoutEffect(() => {
+      let animation;
+      if (!!on) {
+        animation = animate({
+          from: 0,
+          to: 1,
+          duration: 500,
+          ease: linear,
+          onPlay: () => {},
+          onUpdate: (v) => {
+            setY(v);
+          },
+          onComplete: () => {
+            const _data = arcs[+currentIndex].data;
+            triggerOnRelative(_data);
+            onEmit('carousel', _data);
+          },
+        });
+      } else {
+        if (currentIndex !== null && trigger === 'onClick') {
+          const _data = arcs[+currentIndex].data;
+          triggerOnRelative(_data);
+          onEmit(trigger, _data);
+        }
+      }
+      return () => {
+        prevIndex.current = currentIndex;
+        animation && animation.stop();
+        animation = null;
+      };
+    }, [
+      JSON.stringify(arcs),
+      on,
+      currentIndex,
+      trigger,
+      onEmit,
+      triggerOnRelative,
+    ]);
+
+    const halfChartWidth = chartWidth / 2;
+    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}
+          marginLeft={marginLeft}
+          marginTop={marginTop}
+        >
+          <g
+            style={{
+              transition:"transform ease-in-out 0.3s",
+              transform:'translate(' + halfChartWidth + 'px, ' + halfChartHeight + 'px) rotate('+rotate_+"deg)"
+            }}
+          >
+            {_arcs.map(
+              ({ id, value, series, arc, innerRadius, outerRadius, index: dataIndex }, index) => {
+                const current = index == currentIndex;
+                const prev = index == prevIndex.current;
+                const offset = current ? y : prev ? 1 - y : 0;
+
+                const fillOpacity = animateColor?1:(current ? opacity / 100 : 1);
+                const deltaHeighten= offset*heighten;
+                const path = arc
+                  .innerRadius(innerRadius + deltaHeighten)
+                  .outerRadius(outerRadius + deltaHeighten)(value);
+                const pie = getColorList(series.color);
+                const currentPie = animateColor?getColorList(animateColor):getColorList(series.color);
+                let textPath="",categoryTextStyle={};
+                if(categoryText && categoryText.show){    //如果有类目文本，则需要计算文字路径
+                  //let offsetWidth=decorate2.radiusWidth/2 + radiusWidthAdd/2;   //当前文字需生成在装饰物内，故而半径需要减小
+                  let textArc=arc.innerRadius(outerRadius+(current?gap:categoryText.gap))
+                    .outerRadius(outerRadius+(current?gap:categoryText.gap))(value);
+                  let lastA=textArc.lastIndexOf('A');
+                  textPath=textArc.slice(0, lastA > 0 ? lastA : textArc.length);    //文字路径
+                  categoryTextStyle=categoryText.textStyle;   //这里把textstyle拿出来
+                }
+
+                return (
+                  <Fragment key={index}>
+                    <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 &&
+                      <path
+                        data-index={dataIndex}
+                        onClick={onClick}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        d={arc.innerRadius(outerRadius)
+                              .outerRadius(outerRadius + decorate2.radiusWidth + radiusWidthAdd)(value)}
+                        stroke={show ? color : 'none'}
+                        strokeWidth={show ? strokeWidth : '0'}
+                        fill={'url(#' + id + ')'}
+                        fillOpacity={decorate2.opacity/100}
+                      />
+                    }
+                    { //类目文本
+                      categoryText && categoryText.show &&<g>
+                        <path
+                          onClick={onClick}
+                          onMouseEnter={onMouseEnter}
+                          onMouseLeave={onMouseLeave}
+                          id={id + '_text_' + index}
+                          d={textPath}
+                          fill='none'
+                          stroke='none'
+                        />
+                        <text
+                          textAnchor='middle'
+                          style={{
+                            ...categoryTextStyle,
+                            fontWeight:categoryTextStyle.bold?"bold":"normal",
+                            fontStyle:categoryTextStyle.italic?"italic":"normal"
+                          }}
+                          fill={categoryText.textStyle.color}
+                        >
+                          <textPath
+                            startOffset='50%'
+                            href={'#' + id + '_text_' + index}
+                          >
+                            {_arcs[index].displayName || _arcs[index].fieldName}
+                          </textPath>
+                        </text>
+                      </g>
+                    }
+                    <defs>
+                      <LinearGradient
+                        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'
+                      />
+                    </defs>
+                  </Fragment>
+                );
+              }
+            )}
+            {label && <Label config={label} arcs={_arcs} />}
+            {current && (
+              <g fillOpacity={y} style={{transform:"rotate("+(-rotate_)+"deg)"}}>
+                <Current
+                  config={current}
+                  data={_arcs}
+                  currentIndex={+currentIndex}
+                />
+              </g>
+            )}
+          </g>
+        </ChartContainer>
+        {decorate && (
+          <ConicalGradient
+            width={width}
+            height={height}
+            centerX={halfChartWidth + marginLeft}
+            centerY={halfChartHeight + marginTop}
+            config={decorate}
+            arcs={_arcs}
+            radius={radius}
+          />
+        )}
+        <Legend {...legend} series={_arcs} formatter={formatter} />
+      </>
+    );
+  }
+);
+
+const Current = ({
+  config: {
+    show,
+    gap,
+    name: { show: showName, font: nameFont },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      precision,
+      translate: { x: translatePercentX, y: translatePercentY },
+    },
+    value: {
+      show: showValue,
+      font: valueFont,
+      translate: { x: translateValueX, y: translateValueY },
+      suffix: {
+        show: showSuffix,
+        fontSize,
+        text,
+        translate: { x: translateSuffixX, y: translateSuffixY },
+      },
+    },
+  },
+  data,
+  currentIndex,
+}) => {
+  const _data = useMemo(() => {
+    const legendDataWithPercent = getDataWithPercent(data, precision);
+    return sortPie(legendDataWithPercent, '');
+  }, [data, precision]);
+  const currentData = _data[currentIndex];
+
+  if (!currentData) return null;
+
+  const { displayName, fieldName, value, percent } = currentData;
+
+  return (
+    show && (
+      <>
+        {showName && (
+          <text
+            textAnchor='middle'
+            dy={
+              (showValue && showPercent
+                ? -1
+                : showValue || showPercent
+                ? -0.5
+                : 0) * gap
+            }
+            {...getFontStyle(nameFont, 'svg')}
+          >
+            {displayName || fieldName}
+          </text>
+        )}
+        {showValue && (
+          <text
+            textAnchor='middle'
+            dy={
+              (showName && showPercent
+                ? 0
+                : showName && !showPercent
+                ? 0.5
+                : showPercent
+                ? -0.5
+                : 0) *
+                gap +
+              translateValueY
+            }
+            dx={translateValueX}
+            {...getFontStyle(valueFont, 'svg')}
+          >
+            {value}
+            {showSuffix && text && (
+              <tspan
+                dx={translateSuffixX}
+                dy={translateSuffixY}
+                fontSize={fontSize}
+              >
+                {text}
+              </tspan>
+            )}
+          </text>
+        )}
+        {showPercent && (
+          <text
+            textAnchor='middle'
+            dy={
+              (showName && showValue ? 1 : showName || showValue ? 0.5 : 0) *
+                gap +
+              translatePercentY
+            }
+            dx={translatePercentX}
+            {...getFontStyle(percentFont, 'svg')}
+          >
+            {percent + '%'}
+          </text>
+        )}
+      </>
+    )
+  );
+};
+
+const Label = ({
+  config: {
+    maxRadius = 0,
+    lineLength,
+    lineColor,
+    distance,
+    mode,
+    show,
+    translate: { x: translateX, y: translateY },
+    name: { show: showName, font: nameFont },
+    value: {
+      show: showValue,
+      font: valueFont,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize: suffixFontSize,
+        translate: { x: suffixTranslateX, y: suffixTranslateY },
+      },
+      sameColor: valueSameColor = false,
+    },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      precision,
+      sameColor: percentSameColor = false,
+    },
+  },
+  arcs,
+  animation
+}) => {
+  // const [labels, setLabels] = useState(null);
+  // const [opacity, setOpacity] = useState(0);
+
+  const _arcs = useMemo(
+    () => 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 (
+    <g
+    // style={{ opacity }} ref={setLabels}
+    >
+      {_arcs.map(
+        (
+          {
+            series: {
+              color: {
+                type,
+                pure,
+                linear: { stops },
+              },
+            },
+            displayName,
+            value,
+            percent,
+            arc,
+            outerRadius,
+            index:actualIndex
+          },
+          index
+        ) => {
+
+          const [x, y] = arc.centroid();
+
+          const midAngle = Math.atan2(y, x);
+
+          const [x1, y1] = getCoord(midAngle, maxRadius?maxRadius:outerRadius);
+
+          const radius = (maxRadius?maxRadius:outerRadius) + distance;
+          const [x2, y2] = getCoord(midAngle, radius);
+
+          const direction = x2 < 0 ? -1 : 1;
+          const x3 = x2 + lineLength * direction;
+
+          const _x = x3 + (translateX + 6) * direction;
+
+          const _showName = showName && displayName;
+          const _showValue = showValue && (value || showSuffix);
+
+          return (
+            show &&
+            (_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
+                  }
+                  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'
+                  textAnchor={x3 >= 0 ? 'start' : 'end'}
+                >
+                  {_showName && (
+                    <tspan style={getFontStyle(nameFont, 'svg')}>
+                      {displayName + (showValue || showPercent ? ':' : '')}
+                    </tspan>
+                  )}
+                  {_showValue && (
+                    <>
+                      <tspan
+                        x={!!(_showName && mode == 'vertical') ? _x : ''}
+                        dx={valueDx(_showName, mode)}
+                        dy={!!(_showName && mode == 'vertical') ? '1.5em' : ''}
+                        style={getFontStyle(valueFont, 'svg')}
+                      >
+                        {value}
+                      </tspan>
+                      {showSuffix && (
+                        <tspan
+                          style={{
+                            ...getFontStyle(valueFont, 'svg'),
+                            fontSize: suffixFontSize,
+                          }}
+                          dx={suffixTranslateX}
+                          dy={suffixTranslateY}
+                        >
+                          {text}
+                        </tspan>
+                      )}
+                    </>
+                  )}
+                  {showPercent && (
+                    <tspan
+                      x={percentX(_showName, _showValue, mode, _x)}
+                      dx={percentDx(_showName, _showValue, mode)}
+                      dy={
+                        percentDy(_showName, _showValue, mode) +
+                        (_showValue && showSuffix ? suffixTranslateY * -1 : "")
+                      }
+                      style={getFontStyle(percentFont, 'svg')}
+                    >
+                      {(_showValue ? '(' : '') +
+                        percent +
+                        '%' +
+                        (_showValue ? ')' : '')}
+                    </tspan>
+                  )}
+                </text>
+              </g>
+            )
+          );
+        }
+      )}
+    </g>
+  );
+};
+
+export default Mapping(Carousel(Component));