@easyv/charts 1.10.19 → 1.10.21

package/src/components/PieChart.js

@@ -1,1570 +1,1629 @@
-/**
- * 饼环图
- */
-import React, {
-  memo,
-  useMemo,
-  useCallback,
-  useRef,
-  useState,
-  useEffect,
-  useContext,
-  useLayoutEffect,
-  Fragment,
-} from "react";
-import {
-  ChartContainer,
-  Carousel,
-  Legend,
-  ConicalGradient,
-  Mapping,
-  TextOverflow,
-} 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";
-import { useAiDataOfPie } from "../hooks";
-import { PieTooltip } from "./PieTooltip";
-
-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_,
-  index,
-) => {
-  const series =
-    series_.find((s) => s.fieldName == rest.data.s) ||
-    series_[index % series_.length];
-  return {
-    ...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(
-  ({
-    width,
-    height,
-    config: {
-      chart: {
-        label,
-        legend: { formatter = legendFormatter, ...legend },
-        animation: { ringDuration, labelDuration } = {},
-        margin: { marginLeft, marginTop, marginRight, marginBottom },
-      },
-      fan: {
-        chart = defaultChart,
-        chart: { outerRadius = defaultChart.outerRadius, padAngle },
-        angle = defaultAngle,
-        stroke: { show, strokeWidth, color } = { show: false },
-        decorate,
-        decorate2,
-        categoryText,
-        outerDecorate,
-        current,
-      } = {},
-      order,
-      columnsSeries,
-      series,
-      animation: {
-        on,
-        current: {
-          widthen = 0,
-          heighten = 0,
-          opacity = 0,
-          width: radiusWidthAdd = 0,
-          color: animateColor,
-          textStyle: animateCTS,
-          gap = 0,
-        },
-        rotate = 0,
-      },
-      tooltip = {},
-    },
-    config,
-    state: { currentIndex, trigger },
-    onEvent,
-    hoverEvent,
-    data: originData = [],
-  }) => {
-    const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
-    const prevIndex = useRef(null);
-    const { precision: legendPrecision } = legend.config.percent;
-    const {
-      id,
-      isIOS,
-      width: chartWidth,
-      height: chartHeight,
-      triggerOnRelative,
-      onEmit,
-    } = useContext(chartContext);
-    // chart.margin 以用户配置为准；Adaptive 仅走 Legend 侧栏/顶底排版，不再 updateConfig 写预设边距
-    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]);
-    //此处创建arcsFuncTwo的原因是为了兼容数据全为零
-    const arcsFuncTwo = useMemo(() => {
-      const { startAngle = 0, endAngle = 360 } = getAngle(angle);
-      const arcsFunc = pie()
-        .startAngle((startAngle * PI) / 180)
-        .endAngle((endAngle * PI) / 180)
-        .value((d) => (d.y == 0 ? 1 : d.y));
-      return arcsFunc;
-    }, [angle]);
-    let judgeData = 0; //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
-    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;
-      }
-
-      //此处判断data中的y是否都为零,方便饼图都为零时展示
-
-      let arcs = 0;
-      data.forEach(function (item) {
-        judgeData += item.y;
-      });
-      if (judgeData == 0) {
-        arcs = arcsFuncTwo(data);
-      } else {
-        arcs = arcsFunc(data);
-      }
-
-      //const arcs = arcsFunc(data); 此处是原本的传输饼图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, arcsFuncTwo, chart, legendPrecision, order]);
-
-    const _arcs = useMemo(() => {
-      const seriesLength = series.size;
-      if (!seriesLength) return [];
-      const _series = [...series.values()];
-      if (_series.length < arcs.length)
-        console.warn("请检查数据中是否存在相同的s");
-      return arcs.map((arc, index) => getArc(radius, arc, _series, index));
-    }, [series, arcs, radius]);
-
-    const onClick = useCallback(
-      (e) => {
-        const _data = arcs[+e.currentTarget.dataset.index].data;
-        triggerOnRelative("onClick", _data);
-        onEmit("onClick", _data);
-        onEvent({
-          currentIndex: +e.currentTarget.dataset.index,
-          type: "onClick",
-        });
-      },
-      [onEvent],
-    );
-
-    const onMouseEnter = useCallback(
-      (e) => {
-        const _data = arcs[+e.currentTarget.dataset.index].data;
-        triggerOnRelative("mousehover", _data);
-        onEmit("mousehover", _data);
-        onEvent({
-          currentIndex: +e.currentTarget.dataset.index,
-          type: "onMouseEnter",
-        });
-      },
-      [onEvent, triggerOnRelative, onEmit],
-    );
-
-    const onMouseLeave = useCallback(
-      (e) => {
-        setMousePos({
-          x: 0,
-          y: 0,
-        });
-        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] ? arcs[+currentIndex].data : {};
-            triggerOnRelative("carousel", _data);
-            onEmit("carousel", _data);
-          },
-        });
-      } else {
-        if (currentIndex !== null && trigger === "onClick") {
-          const _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
-          triggerOnRelative("click", _data);
-          onEmit("click", _data);
-        }
-      }
-      return () => {
-        prevIndex.current = currentIndex;
-        animation && animation.stop();
-        animation = null;
-      };
-    }, [
-      JSON.stringify(arcs),
-      on,
-      currentIndex,
-      trigger,
-      onEmit,
-      triggerOnRelative,
-    ]);
-    const aiData = useAiDataOfPie(_arcs, legend);
-    useEffect(() => {
-      if (aiData.length) {
-        if (!window.aiData) {
-          window.aiData = {};
-        }
-        window.aiData[id] = {
-          getAI: () => {
-            return aiData;
-          },
-        };
-      }
-      return () => {
-        window.aiData && window.aiData[id] && delete window.aiData[id];
-      };
-    }, [JSON.stringify(aiData), id]);
-
-    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;
-    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
-    const [hoverData, setHoverData] = useState(null);
-    const pieWarpEl = useRef(null);
-    const domRef = useRef();
-    return outerDecorate ? (
-      <div ref={domRef}>
-        <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
-          width={width}
-          height={height}
-          marginLeft={marginLeft}
-          marginTop={marginTop}
-          ref={pieWarpEl}
-        >
-          <g
-            style={{
-              "--labelDuration": labelDuration + "ms",
-              "--ringDuration": ringDuration + "ms",
-              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) => {
-                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 * ringDuration}ms`,
-                      }}
-                      data-index={index}
-                      onClick={onClick}
-                      onMouseEnter={onMouseEnter}
-                      onMouseLeave={onMouseLeave}
-                      onMouseMove={(e) => {
-                        const _data = arcs[+e.currentTarget.dataset.index];
-                        const warpBoxPos = {
-                          x: pieWarpEl.current.getBoundingClientRect().x,
-                          y: pieWarpEl.current.getBoundingClientRect().y,
-                        };
-                        setMousePos({
-                          x: e.clientX - warpBoxPos.x,
-                          y: e.clientY - warpBoxPos.y,
-                        });
-                        setHoverData(_data);
-                      }}
-                      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,
-                  ringDuration,
-                  labelDuration,
-                }}
-                iosStyle={{
-                  isIOS,
-                  left: halfChartWidth + marginLeft,
-                  top: halfChartHeight + marginTop,
-                }}
-                arcs={_arcs}
-                judge={judgeData}
-              />
-            )}
-          </g>
-        </ChartContainer>
-
-        <Legend
-          {...legend}
-          height={chartHeight}
-          componentWidth={width}
-          marginLeft={marginLeft}
-          marginRight={marginRight}
-          isPieChart
-          columnsSeries={columnsSeries}
-          data={data}
-          series={_arcs.map((arc) => ({
-            ...arc,
-            percent: arc.percent.toFixed(legendPrecision),
-          }))}
-          pieClick={onClick}
-          formatter={formatter}
-          judge={judgeData}
-        />
-        {tooltip &&
-          mousePos &&
-          mousePos.x != 0 &&
-          mousePos.y != 0 &&
-          tooltip.manual && (
-            <div
-              style={{
-                position: "absolute",
-                pointerEvents: "none",
-              }}
-            >
-              <PieTooltip
-                series={series}
-                domRef={domRef}
-                data={hoverData}
-                config={tooltip}
-                pieCenter={{
-                  x: halfChartWidth,
-                  y: maxRadius + marginTop,
-                }}
-                mousePos={mousePos}
-              />
-            </div>
-          )}
-      </div>
-    ) : (
-      <div ref={domRef}>
-        <ChartContainer
-          width={width}
-          height={height}
-          marginLeft={marginLeft}
-          marginTop={marginTop}
-          onMouseEnter={() => {
-            hoverEvent(true);
-          }}
-          onMouseLeave={() => {
-            hoverEvent(false);
-          }}
-          ref={pieWarpEl}
-        >
-          <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 deltaWidthen = offset * widthen;
-                const deltaHeighten = offset * heighten;
-                const path = arc
-                  .innerRadius(innerRadius + deltaWidthen)
-                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(
-                  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={index}
-                      onClick={onClick}
-                      onMouseEnter={onMouseEnter}
-                      onMouseLeave={onMouseLeave}
-                      onMouseMove={(e) => {
-                        const _data = arcs[+e.currentTarget.dataset.index];
-                        const warpBoxPos = {
-                          x: pieWarpEl.current.getBoundingClientRect().x,
-                          y: pieWarpEl.current.getBoundingClientRect().y,
-                        };
-                        setMousePos({
-                          x: e.clientX - warpBoxPos.x,
-                          y: e.clientY - warpBoxPos.y,
-                        });
-                        setHoverData(_data);
-                      }}
-                      d={path}
-                      stroke={show ? color : "none"}
-                      strokeWidth={show ? strokeWidth : "0"}
-                      fill={"url(#" + id + ")"}
-                      fillOpacity={fillOpacity}
-                    />
-                    {
-                      //装饰物2，产生于每个弧的外部
-                      decorate2 && decorate2.show && (
-                        <path
-                          data-index={index}
-                          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}
-                        />
-                      )
-                    }
-                    {
-                      //类目文本
-                      value && 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}
-                iosStyle={{
-                  isIOS,
-                  left: halfChartWidth + marginLeft,
-                  top: halfChartHeight + marginTop,
-                }}
-                arcs={_arcs}
-                judge={judgeData}
-              />
-            )}
-            {current && (
-              <g
-                fillOpacity={y}
-                style={{ transform: "rotate(" + -rotate_ + "deg)" }}
-              >
-                <Current
-                  config={current}
-                  width={chartWidth}
-                  height={chartHeight}
-                  iosStyle={{
-                    marginLeft,
-                    marginTop,
-                    isIOS,
-                  }}
-                  data={_arcs}
-                  judge={judgeData}
-                  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}
-          height={chartHeight}
-          componentWidth={width}
-          marginLeft={marginLeft}
-          marginRight={marginRight}
-          isPieChart
-          data={data}
-          columnsSeries={columnsSeries}
-          series={_arcs.map((arc) => ({
-            ...arc,
-            percent: arc.percent.toFixed(legendPrecision),
-          }))}
-          pieClick={onClick}
-          formatter={formatter}
-          judge={judgeData}
-        />
-        {tooltip &&
-          mousePos &&
-          mousePos.x != 0 &&
-          mousePos.y != 0 &&
-          tooltip.manual && (
-            <div
-              style={{
-                position: "absolute",
-                pointerEvents: "none",
-              }}
-            >
-              <PieTooltip
-                series={series}
-                domRef={domRef}
-                data={hoverData}
-                config={tooltip}
-                pieCenter={{
-                  x: halfChartWidth,
-                  y: maxRadius + marginTop,
-                }}
-                mousePos={mousePos}
-              />
-            </div>
-          )}
-      </div>
-    );
-  },
-);
-
-const Current = ({
-  config: {
-    show,
-    gap,
-    name: {
-      show: showName,
-      sameColor: nameColor,
-      font: nameFont,
-      translate = { x: 0, y: 0 },
-      maxWidth,
-      textOverflow,
-      speed,
-    },
-    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 },
-      },
-    },
-  },
-  iosStyle: { isIOS, marginLeft, marginTop },
-  width,
-  height,
-  data,
-  judge,
-  currentIndex,
-}) => {
-  const _data = useMemo(() => {
-    const legendDataWithPercent = getDataWithPercent(data, precision);
-    return sortPie(legendDataWithPercent, "");
-  }, [data, precision]);
-
-  //数据容错,当data都为零那么需要进行以下容错
-  if (judge == 0) {
-    _data.forEach((d) => {
-      ((d.percent = 0), (d.value = 0));
-    });
-  }
-
-  const currentData = _data[currentIndex];
-
-  if (!currentData) return null;
-
-  const { displayName, fieldName, value, percent } = currentData;
-  let nameTemp = displayName ? displayName : fieldName; //类目名
-
-  let foreignStyle = {
-      //foreignObject标签样式，
-      width,
-      height,
-      position: "relative",
-      overflow: "visible",
-      pointerEvents: "none",
-    },
-    boxStyle = {
-      //弹性盒子样式，用于当前值的上下居中对齐等
-      width,
-      height,
-      position: "absolute",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      transform: isIOS
-        ? `translate(${marginLeft}px,${marginTop}px)`
-        : `translate(-${width / 2}px,-${height / 2}px)`,
-    };
-  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 && (
-            <TextOverflow
-              type={textOverflow}
-              value={nameTemp}
-              speed={speed}
-              style={{
-                width: "100%",
-                maxWidth,
-                textAlign: "center",
-                display: textOverflow == "marquee" ? "flex" : "bolck",
-                justifyContent: "center",
-                ...getFontStyle(nameFont),
-                margin: gap / 2 + "px 0",
-                color: nameColor ? seriesColor : nameFont.color,
-                transform: `translate(${translate.x}px,${translate.y}px)`,
-              }}
-            ></TextOverflow>
-          )}
-          {
-            //真实值
-            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={{
-                      display: "inline-block",
-                      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,
-    align,
-    show,
-    translate: { x: translateX, y: translateY },
-    name: {
-      show: showName,
-      font: nameFont,
-      maxWidth,
-      textOverflow,
-      speed,
-      translate: NameTranslate,
-    },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize: suffixFontSize,
-        translate: { x: suffixTranslateX, y: suffixTranslateY },
-      },
-      translate: ValueTranslate,
-    },
-    percent: {
-      show: showPercent,
-      sameColor: percentSameColor,
-      font: percentFont,
-      precision,
-      translate: PercentTranslate,
-    },
-  },
-  iosStyle: { isIOS, left, top },
-  arcs,
-  judge,
-  animation,
-}) => {
-  const _arcs = useMemo(
-    () => getDataWithPercent(arcs, precision),
-    [arcs, precision],
-  );
-  //数据做出容错
-  if (judge == 0) {
-    _arcs.forEach((d) => {
-      d.percent = 0;
-    });
-  }
-  return (
-    <g>
-      {_arcs.map(
-        (
-          {
-            series: {
-              color: {
-                type,
-                pure,
-                linear: { stops },
-              },
-            },
-            data,
-            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);
-          const nameStyle = getFontStyle(nameFont);
-          return (
-            show &&
-            (_showName || showPercent || showValue) && (
-              <g key={index}>
-                <path
-                  className={animation ? ringCss["label-line"] : ""}
-                  style={{
-                    animationDelay: `${
-                      animation
-                        ? (actualIndex + 1) * ringDuration - labelDuration
-                        : 0
-                    }ms`,
-                  }}
-                  d={
-                    "M" +
-                    x1 +
-                    ", " +
-                    y1 +
-                    "L" +
-                    x2 +
-                    ", " +
-                    y2 +
-                    "L" +
-                    x3 +
-                    ", " +
-                    y2
-                  }
-                  stroke={
-                    lineColor
-                      ? lineColor
-                      : type == "pure"
-                        ? pure
-                        : stops[0].color
-                  }
-                  fill="none"
-                />
-                <foreignObject
-                  width="1"
-                  height="1"
-                  x={_x}
-                  y={y2 + translateY}
-                  style={{ overflow: "visible", position: "relative" }}
-                >
-                  <div
-                    className={animation ? ringCss["label-text"] : ""}
-                    style={{
-                      position: isIOS ? "absolute" : "relative",
-                      transform: isIOS
-                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
-                            left + _x
-                          }px),calc(-50% + ${top + y2 + translateY}px))`
-                        : "translate(0,-50%)",
-                      whiteSpace: "nowrap",
-                      float: x3 >= 0 ? "left" : "right",
-                      width: "max-content",
-                      display: "flex",
-                      flexDirection: mode == "horizontal" ? "row" : "column",
-                      alignItems:
-                        align == "left"
-                          ? "flex-start"
-                          : align == "center"
-                            ? "center"
-                            : "flex-end",
-                      justifyContent: "center",
-                    }}
-                  >
-                    {_showName && (
-                      <TextOverflow
-                        type={textOverflow}
-                        value={
-                          displayName + (showValue || showPercent ? ":" : "")
-                        }
-                        speed={speed}
-                        style={{
-                          maxWidth,
-                          ...nameStyle,
-                          float: mode == "horizontal" ? "left" : "none",
-                          transform: `translate(${NameTranslate.x}px, ${NameTranslate.y}px)`,
-                        }}
-                      ></TextOverflow>
-                    )}
-                    {showValue && (
-                      <span
-                        style={{
-                          ...getFontStyle(valueFont),
-                          color: valueSameColor ? pure : valueFont.color,
-                          transform: `translate(${ValueTranslate.x}px, ${ValueTranslate.y}px)`,
-                        }}
-                      >
-                        {data.y}
-                        {showSuffix && (
-                          <span
-                            style={{
-                              position: "relative",
-                              fontSize: suffixFontSize,
-                              marginLeft: suffixTranslateX,
-                              top: suffixTranslateY,
-                            }}
-                          >
-                            {text}
-                          </span>
-                        )}
-                      </span>
-                    )}
-                    {showPercent && (
-                      <span
-                        style={{
-                          ...getFontStyle(percentFont),
-                          color: percentSameColor ? pure : percentFont.color,
-                          transform: `translate(${PercentTranslate.x}px, ${PercentTranslate.y}px)`,
-                        }}
-                      >
-                        {(_showValue ? "（" : "") +
-                          percent +
-                          "%" +
-                          (_showValue ? "）" : "")}
-                      </span>
-                    )}
-                  </div>
-                </foreignObject>
-              </g>
-            )
-          );
-        },
-      )}
-    </g>
-  );
-};
-
-function getAlign(align, reverse) {
-  if (align == "center") return "center";
-  if (align == "left") return reverse ? "flex-end" : "flex-start";
-  return reverse ? "flex-start" : "flex-end";
-}
-function getTranslate(translate, reverse) {
-  const { x, y } = translate;
-  return `translate(${reverse ? -x : x}px, ${y}px)`;
-}
-const RingLabel = ({
-  config: {
-    ringDuration,
-    labelDuration,
-    maxRadius = 0,
-    lineLength,
-    lineColor,
-    distance,
-    mode,
-    align = "center",
-    show,
-    translate: { x: translateX, y: translateY },
-    name: {
-      show: showName,
-      font: nameFont,
-      maxWidth,
-      textOverflow,
-      speed,
-      translate: nameTranslate,
-    },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize: suffixFontSize,
-        translate: { x: suffixTranslateX, y: suffixTranslateY },
-      },
-      translate: valueTranslate,
-    },
-    percent: {
-      show: showPercent,
-      sameColor: percentSameColor,
-      font: percentFont,
-      precision,
-      translate: percentTranslate,
-    },
-  },
-  iosStyle: { isIOS, left, top },
-  judge,
-  arcs,
-}) => {
-  const _arcs = useMemo(
-    () => getDataWithPercent(arcs, precision),
-    [arcs, precision],
-  );
-
-  //数据做出容错
-  if (judge == 0) {
-    _arcs.forEach((d) => {
-      d.percent = 0;
-    });
-  }
-
-  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) * ringDuration - labelDuration
-                    }ms`,
-                  }}
-                  d={
-                    "M" +
-                    x1 +
-                    ", " +
-                    y1 +
-                    "L" +
-                    x2 +
-                    ", " +
-                    y2 +
-                    "L" +
-                    x3 +
-                    ", " +
-                    y2
-                  }
-                  stroke={
-                    lineColor
-                      ? lineColor
-                      : type == "pure"
-                        ? pure
-                        : stops[0].color
-                  }
-                  fill="none"
-                />
-                <foreignObject
-                  width="1"
-                  height="1"
-                  x={_x}
-                  y={y2 + translateY}
-                  style={{ overflow: "visible", position: "relative" }}
-                >
-                  <div
-                    className={ringCss["label-text"]}
-                    style={{
-                      position: isIOS ? "absolute" : "relative",
-                      transform: isIOS
-                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
-                            left + _x
-                          }px),calc(-50% + ${top + y2 + translateY}px))`
-                        : "translate(0,-50%)",
-                      whiteSpace: "nowrap",
-                      float: x3 >= 0 ? "left" : "right",
-                      width: "max-content",
-                      animationDelay: `${
-                        (actualIndex + 1) * ringDuration - labelDuration
-                      }ms`,
-                      display: "flex",
-                      flexDirection: mode == "horizontal" ? "row" : "column",
-                      alignItems: getAlign(align, x3 >= 0),
-                      justifyContent: "center",
-                    }}
-                  >
-                    {_showName && (
-                      <TextOverflow
-                        type={textOverflow}
-                        value={
-                          displayName + (showValue || showPercent ? ":" : "")
-                        }
-                        speed={speed}
-                        style={{
-                          maxWidth,
-                          ...getFontStyle(nameFont),
-                          float: mode == "horizontal" ? "left" : "none",
-                          transform: getTranslate(nameTranslate, x3 >= 0),
-                        }}
-                      ></TextOverflow>
-                    )}
-                    {showValue && (
-                      <span
-                        style={{
-                          ...getFontStyle(valueFont),
-                          transform: getTranslate(valueTranslate, x3 >= 0),
-                          color: valueSameColor ? pure : valueFont.color,
-                        }}
-                      >
-                        {realData.y}
-                        {showSuffix && (
-                          <span
-                            style={{
-                              position: "relative",
-                              fontSize: suffixFontSize,
-                              marginLeft: suffixTranslateX,
-                              top: suffixTranslateY,
-                            }}
-                          >
-                            {text}
-                          </span>
-                        )}
-                      </span>
-                    )}
-                    {showPercent && (
-                      <span
-                        style={{
-                          ...getFontStyle(percentFont),
-                          transform: getTranslate(percentTranslate, x3 >= 0),
-                          color: percentSameColor ? pure : percentFont.color,
-                        }}
-                      >
-                        {(_showValue ? "（" : "") +
-                          percent +
-                          "%" +
-                          (_showValue ? "）" : "")}
-                      </span>
-                    )}
-                  </div>
-                </foreignObject>
-              </g>
-            )
-          );
-        },
-      )}
-    </g>
-  );
-};
-
-export default Mapping(Carousel(Component));
+/**
+ * 饼环图
+ */
+import React, {
+  memo,
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  useContext,
+  useLayoutEffect,
+  Fragment,
+} from "react";
+import {
+  ChartContainer,
+  Carousel,
+  Legend,
+  ConicalGradient,
+  Mapping,
+  TextOverflow,
+} 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";
+import { useAiDataOfPie } from "../hooks";
+import { PieTooltip } from "./PieTooltip";
+import { getPieAdaptiveMarginPreset } from "../utils/legendPlacement";
+
+const PI = Math.PI;
+
+const PIE_ADAPTIVE_MARGINS = {
+  right: { marginTop: 24, marginBottom: 24, marginLeft: 0, marginRight: 200 },
+  left: { marginTop: 24, marginBottom: 24, marginLeft: 200, marginRight: 0 },
+  top: { marginTop: 110, marginBottom: 24, marginLeft: 24, marginRight: 24 },
+  bottom: { marginTop: 24, marginBottom: 110, marginLeft: 24, marginRight: 24 },
+  hidden: { marginTop: 24, marginBottom: 24, marginLeft: 24, marginRight: 24 },
+};
+
+const getPieAdaptiveMargin = (show, alignment) =>
+  getPieAdaptiveMarginPreset(show, alignment, PIE_ADAPTIVE_MARGINS);
+
+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_,
+  index,
+) => {
+  const series =
+    series_.find((s) => s.fieldName == rest.data.s) ||
+    series_[index % series_.length];
+  return {
+    ...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(
+  ({
+    width,
+    height,
+    config: {
+      chart: {
+        label,
+        legend: { formatter = legendFormatter, ...legend },
+        animation: { ringDuration, labelDuration } = {},
+        margin: { marginLeft, marginTop, marginRight, marginBottom },
+      },
+      fan: {
+        chart = defaultChart,
+        chart: { outerRadius = defaultChart.outerRadius, padAngle },
+        angle = defaultAngle,
+        stroke: { show, strokeWidth, color } = { show: false },
+        decorate,
+        decorate2,
+        categoryText,
+        outerDecorate,
+        current,
+      } = {},
+      order,
+      columnsSeries,
+      series,
+      animation: {
+        on,
+        current: {
+          widthen = 0,
+          heighten = 0,
+          opacity = 0,
+          width: radiusWidthAdd = 0,
+          color: animateColor,
+          textStyle: animateCTS,
+          gap = 0,
+        },
+        rotate = 0,
+      },
+      tooltip = {},
+    },
+    config,
+    state: { currentIndex, trigger },
+    onEvent,
+    hoverEvent,
+    data: originData = [],
+  }) => {
+    const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
+    const prevIndex = useRef(null);
+    const { precision: legendPrecision } = legend.config.percent;
+    const {
+      id,
+      isIOS,
+      width: chartWidth,
+      height: chartHeight,
+      triggerOnRelative,
+      onEmit,
+      updateConfig,
+    } = useContext(chartContext);
+    const { show: legendShow, name: { layoutMode: legendLayoutMode } = {} } =
+      legend.config;
+    const legendAlignment = legend.config?.layout?.alignment;
+    const prevLegendLayoutKey = useRef(null);
+    useEffect(() => {
+      if (legendLayoutMode !== "Adaptive") {
+        prevLegendLayoutKey.current = null;
+        return;
+      }
+      if (!updateConfig) return;
+
+      const layoutKey = `${legendShow}-${legendAlignment}`;
+      const prev = prevLegendLayoutKey.current;
+      prevLegendLayoutKey.current = layoutKey;
+
+      // 挂载/刷新：只记录当前图例布局，margin 始终读配置项
+      if (prev === null) return;
+      if (prev === layoutKey) return;
+
+      const target = getPieAdaptiveMargin(legendShow, legendAlignment);
+      updateConfig({
+        id,
+        type: "config",
+        payload: [
+          {
+            path: ["chart", "margin", "marginTop"],
+            field: "value",
+            value: target.marginTop,
+          },
+          {
+            path: ["chart", "margin", "marginBottom"],
+            field: "value",
+            value: target.marginBottom,
+          },
+          {
+            path: ["chart", "margin", "marginLeft"],
+            field: "value",
+            value: target.marginLeft,
+          },
+          {
+            path: ["chart", "margin", "marginRight"],
+            field: "value",
+            value: target.marginRight,
+          },
+        ],
+      });
+    }, [id, updateConfig, legendLayoutMode, legendShow, legendAlignment]);
+    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]);
+    //此处创建arcsFuncTwo的原因是为了兼容数据全为零
+    const arcsFuncTwo = useMemo(() => {
+      const { startAngle = 0, endAngle = 360 } = getAngle(angle);
+      const arcsFunc = pie()
+        .startAngle((startAngle * PI) / 180)
+        .endAngle((endAngle * PI) / 180)
+        .value((d) => (d.y == 0 ? 1 : d.y));
+      return arcsFunc;
+    }, [angle]);
+    let judgeData = 0; //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
+    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;
+      }
+
+      //此处判断data中的y是否都为零,方便饼图都为零时展示
+
+      let arcs = 0;
+      data.forEach(function (item) {
+        judgeData += item.y;
+      });
+      if (judgeData == 0) {
+        arcs = arcsFuncTwo(data);
+      } else {
+        arcs = arcsFunc(data);
+      }
+
+      //const arcs = arcsFunc(data); 此处是原本的传输饼图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, arcsFuncTwo, chart, legendPrecision, order]);
+
+    const _arcs = useMemo(() => {
+      const seriesLength = series.size;
+      if (!seriesLength) return [];
+      const _series = [...series.values()];
+      if (_series.length < arcs.length)
+        console.warn("请检查数据中是否存在相同的s");
+      return arcs.map((arc, index) => getArc(radius, arc, _series, index));
+    }, [series, arcs, radius]);
+
+    const onClick = useCallback(
+      (e) => {
+        const _data = arcs[+e.currentTarget.dataset.index].data;
+        triggerOnRelative("onClick", _data);
+        onEmit("onClick", _data);
+        onEvent({
+          currentIndex: +e.currentTarget.dataset.index,
+          type: "onClick",
+        });
+      },
+      [onEvent],
+    );
+
+    const onMouseEnter = useCallback(
+      (e) => {
+        const _data = arcs[+e.currentTarget.dataset.index].data;
+        triggerOnRelative("mousehover", _data);
+        onEmit("mousehover", _data);
+        onEvent({
+          currentIndex: +e.currentTarget.dataset.index,
+          type: "onMouseEnter",
+        });
+      },
+      [onEvent, triggerOnRelative, onEmit],
+    );
+
+    const onMouseLeave = useCallback(
+      (e) => {
+        setMousePos({
+          x: 0,
+          y: 0,
+        });
+        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] ? arcs[+currentIndex].data : {};
+            triggerOnRelative("carousel", _data);
+            onEmit("carousel", _data);
+          },
+        });
+      } else {
+        if (currentIndex !== null && trigger === "onClick") {
+          const _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
+          triggerOnRelative("click", _data);
+          onEmit("click", _data);
+        }
+      }
+      return () => {
+        prevIndex.current = currentIndex;
+        animation && animation.stop();
+        animation = null;
+      };
+    }, [
+      JSON.stringify(arcs),
+      on,
+      currentIndex,
+      trigger,
+      onEmit,
+      triggerOnRelative,
+    ]);
+    const aiData = useAiDataOfPie(_arcs, legend);
+    useEffect(() => {
+      if (aiData.length) {
+        if (!window.aiData) {
+          window.aiData = {};
+        }
+        window.aiData[id] = {
+          getAI: () => {
+            return aiData;
+          },
+        };
+      }
+      return () => {
+        window.aiData && window.aiData[id] && delete window.aiData[id];
+      };
+    }, [JSON.stringify(aiData), id]);
+
+    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;
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+    const [hoverData, setHoverData] = useState(null);
+    const pieWarpEl = useRef(null);
+    const domRef = useRef();
+    return outerDecorate ? (
+      <div ref={domRef}>
+        <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+          width={width}
+          height={height}
+          marginLeft={marginLeft}
+          marginTop={marginTop}
+          ref={pieWarpEl}
+        >
+          <g
+            style={{
+              "--labelDuration": labelDuration + "ms",
+              "--ringDuration": ringDuration + "ms",
+              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) => {
+                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 * ringDuration}ms`,
+                      }}
+                      data-index={index}
+                      onClick={onClick}
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                      onMouseMove={(e) => {
+                        const _data = arcs[+e.currentTarget.dataset.index];
+                        const warpBoxPos = {
+                          x: pieWarpEl.current.getBoundingClientRect().x,
+                          y: pieWarpEl.current.getBoundingClientRect().y,
+                        };
+                        setMousePos({
+                          x: e.clientX - warpBoxPos.x,
+                          y: e.clientY - warpBoxPos.y,
+                        });
+                        setHoverData(_data);
+                      }}
+                      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,
+                  ringDuration,
+                  labelDuration,
+                }}
+                iosStyle={{
+                  isIOS,
+                  left: halfChartWidth + marginLeft,
+                  top: halfChartHeight + marginTop,
+                }}
+                arcs={_arcs}
+                judge={judgeData}
+              />
+            )}
+          </g>
+        </ChartContainer>
+
+        <Legend
+          {...legend}
+          height={chartHeight}
+          componentWidth={width}
+          marginLeft={marginLeft}
+          marginRight={marginRight}
+          isPieChart
+          columnsSeries={columnsSeries}
+          data={data}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
+          pieClick={onClick}
+          formatter={formatter}
+          judge={judgeData}
+        />
+        {tooltip &&
+          mousePos &&
+          mousePos.x != 0 &&
+          mousePos.y != 0 &&
+          tooltip.manual && (
+            <div
+              style={{
+                position: "absolute",
+                pointerEvents: "none",
+              }}
+            >
+              <PieTooltip
+                series={series}
+                domRef={domRef}
+                data={hoverData}
+                config={tooltip}
+                pieCenter={{
+                  x: halfChartWidth,
+                  y: maxRadius + marginTop,
+                }}
+                mousePos={mousePos}
+              />
+            </div>
+          )}
+      </div>
+    ) : (
+      <div ref={domRef}>
+        <ChartContainer
+          width={width}
+          height={height}
+          marginLeft={marginLeft}
+          marginTop={marginTop}
+          onMouseEnter={() => {
+            hoverEvent(true);
+          }}
+          onMouseLeave={() => {
+            hoverEvent(false);
+          }}
+          ref={pieWarpEl}
+        >
+          <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 deltaWidthen = offset * widthen;
+                const deltaHeighten = offset * heighten;
+                const path = arc
+                  .innerRadius(innerRadius + deltaWidthen)
+                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(
+                  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={index}
+                      onClick={onClick}
+                      onMouseEnter={onMouseEnter}
+                      onMouseLeave={onMouseLeave}
+                      onMouseMove={(e) => {
+                        const _data = arcs[+e.currentTarget.dataset.index];
+                        const warpBoxPos = {
+                          x: pieWarpEl.current.getBoundingClientRect().x,
+                          y: pieWarpEl.current.getBoundingClientRect().y,
+                        };
+                        setMousePos({
+                          x: e.clientX - warpBoxPos.x,
+                          y: e.clientY - warpBoxPos.y,
+                        });
+                        setHoverData(_data);
+                      }}
+                      d={path}
+                      stroke={show ? color : "none"}
+                      strokeWidth={show ? strokeWidth : "0"}
+                      fill={"url(#" + id + ")"}
+                      fillOpacity={fillOpacity}
+                    />
+                    {
+                      //装饰物2，产生于每个弧的外部
+                      decorate2 && decorate2.show && (
+                        <path
+                          data-index={index}
+                          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}
+                        />
+                      )
+                    }
+                    {
+                      //类目文本
+                      value && 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}
+                iosStyle={{
+                  isIOS,
+                  left: halfChartWidth + marginLeft,
+                  top: halfChartHeight + marginTop,
+                }}
+                arcs={_arcs}
+                judge={judgeData}
+              />
+            )}
+            {current && (
+              <g
+                fillOpacity={y}
+                style={{ transform: "rotate(" + -rotate_ + "deg)" }}
+              >
+                <Current
+                  config={current}
+                  width={chartWidth}
+                  height={chartHeight}
+                  iosStyle={{
+                    marginLeft,
+                    marginTop,
+                    isIOS,
+                  }}
+                  data={_arcs}
+                  judge={judgeData}
+                  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}
+          height={chartHeight}
+          componentWidth={width}
+          marginLeft={marginLeft}
+          marginRight={marginRight}
+          isPieChart
+          data={data}
+          columnsSeries={columnsSeries}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
+          pieClick={onClick}
+          formatter={formatter}
+          judge={judgeData}
+        />
+        {tooltip &&
+          mousePos &&
+          mousePos.x != 0 &&
+          mousePos.y != 0 &&
+          tooltip.manual && (
+            <div
+              style={{
+                position: "absolute",
+                pointerEvents: "none",
+              }}
+            >
+              <PieTooltip
+                series={series}
+                domRef={domRef}
+                data={hoverData}
+                config={tooltip}
+                pieCenter={{
+                  x: halfChartWidth,
+                  y: maxRadius + marginTop,
+                }}
+                mousePos={mousePos}
+              />
+            </div>
+          )}
+      </div>
+    );
+  },
+);
+
+const Current = ({
+  config: {
+    show,
+    gap,
+    name: {
+      show: showName,
+      sameColor: nameColor,
+      font: nameFont,
+      translate = { x: 0, y: 0 },
+      maxWidth,
+      textOverflow,
+      speed,
+    },
+    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 },
+      },
+    },
+  },
+  iosStyle: { isIOS, marginLeft, marginTop },
+  width,
+  height,
+  data,
+  judge,
+  currentIndex,
+}) => {
+  const _data = useMemo(() => {
+    const legendDataWithPercent = getDataWithPercent(data, precision);
+    return sortPie(legendDataWithPercent, "");
+  }, [data, precision]);
+
+  //数据容错,当data都为零那么需要进行以下容错
+  if (judge == 0) {
+    _data.forEach((d) => {
+      ((d.percent = 0), (d.value = 0));
+    });
+  }
+
+  const currentData = _data[currentIndex];
+
+  if (!currentData) return null;
+
+  const { displayName, fieldName, value, percent } = currentData;
+  let nameTemp = displayName ? displayName : fieldName; //类目名
+
+  let foreignStyle = {
+      //foreignObject标签样式，
+      width,
+      height,
+      position: "relative",
+      overflow: "visible",
+      pointerEvents: "none",
+    },
+    boxStyle = {
+      //弹性盒子样式，用于当前值的上下居中对齐等
+      width,
+      height,
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      transform: isIOS
+        ? `translate(${marginLeft}px,${marginTop}px)`
+        : `translate(-${width / 2}px,-${height / 2}px)`,
+    };
+  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 && (
+            <TextOverflow
+              type={textOverflow}
+              value={nameTemp}
+              speed={speed}
+              style={{
+                width: "100%",
+                maxWidth,
+                textAlign: "center",
+                display: textOverflow == "marquee" ? "flex" : "bolck",
+                justifyContent: "center",
+                ...getFontStyle(nameFont),
+                margin: gap / 2 + "px 0",
+                color: nameColor ? seriesColor : nameFont.color,
+                transform: `translate(${translate.x}px,${translate.y}px)`,
+              }}
+            ></TextOverflow>
+          )}
+          {
+            //真实值
+            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={{
+                      display: "inline-block",
+                      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,
+    align,
+    show,
+    translate: { x: translateX, y: translateY },
+    name: {
+      show: showName,
+      font: nameFont,
+      maxWidth,
+      textOverflow,
+      speed,
+      translate: NameTranslate,
+    },
+    value: {
+      show: showValue,
+      font: valueFont,
+      sameColor: valueSameColor,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize: suffixFontSize,
+        translate: { x: suffixTranslateX, y: suffixTranslateY },
+      },
+      translate: ValueTranslate,
+    },
+    percent: {
+      show: showPercent,
+      sameColor: percentSameColor,
+      font: percentFont,
+      precision,
+      translate: PercentTranslate,
+    },
+  },
+  iosStyle: { isIOS, left, top },
+  arcs,
+  judge,
+  animation,
+}) => {
+  const _arcs = useMemo(
+    () => getDataWithPercent(arcs, precision),
+    [arcs, precision],
+  );
+  //数据做出容错
+  if (judge == 0) {
+    _arcs.forEach((d) => {
+      d.percent = 0;
+    });
+  }
+  return (
+    <g>
+      {_arcs.map(
+        (
+          {
+            series: {
+              color: {
+                type,
+                pure,
+                linear: { stops },
+              },
+            },
+            data,
+            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);
+          const nameStyle = getFontStyle(nameFont);
+          return (
+            show &&
+            (_showName || showPercent || showValue) && (
+              <g key={index}>
+                <path
+                  className={animation ? ringCss["label-line"] : ""}
+                  style={{
+                    animationDelay: `${
+                      animation
+                        ? (actualIndex + 1) * ringDuration - labelDuration
+                        : 0
+                    }ms`,
+                  }}
+                  d={
+                    "M" +
+                    x1 +
+                    ", " +
+                    y1 +
+                    "L" +
+                    x2 +
+                    ", " +
+                    y2 +
+                    "L" +
+                    x3 +
+                    ", " +
+                    y2
+                  }
+                  stroke={
+                    lineColor
+                      ? lineColor
+                      : type == "pure"
+                        ? pure
+                        : stops[0].color
+                  }
+                  fill="none"
+                />
+                <foreignObject
+                  width="1"
+                  height="1"
+                  x={_x}
+                  y={y2 + translateY}
+                  style={{ overflow: "visible", position: "relative" }}
+                >
+                  <div
+                    className={animation ? ringCss["label-text"] : ""}
+                    style={{
+                      position: isIOS ? "absolute" : "relative",
+                      transform: isIOS
+                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
+                            left + _x
+                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                        : "translate(0,-50%)",
+                      whiteSpace: "nowrap",
+                      float: x3 >= 0 ? "left" : "right",
+                      width: "max-content",
+                      display: "flex",
+                      flexDirection: mode == "horizontal" ? "row" : "column",
+                      alignItems:
+                        align == "left"
+                          ? "flex-start"
+                          : align == "center"
+                            ? "center"
+                            : "flex-end",
+                      justifyContent: "center",
+                    }}
+                  >
+                    {_showName && (
+                      <TextOverflow
+                        type={textOverflow}
+                        value={
+                          displayName + (showValue || showPercent ? ":" : "")
+                        }
+                        speed={speed}
+                        style={{
+                          maxWidth,
+                          ...nameStyle,
+                          float: mode == "horizontal" ? "left" : "none",
+                          transform: `translate(${NameTranslate.x}px, ${NameTranslate.y}px)`,
+                        }}
+                      ></TextOverflow>
+                    )}
+                    {showValue && (
+                      <span
+                        style={{
+                          ...getFontStyle(valueFont),
+                          color: valueSameColor ? pure : valueFont.color,
+                          transform: `translate(${ValueTranslate.x}px, ${ValueTranslate.y}px)`,
+                        }}
+                      >
+                        {data.y}
+                        {showSuffix && (
+                          <span
+                            style={{
+                              position: "relative",
+                              fontSize: suffixFontSize,
+                              marginLeft: suffixTranslateX,
+                              top: suffixTranslateY,
+                            }}
+                          >
+                            {text}
+                          </span>
+                        )}
+                      </span>
+                    )}
+                    {showPercent && (
+                      <span
+                        style={{
+                          ...getFontStyle(percentFont),
+                          color: percentSameColor ? pure : percentFont.color,
+                          transform: `translate(${PercentTranslate.x}px, ${PercentTranslate.y}px)`,
+                        }}
+                      >
+                        {(_showValue ? "（" : "") +
+                          percent +
+                          "%" +
+                          (_showValue ? "）" : "")}
+                      </span>
+                    )}
+                  </div>
+                </foreignObject>
+              </g>
+            )
+          );
+        },
+      )}
+    </g>
+  );
+};
+
+function getAlign(align, reverse) {
+  if (align == "center") return "center";
+  if (align == "left") return reverse ? "flex-end" : "flex-start";
+  return reverse ? "flex-start" : "flex-end";
+}
+function getTranslate(translate, reverse) {
+  const { x, y } = translate;
+  return `translate(${reverse ? -x : x}px, ${y}px)`;
+}
+const RingLabel = ({
+  config: {
+    ringDuration,
+    labelDuration,
+    maxRadius = 0,
+    lineLength,
+    lineColor,
+    distance,
+    mode,
+    align = "center",
+    show,
+    translate: { x: translateX, y: translateY },
+    name: {
+      show: showName,
+      font: nameFont,
+      maxWidth,
+      textOverflow,
+      speed,
+      translate: nameTranslate,
+    },
+    value: {
+      show: showValue,
+      font: valueFont,
+      sameColor: valueSameColor,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize: suffixFontSize,
+        translate: { x: suffixTranslateX, y: suffixTranslateY },
+      },
+      translate: valueTranslate,
+    },
+    percent: {
+      show: showPercent,
+      sameColor: percentSameColor,
+      font: percentFont,
+      precision,
+      translate: percentTranslate,
+    },
+  },
+  iosStyle: { isIOS, left, top },
+  judge,
+  arcs,
+}) => {
+  const _arcs = useMemo(
+    () => getDataWithPercent(arcs, precision),
+    [arcs, precision],
+  );
+
+  //数据做出容错
+  if (judge == 0) {
+    _arcs.forEach((d) => {
+      d.percent = 0;
+    });
+  }
+
+  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) * ringDuration - labelDuration
+                    }ms`,
+                  }}
+                  d={
+                    "M" +
+                    x1 +
+                    ", " +
+                    y1 +
+                    "L" +
+                    x2 +
+                    ", " +
+                    y2 +
+                    "L" +
+                    x3 +
+                    ", " +
+                    y2
+                  }
+                  stroke={
+                    lineColor
+                      ? lineColor
+                      : type == "pure"
+                        ? pure
+                        : stops[0].color
+                  }
+                  fill="none"
+                />
+                <foreignObject
+                  width="1"
+                  height="1"
+                  x={_x}
+                  y={y2 + translateY}
+                  style={{ overflow: "visible", position: "relative" }}
+                >
+                  <div
+                    className={ringCss["label-text"]}
+                    style={{
+                      position: isIOS ? "absolute" : "relative",
+                      transform: isIOS
+                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
+                            left + _x
+                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                        : "translate(0,-50%)",
+                      whiteSpace: "nowrap",
+                      float: x3 >= 0 ? "left" : "right",
+                      width: "max-content",
+                      animationDelay: `${
+                        (actualIndex + 1) * ringDuration - labelDuration
+                      }ms`,
+                      display: "flex",
+                      flexDirection: mode == "horizontal" ? "row" : "column",
+                      alignItems: getAlign(align, x3 >= 0),
+                      justifyContent: "center",
+                    }}
+                  >
+                    {_showName && (
+                      <TextOverflow
+                        type={textOverflow}
+                        value={
+                          displayName + (showValue || showPercent ? ":" : "")
+                        }
+                        speed={speed}
+                        style={{
+                          maxWidth,
+                          ...getFontStyle(nameFont),
+                          float: mode == "horizontal" ? "left" : "none",
+                          transform: getTranslate(nameTranslate, x3 >= 0),
+                        }}
+                      ></TextOverflow>
+                    )}
+                    {showValue && (
+                      <span
+                        style={{
+                          ...getFontStyle(valueFont),
+                          transform: getTranslate(valueTranslate, x3 >= 0),
+                          color: valueSameColor ? pure : valueFont.color,
+                        }}
+                      >
+                        {realData.y}
+                        {showSuffix && (
+                          <span
+                            style={{
+                              position: "relative",
+                              fontSize: suffixFontSize,
+                              marginLeft: suffixTranslateX,
+                              top: suffixTranslateY,
+                            }}
+                          >
+                            {text}
+                          </span>
+                        )}
+                      </span>
+                    )}
+                    {showPercent && (
+                      <span
+                        style={{
+                          ...getFontStyle(percentFont),
+                          transform: getTranslate(percentTranslate, x3 >= 0),
+                          color: percentSameColor ? pure : percentFont.color,
+                        }}
+                      >
+                        {(_showValue ? "（" : "") +
+                          percent +
+                          "%" +
+                          (_showValue ? "）" : "")}
+                      </span>
+                    )}
+                  </div>
+                </foreignObject>
+              </g>
+            )
+          );
+        },
+      )}
+    </g>
+  );
+};
+
+export default Mapping(Carousel(Component));