@easyv/charts 1.1.8 → 1.2.2

package/src/components/PieChart.js

@@ -1,1097 +1,1288 @@
-/**
- * 饼环图
- */
-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 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
-    }
-  }
-}
-const 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
-    }
-  }
-}
-
-const 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;
-    }
-  }
-};
-
-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, textStyle:animateCTS, 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 && <RingLabel config={{...label,maxRadius: maxRadius+2}} arcs={_arcs}/>}
-          </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=current?animateCTS: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 + (current?radiusWidthAdd:0))(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",
-                            pointerEvents:"none"
-                          }}
-                          fill={categoryTextStyle.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}
-                  width={width}
-                  height={height}
-                  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, textBreak },
-    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 },
-      },
-    },
-  },
-  width,
-  height,
-  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;
-  let nameTemp = displayName? displayName : fieldName;  //类目名
-  let nameList = [];
-  if(textBreak){    //如果限制了首行字符，则切割组件
-    while(nameTemp.length>textBreak){
-      nameList.push(nameTemp.slice(0,textBreak));
-      nameTemp = nameTemp.slice(textBreak)
-    }
-  }
-  nameList.push(nameTemp)
-  let foreignStyle={    //foreignObject标签样式，
-    width,
-    height,
-    transform:`translate(-${width/2}px,-${height/2}px)`,
-    pointerEvents:"none"
-  },
-  boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width,
-    height,
-    display:"flex",
-    flexDirection:"column",
-    justifyContent:"center",
-    alignItems:"center"
-  }
-
-  return (
-    show && (
-      <foreignObject style={foreignStyle}>
-        <div style={boxStyle}>
-          { //类目名称
-            showName && <div 
-              style={{
-                ...getFontStyle(nameFont),
-                margin:gap/2+"px 0",
-                display:"flex",
-                flexDirection:"column",
-                alignItems:"center"
-              }}>
-              {
-                nameList.map((d,i)=>{
-                  return <span key={i}>{d}</span>
-                })
-              }
-            </div>
-          }
-          { //真实值
-            showValue && <span 
-              style={{
-                ...getFontStyle(valueFont),
-                transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
-                margin:gap/2+"px 0"
-              }}>
-              {value}
-              {showSuffix && text && (
-                <span
-                  style={{
-                    transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
-                    fontSize:fontSize
-                  }}
-                >
-                  {text}
-                </span>
-              )}
-            </span>
-          }
-          { //百分比值
-            showPercent && <span
-              style={{
-                transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
-                ...getFontStyle(percentFont),
-                margin:gap/2+"px 0"
-              }}
-            >
-              {percent + '%'}
-            </span>
-          }
-        </div>
-      </foreignObject>
-    )
-  );
-};
-
-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>
-  );
-};
-
-const RingLabel =({
-  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
-}) => {
-  const _arcs = useMemo(
-    () => getDataWithPercent(arcs, precision),
-    [arcs, precision]
-  );
-  
-  return (
-    <g>
-      {_arcs.map(
-        (
-          {
-            series: {
-              color: {
-                type,
-                pure,
-                linear: { stops },
-              },
-            },
-            data:realData,
-            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 directionX = x2 < 0 ? -1 : 1;
-          const directionY = y2 < 0 ? -1 : 1;
-          const x3 = x2 + lineLength * directionX;
-          const _x = x3 + (translateX + 6) * directionX;
-          
-          const _showName = showName && displayName;
-          const _showValue = showValue && (value || showSuffix);
-
-          return (
-            show &&
-            (_showName || showPercent || _showValue) && (
-              <g key={index}>
-                <path
-                  className={ringCss['label-line']}
-                  style={{ animationDelay:`${(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'
-                />
-                <text
-                  className={ringCss['label-text']}
-                  style={{ animationDelay:`${(actualIndex+1) * 2000 - 800}ms`}}
-                  x={mode=="horizontal"?_x:x2}
-                  y={y2 + translateY}
-                  dominantBaseline='middle'
-                  textAnchor={x3 >= 0 ? 'start' : 'end'}
-                >
-                  {_showName && (
-                    <tspan dy={nameDy(_showValue, showPercent, mode, directionY)} style={getFontStyle(nameFont, 'svg')}>
-                      {displayName + (showValue || showPercent ? ':' : '')}
-                    </tspan>
-                  )}
-                  {_showValue && (
-                    <>
-                      <tspan
-                        x={ _showName?(mode=="horizontal"?'':x2):'' }
-                        dx={valueDx(_showName, mode)}
-                        dy={valueDy(_showName, mode, directionY)}
-                        style={getFontStyle(valueFont, 'svg')}
-                      >
-                        {realData.y}
-                      </tspan>
-                      {showSuffix && (
-                        <tspan
-                          style={{
-                            ...getFontStyle(valueFont, 'svg'),
-                            fontSize: suffixFontSize,
-                          }}
-                          dx={suffixTranslateX}
-                          dy={suffixTranslateY}
-                        >
-                          {text}
-                        </tspan>
-                      )}
-                    </>
-                  )}
-                  {showPercent && (
-                    <tspan
-                      x={_showName?(_showValue?'':(mode=="vertical"?x2:'')):''}
-                      dx={percentDx(_showName, _showValue, mode)}
-                      dy={
-                        percentDy_(_showName, _showValue, mode, directionY) +
-                        (_showValue && showSuffix ? suffixTranslateY * -1 : "")
-                      }
-                      style={getFontStyle(percentFont, 'svg')}
-                    >
-                      {(_showValue ? '(' : '') +
-                        percent +
-                        '%' +
-                        (_showValue ? ')' : '')}
-                    </tspan>
-                  )}
-                </text>
-              </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 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;
+    }
+  }
+};
+const 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;
+    }
+  }
+};
+
+const 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;
+    }
+  }
+};
+
+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,
+          textStyle: animateCTS,
+          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 && (
+              <RingLabel
+                config={{ ...label, maxRadius: maxRadius + 2 }}
+                arcs={_arcs}
+              />
+            )}
+          </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 = current
+                    ? animateCTS
+                    : 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 +
+                                (current ? radiusWidthAdd : 0)
+                            )(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',
+                              pointerEvents: 'none',
+                            }}
+                            fill={categoryTextStyle.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}
+                  width={width}
+                  height={height}
+                  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, sameColor: nameColor, font: nameFont, textBreak },
+    percent: {
+      show: showPercent,
+      sameColor: percentColor,
+      font: percentFont,
+      precision,
+      translate: { x: translatePercentX, y: translatePercentY },
+    },
+    value: {
+      show: showValue,
+      sameColor: valueColor,
+      font: valueFont,
+      translate: { x: translateValueX, y: translateValueY },
+      suffix: {
+        show: showSuffix,
+        fontSize,
+        text,
+        translate: { x: translateSuffixX, y: translateSuffixY },
+      },
+    },
+  },
+  width,
+  height,
+  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;
+  let nameTemp = displayName ? displayName : fieldName; //类目名
+  let nameList = [];
+  if (textBreak) {
+    //如果限制了首行字符，则切割组件
+    while (nameTemp.length > textBreak) {
+      nameList.push(nameTemp.slice(0, textBreak));
+      nameTemp = nameTemp.slice(textBreak);
+    }
+  }
+  nameList.push(nameTemp);
+  let foreignStyle = {
+      //foreignObject标签样式，
+      width,
+      height,
+      transform: `translate(-${width / 2}px,-${height / 2}px)`,
+      pointerEvents: 'none',
+    },
+    boxStyle = {
+      //弹性盒子样式，用于当前值的上下居中对齐等
+      width,
+      height,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    };
+  let seriesColor = currentData.series.color;
+  seriesColor =
+    seriesColor.type == 'pure'
+      ? seriesColor.pure
+      : seriesColor.linear.stops[0].color;
+  return (
+    show && (
+      <foreignObject style={foreignStyle}>
+        <div style={boxStyle}>
+          {
+            //类目名称
+            showName && (
+              <div
+                style={{
+                  ...getFontStyle(nameFont),
+                  margin: gap / 2 + 'px 0',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  color: nameColor ? seriesColor : nameFont.color,
+                }}
+              >
+                {nameList.map((d, i) => {
+                  return <span key={i}>{d}</span>;
+                })}
+              </div>
+            )
+          }
+          {
+            //真实值
+            showValue && (
+              <span
+                style={{
+                  ...getFontStyle(valueFont),
+                  transform:
+                    'translate(' +
+                    translateValueX +
+                    'px,' +
+                    translateValueY +
+                    'px)',
+                  margin: gap / 2 + 'px 0',
+                  color: valueColor ? seriesColor : valueFont.color,
+                }}
+              >
+                {value}
+                {showSuffix && text && (
+                  <span
+                    style={{
+                      transform:
+                        'translate(' +
+                        translateSuffixX +
+                        'px,' +
+                        translateSuffixY +
+                        'px)',
+                      fontSize: fontSize,
+                    }}
+                  >
+                    {text}
+                  </span>
+                )}
+              </span>
+            )
+          }
+          {
+            //百分比值
+            showPercent && (
+              <span
+                style={{
+                  transform:
+                    'translate(' +
+                    translatePercentX +
+                    'px,' +
+                    translatePercentY +
+                    'px)',
+                  ...getFontStyle(percentFont),
+                  margin: gap / 2 + 'px 0',
+                  color: percentColor ? seriesColor : percentFont.color,
+                }}
+              >
+                {percent + '%'}
+              </span>
+            )
+          }
+        </div>
+      </foreignObject>
+    )
+  );
+};
+
+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>
+  );
+};
+
+const RingLabel = ({
+  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,
+}) => {
+  const _arcs = useMemo(
+    () => getDataWithPercent(arcs, precision),
+    [arcs, precision]
+  );
+
+  return (
+    <g>
+      {_arcs.map(
+        (
+          {
+            series: {
+              color: {
+                type,
+                pure,
+                linear: { stops },
+              },
+            },
+            data: realData,
+            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 directionX = x2 < 0 ? -1 : 1;
+          const directionY = y2 < 0 ? -1 : 1;
+          const x3 = x2 + lineLength * directionX;
+          const _x = x3 + (translateX + 6) * directionX;
+
+          const _showName = showName && displayName;
+          const _showValue = showValue && (value || showSuffix);
+
+          return (
+            show &&
+            (_showName || showPercent || _showValue) && (
+              <g key={index}>
+                <path
+                  className={ringCss['label-line']}
+                  style={{
+                    animationDelay: `${(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'
+                />
+                <text
+                  className={ringCss['label-text']}
+                  style={{
+                    animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                  }}
+                  x={mode == 'horizontal' ? _x : x2}
+                  y={y2 + translateY}
+                  dominantBaseline='middle'
+                  textAnchor={x3 >= 0 ? 'start' : 'end'}
+                >
+                  {_showName && (
+                    <tspan
+                      dy={nameDy(_showValue, showPercent, mode, directionY)}
+                      style={getFontStyle(nameFont, 'svg')}
+                    >
+                      {displayName + (showValue || showPercent ? ':' : '')}
+                    </tspan>
+                  )}
+                  {_showValue && (
+                    <>
+                      <tspan
+                        x={_showName ? (mode == 'horizontal' ? '' : x2) : ''}
+                        dx={valueDx(_showName, mode)}
+                        dy={valueDy(_showName, mode, directionY)}
+                        style={getFontStyle(valueFont, 'svg')}
+                      >
+                        {realData.y}
+                      </tspan>
+                      {showSuffix && (
+                        <tspan
+                          style={{
+                            ...getFontStyle(valueFont, 'svg'),
+                            fontSize: suffixFontSize,
+                          }}
+                          dx={suffixTranslateX}
+                          dy={suffixTranslateY}
+                        >
+                          {text}
+                        </tspan>
+                      )}
+                    </>
+                  )}
+                  {showPercent && (
+                    <tspan
+                      x={
+                        _showName
+                          ? _showValue
+                            ? ''
+                            : mode == 'vertical'
+                            ? x2
+                            : ''
+                          : ''
+                      }
+                      dx={percentDx(_showName, _showValue, mode)}
+                      dy={
+                        percentDy_(_showName, _showValue, mode, directionY) +
+                        (_showValue && showSuffix ? suffixTranslateY * -1 : '')
+                      }
+                      style={getFontStyle(percentFont, 'svg')}
+                    >
+                      {(_showValue ? '(' : '') +
+                        percent +
+                        '%' +
+                        (_showValue ? ')' : '')}
+                    </tspan>
+                  )}
+                </text>
+              </g>
+            )
+          );
+        }
+      )}
+    </g>
+  );
+};
+
+export default Mapping(Carousel(Component));