@easyv/charts 1.0.74 → 1.1.1

package/src/components/PieChart.js

@@ -1,1093 +1,1097 @@
-/**
- * 饼环图
- */
-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"
-                          }}
-                          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}
-                  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 },
-      },
-    },
-  },
-  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:"100%",
-    height:"100%",
-    transform:"translate(-50%,-50%)",
-  },
-  boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width:"100%",
-    height:'100%',
-    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, 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));