@easyv/charts 1.4.24 → 1.4.26

package/src/components/PieChart.js

@@ -11,21 +11,29 @@ import React, {
   useContext,
   useLayoutEffect,
   Fragment,
-} from 'react';
-import { ChartContainer, Carousel, Legend, ConicalGradient, Mapping, TextOverflow } from '.';
-import { chartContext } from '../context';
+} 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';
+} 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;
 
@@ -34,7 +42,7 @@ const defaultChart = {
   innerRadius: 0,
   cornerRadius: 0,
   rose: false,
-  roseType: 'radius',
+  roseType: "radius",
   baseRadius: 0,
   padAngle: 0,
 };
@@ -42,14 +50,14 @@ 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';
+    if (mode == "vertical") {
+      return dir == 1 ? "1.1em" : "-2.6em";
     } else {
       return 0;
     }
   } else {
-    if (mode == 'vertical') {
-      return dir * 1.1 + 'em';
+    if (mode == "vertical") {
+      return dir * 1.1 + "em";
     } else {
       return 0;
     }
@@ -57,14 +65,14 @@ const nameDy = (showValue, showPercent, mode, dir) => {
 };
 const valueDy = (value1, mode, dir) => {
   if (value1) {
-    if (mode == 'vertical') {
-      return '1.5em';
+    if (mode == "vertical") {
+      return "1.5em";
     } else {
       return 0;
     }
   } else {
-    if (mode == 'vertical') {
-      return dir == 1 ? '1.1em' : '-1.1em';
+    if (mode == "vertical") {
+      return dir == 1 ? "1.1em" : "-1.1em";
     } else {
       return 0;
     }
@@ -76,14 +84,14 @@ const percentDy_ = (showName, showValue, mode, dir) => {
     return 0;
   }
   if (showName) {
-    if (mode == 'vertical') {
-      return '1.5em';
+    if (mode == "vertical") {
+      return "1.5em";
     } else {
       return 0;
     }
   } else {
-    if (mode == 'vertical') {
-      return dir * 1.1 + 'em';
+    if (mode == "vertical") {
+      return dir * 1.1 + "em";
     } else {
       return 0;
     }
@@ -92,13 +100,13 @@ const percentDy_ = (showName, showValue, mode, dir) => {
 
 const percentX = (showName, showValue, mode, x) => {
   if (showValue) {
-    return '';
+    return "";
   }
   if (showName) {
-    if (mode == 'vertical') {
+    if (mode == "vertical") {
       return x;
     } else {
-      return '';
+      return "";
     }
   } else {
     return x;
@@ -107,13 +115,13 @@ const percentX = (showName, showValue, mode, x) => {
 
 const percentDx = (showName, showValue, mode) => {
   if (showValue) {
-    return '0.5em';
+    return "0.5em";
   }
   if (showName) {
-    if (mode == 'vertical') {
+    if (mode == "vertical") {
       return 0;
     } else {
-      return '0.5em';
+      return "0.5em";
     }
   } else {
     return 0;
@@ -125,8 +133,8 @@ const percentDy = (showName, showValue, mode) => {
     return 0;
   }
   if (showName) {
-    if (mode == 'vertical') {
-      return '1.5em';
+    if (mode == "vertical") {
+      return "1.5em";
     } else {
       return 0;
     }
@@ -137,12 +145,12 @@ const percentDy = (showName, showValue, mode) => {
 
 const valueDx = (showName, mode) => {
   if (!showName) {
-    return '';
+    return "";
   }
-  if (mode == 'vertical') {
-    return '';
+  if (mode == "vertical") {
+    return "";
   } else {
-    return '0.5em';
+    return "0.5em";
   }
 };
 
@@ -179,10 +187,12 @@ const getArc = (
   series_,
   index
 ) => {
-  const series = series_.find(s=>s.fieldName==rest.data.s) || series_[index%series_.length];
+  const series =
+    series_.find((s) => s.fieldName == rest.data.s) ||
+    series_[index % series_.length];
   return {
     ...rest,
-    type: 'pie',
+    type: "pie",
     fieldName: series.fieldName,
     displayName: series.displayName || rest.data.s,
     series: series,
@@ -195,7 +205,7 @@ const getArc = (
       .startAngle(startAngle)
       .endAngle(endAngle)
       .padAngle(padAngle),
-  } 
+  };
 };
 
 const getCircleScale = ({ count, color, width, length } = tick, radius) => {
@@ -270,13 +280,15 @@ const Component = memo(
         },
         rotate = 0,
       },
+      tooltip = {},
     },
+    config,
     state: { currentIndex, trigger },
     onEvent,
     hoverEvent,
-    data:originData = [],
+    data: originData = [],
   }) => {
-    const data =originData.map(d=>({...d,y:d.y<0?0:d.y}));
+    const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
     const prevIndex = useRef(null);
     const { precision: legendPrecision } = legend.config.percent;
     const {
@@ -303,10 +315,10 @@ const Component = memo(
       const arcsFunc = pie()
         .startAngle((startAngle * PI) / 180)
         .endAngle((endAngle * PI) / 180)
-        .value((d) => d.y==0?1:d.y);
+        .value((d) => (d.y == 0 ? 1 : d.y));
       return arcsFunc;
     }, [angle]);
-    let judgeData = 0  //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
+    let judgeData = 0; //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
     const arcs = useMemo(() => {
       const _chart = Object.assign(defaultChart, chart);
       const {
@@ -320,29 +332,29 @@ const Component = memo(
       const _padAngle = (padAngle * Math.PI) / 180;
 
       switch (order) {
-        case '':
+        case "":
           arcsFunc.sort(null);
           break;
-        case 'desc':
+        case "desc":
           arcsFunc.sort((a, b) => b.y - a.y);
           break;
-        case 'asc':
+        case "asc":
           arcsFunc.sort((a, b) => a.y - b.y);
           break;
       }
-       
+
       //此处判断data中的y是否都为零,方便饼图都为零时展示
 
       let arcs = 0;
-      data.forEach(function(item){
-        judgeData+=item.y
+      data.forEach(function (item) {
+        judgeData += item.y;
       });
       if (judgeData == 0) {
-        arcs = arcsFuncTwo(data)
+        arcs = arcsFuncTwo(data);
       } else {
-        arcs = arcsFunc(data)
+        arcs = arcsFunc(data);
       }
-      
+
       //const arcs = arcsFunc(data); 此处是原本的传输饼图data流程
       const legendDataWithPercent = getDataWithPercent(arcs, legendPrecision);
       const _legendDataWithPercent = sortPie(legendDataWithPercent, order);
@@ -356,9 +368,9 @@ const Component = memo(
         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,
+            id: id + "_linear_" + index,
+            startAngle: roseType == "area" ? angle * index : startAngle,
+            endAngle: roseType == "area" ? angle * (index + 1) : endAngle,
             cornerRadius,
             padAngle: _padAngle,
             innerRadius,
@@ -368,50 +380,56 @@ const Component = memo(
       }
       return _legendDataWithPercent.map((arc, index) => ({
         ...arc,
-        id: id + '_linear_' + index,
+        id: id + "_linear_" + index,
         cornerRadius,
         padAngle: _padAngle,
         innerRadius,
         outerRadius,
       }));
-    }, [data, arcsFunc,arcsFuncTwo, chart, legendPrecision, order]);
+    }, [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");
+      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) =>
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
-          type: 'onClick',
+          type: "onClick",
         }),
       [onEvent]
     );
 
     const onMouseEnter = useCallback(
-      (e) =>{
+      (e) => {
         const _data = arcs[+currentIndex].data;
         triggerOnRelative(_data);
-        onEmit('onMouseEnter', _data);
+        onEmit("onMouseEnter", _data);
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
-          type: 'onMouseEnter',
-        })
+          type: "onMouseEnter",
+        });
       },
-      [onEvent,triggerOnRelative,onEmit]
+      [onEvent, triggerOnRelative, onEmit]
     );
 
     const onMouseLeave = useCallback(
-      (e) =>
+      (e) => {
+        setMousePos({
+          x: 0,
+          y: 0,
+        });
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
-          type: 'onMouseLeave',
-        }),
+          type: "onMouseLeave",
+        });
+      },
       [onEvent]
     );
 
@@ -430,11 +448,11 @@ const Component = memo(
           onComplete: () => {
             const _data = arcs[+currentIndex].data;
             triggerOnRelative(_data);
-            onEmit('carousel', _data);
+            onEmit("carousel", _data);
           },
         });
       } else {
-        if (currentIndex !== null && trigger === 'onClick') {
+        if (currentIndex !== null && trigger === "onClick") {
           const _data = arcs[+currentIndex].data;
           triggerOnRelative(_data);
           onEmit(trigger, _data);
@@ -454,21 +472,21 @@ const Component = memo(
       triggerOnRelative,
     ]);
     const aiData = useAiDataOfPie(_arcs, legend);
-    useEffect(()=>{
-      if(aiData.length){
-        if(!window.aiData){ 
-          window.aiData={};
+    useEffect(() => {
+      if (aiData.length) {
+        if (!window.aiData) {
+          window.aiData = {};
         }
-        window.aiData[id]={
-          getAI:()=>{
+        window.aiData[id] = {
+          getAI: () => {
             return aiData;
-          }
-        }
+          },
+        };
       }
-      return ()=>{
+      return () => {
         window.aiData && window.aiData[id] && delete window.aiData[id];
-      }
-    },[JSON.stringify(aiData),id]);
+      };
+    }, [JSON.stringify(aiData), id]);
 
     const halfChartWidth = chartWidth / 2;
     const halfChartHeight = chartHeight / 2;
@@ -484,6 +502,9 @@ const Component = memo(
       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);
     return outerDecorate ? (
       <>
         <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
@@ -491,18 +512,19 @@ const Component = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
+          ref={pieWarpEl}
         >
           <g
             style={{
-              transition: 'transform ease-in-out 0.3s',
+              transition: "transform ease-in-out 0.3s",
               transform:
-                'translate(' +
+                "translate(" +
                 halfChartWidth +
-                'px, ' +
+                "px, " +
                 halfChartHeight +
-                'px) rotate(' +
+                "px) rotate(" +
                 rotate_ +
-                'deg)',
+                "deg)",
             }}
           >
             {
@@ -511,10 +533,10 @@ const Component = memo(
                 getCircleScale(outerDecorate.tick, maxRadius)
             }
             <circle //外环装饰
-              cx='0'
-              cy='0'
+              cx="0"
+              cy="0"
               r={maxRadius + 2}
-              fill='none'
+              fill="none"
               stroke={outerDecorate.color}
               strokeWidth={outerDecorate.width}
             />
@@ -531,7 +553,7 @@ const Component = memo(
                 return (
                   <Fragment key={index}>
                     <path
-                      className={ringCss['inner-arc']}
+                      className={ringCss["inner-arc"]}
                       style={{
                         strokeDasharray: `${dashLength},${2 * dashLength}`,
                         strokeDashoffset: dashLength,
@@ -541,10 +563,22 @@ const Component = memo(
                       onClick={onClick}
                       onMouseEnter={onMouseEnter}
                       onMouseLeave={onMouseLeave}
-                      d={path.split('L')[0]}
-                      stroke={'url(#' + id + ')'}
+                      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'
+                      fill="none"
                     />
                     <defs>
                       <LinearGradient
@@ -567,7 +601,28 @@ const Component = memo(
             )}
           </g>
         </ChartContainer>
-        <Legend {...legend} series={_arcs} formatter={formatter}  judge = {judgeData}/>
+        {tooltip &&
+          mousePos &&
+          mousePos.x != 0 &&
+          mousePos.y != 0 &&
+          tooltip.manual && (
+            <PieTooltip
+              series={series}
+              data={hoverData}
+              config={tooltip}
+              pieCenter={{
+                x: halfChartWidth,
+                y: maxRadius + marginTop,
+              }}
+              mousePos={mousePos}
+            />
+          )}
+        <Legend
+          {...legend}
+          series={_arcs}
+          formatter={formatter}
+          judge={judgeData}
+        />
       </>
     ) : (
       <>
@@ -576,20 +631,25 @@ const Component = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
-          onMouseEnter={()=>{hoverEvent(true)}}
-          onMouseLeave={()=>{hoverEvent(false)}}
+          onMouseEnter={() => {
+            hoverEvent(true);
+          }}
+          onMouseLeave={() => {
+            hoverEvent(false);
+          }}
+          ref={pieWarpEl}
         >
           <g
             style={{
-              transition: 'transform ease-in-out 0.3s',
+              transition: "transform ease-in-out 0.3s",
               transform:
-                'translate(' +
+                "translate(" +
                 halfChartWidth +
-                'px, ' +
+                "px, " +
                 halfChartHeight +
-                'px) rotate(' +
+                "px) rotate(" +
                 rotate_ +
-                'deg)',
+                "deg)",
             }}
           >
             {_arcs.map(
@@ -622,7 +682,7 @@ const Component = memo(
                 const currentPie = animateColor
                   ? getColorList(animateColor)
                   : getColorList(series.color);
-                let textPath = '',
+                let textPath = "",
                   categoryTextStyle = {};
                 if (categoryText && categoryText.show) {
                   //如果有类目文本，则需要计算文字路径
@@ -634,7 +694,7 @@ const Component = memo(
                     .outerRadius(
                       outerRadius + (current ? gap : categoryText.gap)
                     )(value);
-                  let lastA = textArc.lastIndexOf('A');
+                  let lastA = textArc.lastIndexOf("A");
                   textPath = textArc.slice(
                     0,
                     lastA > 0 ? lastA : textArc.length
@@ -651,10 +711,22 @@ const Component = memo(
                       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 + ')'}
+                      stroke={show ? color : "none"}
+                      strokeWidth={show ? strokeWidth : "0"}
+                      fill={"url(#" + id + ")"}
                       fillOpacity={fillOpacity}
                     />
                     {
@@ -672,43 +744,43 @@ const Component = memo(
                                 decorate2.radiusWidth +
                                 (current ? radiusWidthAdd : 0)
                             )(value)}
-                          stroke={show ? color : 'none'}
-                          strokeWidth={show ? strokeWidth : '0'}
-                          fill={'url(#' + id + ')'}
+                          stroke={show ? color : "none"}
+                          strokeWidth={show ? strokeWidth : "0"}
+                          fill={"url(#" + id + ")"}
                           fillOpacity={decorate2.opacity / 100}
                         />
                       )
                     }
                     {
                       //类目文本
-                       value && categoryText && categoryText.show && (
+                      value && categoryText && categoryText.show && (
                         <g>
                           <path
                             onClick={onClick}
                             onMouseEnter={onMouseEnter}
                             onMouseLeave={onMouseLeave}
-                            id={id + '_text_' + index}
+                            id={id + "_text_" + index}
                             d={textPath}
-                            fill='none'
-                            stroke='none'
+                            fill="none"
+                            stroke="none"
                           />
                           <text
-                            textAnchor='middle'
+                            textAnchor="middle"
                             style={{
                               ...categoryTextStyle,
                               fontWeight: categoryTextStyle.bold
-                                ? 'bold'
-                                : 'normal',
+                                ? "bold"
+                                : "normal",
                               fontStyle: categoryTextStyle.italic
-                                ? 'italic'
-                                : 'normal',
-                              pointerEvents: 'none',
+                                ? "italic"
+                                : "normal",
+                              pointerEvents: "none",
                             }}
                             fill={categoryTextStyle.color}
                           >
                             <textPath
-                              startOffset='50%'
-                              href={'#' + id + '_text_' + index}
+                              startOffset="50%"
+                              href={"#" + id + "_text_" + index}
                             >
                               {_arcs[index].displayName ||
                                 _arcs[index].fieldName}
@@ -736,18 +808,18 @@ const Component = memo(
                 );
               }
             )}
-            {label && <Label config={label} arcs={_arcs}  judge = {judgeData} />}
+            {label && <Label config={label} arcs={_arcs} judge={judgeData} />}
             {current && (
               <g
                 fillOpacity={y}
-                style={{ transform: 'rotate(' + -rotate_ + 'deg)' }}
+                style={{ transform: "rotate(" + -rotate_ + "deg)" }}
               >
                 <Current
                   config={current}
                   width={width}
                   height={height}
                   data={_arcs}
-                  judge = {judgeData}
+                  judge={judgeData}
                   currentIndex={+currentIndex}
                 />
               </g>
@@ -765,7 +837,28 @@ const Component = memo(
             radius={radius}
           />
         )}
-        <Legend {...legend} series={_arcs} formatter={formatter}  judge = {judgeData} />
+        {tooltip &&
+          mousePos &&
+          mousePos.x != 0 &&
+          mousePos.y != 0 &&
+          tooltip.manual && (
+            <PieTooltip
+              series={series}
+              data={hoverData}
+              config={tooltip}
+              pieCenter={{
+                x: halfChartWidth,
+                y: maxRadius + marginTop,
+              }}
+              mousePos={mousePos}
+            />
+          )}
+        <Legend
+          {...legend}
+          series={_arcs}
+          formatter={formatter}
+          judge={judgeData}
+        />
       </>
     );
   }
@@ -775,7 +868,14 @@ const Current = ({
   config: {
     show,
     gap,
-    name: { show: showName, sameColor: nameColor, font: nameFont, maxWidth, textOverflow, speed },
+    name: {
+      show: showName,
+      sameColor: nameColor,
+      font: nameFont,
+      maxWidth,
+      textOverflow,
+      speed,
+    },
     percent: {
       show: showPercent,
       sameColor: percentColor,
@@ -793,8 +893,8 @@ const Current = ({
         fontSize,
         text,
         translate: { x: translateSuffixX, y: translateSuffixY },
-      }
-    }
+      },
+    },
   },
   width,
   height,
@@ -804,13 +904,13 @@ const Current = ({
 }) => {
   const _data = useMemo(() => {
     const legendDataWithPercent = getDataWithPercent(data, precision);
-    return sortPie(legendDataWithPercent, '');
+    return sortPie(legendDataWithPercent, "");
   }, [data, precision]);
- 
+
   //数据容错,当data都为零那么需要进行以下容错
   if (judge == 0) {
     _data.forEach((d) => {
-      d.percent = 0, d.value = 0;
+      (d.percent = 0), (d.value = 0);
     });
   }
 
@@ -826,34 +926,41 @@ const Current = ({
       width,
       height,
       transform: `translate(-${width / 2}px,-${height / 2}px)`,
-      pointerEvents: 'none',
+      pointerEvents: "none",
     },
     boxStyle = {
       //弹性盒子样式，用于当前值的上下居中对齐等
       width,
       height,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
     };
   let seriesColor = currentData.series.color;
   seriesColor =
-    seriesColor.type == 'pure'
+    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={{
-            maxWidth,
-            display:textOverflow=="marquee"?"flex":"bolck",
-            justifyContent:"center",
-            ...getFontStyle(nameFont),
-            margin: gap / 2 + 'px 0',
-            color: nameColor ? seriesColor : nameFont.color,
-          }}></TextOverflow>}
+          {showName && (
+            <TextOverflow
+              type={textOverflow}
+              value={nameTemp}
+              speed={speed}
+              style={{
+                maxWidth,
+                display: textOverflow == "marquee" ? "flex" : "bolck",
+                justifyContent: "center",
+                ...getFontStyle(nameFont),
+                margin: gap / 2 + "px 0",
+                color: nameColor ? seriesColor : nameFont.color,
+              }}
+            ></TextOverflow>
+          )}
           {
             //真实值
             showValue && (
@@ -861,12 +968,12 @@ const Current = ({
                 style={{
                   ...getFontStyle(valueFont),
                   transform:
-                    'translate(' +
+                    "translate(" +
                     translateValueX +
-                    'px,' +
+                    "px," +
                     translateValueY +
-                    'px)',
-                  margin: gap / 2 + 'px 0',
+                    "px)",
+                  margin: gap / 2 + "px 0",
                   color: valueColor ? seriesColor : valueFont.color,
                 }}
               >
@@ -874,13 +981,13 @@ const Current = ({
                 {showSuffix && text && (
                   <span
                     style={{
-                      display:"inline-block",
+                      display: "inline-block",
                       transform:
-                        'translate(' +
+                        "translate(" +
                         translateSuffixX +
-                        'px,' +
+                        "px," +
                         translateSuffixY +
-                        'px)',
+                        "px)",
                       fontSize: fontSize,
                     }}
                   >
@@ -896,17 +1003,17 @@ const Current = ({
               <span
                 style={{
                   transform:
-                    'translate(' +
+                    "translate(" +
                     translatePercentX +
-                    'px,' +
+                    "px," +
                     translatePercentY +
-                    'px)',
+                    "px)",
                   ...getFontStyle(percentFont),
-                  margin: gap / 2 + 'px 0',
+                  margin: gap / 2 + "px 0",
                   color: percentColor ? seriesColor : percentFont.color,
                 }}
               >
-                {percent + '%'}
+                {percent + "%"}
               </span>
             )
           }
@@ -934,13 +1041,9 @@ const Label = ({
         text,
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
-      }
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      precision
+      },
     },
+    percent: { show: showPercent, font: percentFont, precision },
   },
   arcs,
   judge,
@@ -950,12 +1053,12 @@ const Label = ({
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
-   //数据做出容错
+  //数据做出容错
   if (judge == 0) {
     _arcs.forEach((d) => {
-      d.percent=0
-    })
-  } 
+      d.percent = 0;
+    });
+  }
   return (
     <g>
       {_arcs.map(
@@ -1003,70 +1106,90 @@ const Label = ({
             (_showName || showPercent || showValue) && (
               <g key={index}>
                 <path
-                  className={animation ? ringCss['label-line'] : ''}
+                  className={animation ? ringCss["label-line"] : ""}
                   style={{
                     animationDelay: `${
                       animation ? (actualIndex + 1) * 2000 - 800 : 0
                     }ms`,
                   }}
                   d={
-                    'M' +
+                    "M" +
                     x1 +
-                    ', ' +
+                    ", " +
                     y1 +
-                    'L' +
+                    "L" +
                     x2 +
-                    ', ' +
+                    ", " +
                     y2 +
-                    'L' +
+                    "L" +
                     x3 +
-                    ', ' +
+                    ", " +
                     y2
                   }
                   stroke={
                     lineColor
                       ? lineColor
-                      : type == 'pure'
+                      : type == "pure"
                       ? pure
                       : stops[0].color
                   }
-                  fill='none'
+                  fill="none"
                 />
-                <foreignObject width="1" height="1" x={_x} y={y2+translateY} style={{overflow:"visible"}}>
-                  <div className={animation? ringCss['label-text']:""} style={{
-                    transform:"translate(0,-50%)",
-                    whiteSpace:"nowrap",
-                    float:x3>=0?"left":"right",
-                    width:"max-content"
-                  }}>
-                    {_showName &&<TextOverflow type={textOverflow} value={displayName+((showValue || showPercent)?":":"")} speed={speed} style={{
-                      maxWidth,
-                      ...nameStyle,
-                      float:mode=="horizontal"?"left":"none"
-                    }}></TextOverflow>}
-                    {
-                      showValue && <span style={getFontStyle(valueFont)}>
+                <foreignObject
+                  width="1"
+                  height="1"
+                  x={_x}
+                  y={y2 + translateY}
+                  style={{ overflow: "visible" }}
+                >
+                  <div
+                    className={animation ? ringCss["label-text"] : ""}
+                    style={{
+                      transform: "translate(0,-50%)",
+                      whiteSpace: "nowrap",
+                      float: x3 >= 0 ? "left" : "right",
+                      width: "max-content",
+                    }}
+                  >
+                    {_showName && (
+                      <TextOverflow
+                        type={textOverflow}
+                        value={
+                          displayName + (showValue || showPercent ? ":" : "")
+                        }
+                        speed={speed}
+                        style={{
+                          maxWidth,
+                          ...nameStyle,
+                          float: mode == "horizontal" ? "left" : "none",
+                        }}
+                      ></TextOverflow>
+                    )}
+                    {showValue && (
+                      <span style={getFontStyle(valueFont)}>
                         {data.y}
-                        {showSuffix && <span style={{
-                          position:"relative",
-                          fontSize:suffixFontSize,
-                          marginLeft:suffixTranslateX,
-                          top:suffixTranslateY
-                        }}>
-                          { text }
-                        </span>}
+                        {showSuffix && (
+                          <span
+                            style={{
+                              position: "relative",
+                              fontSize: suffixFontSize,
+                              marginLeft: suffixTranslateX,
+                              top: suffixTranslateY,
+                            }}
+                          >
+                            {text}
+                          </span>
+                        )}
                       </span>
-                    }
-                    {
-                      showPercent && <span style={getFontStyle(percentFont)}>
-                        {
-                          (_showValue ? '（' : '') +
+                    )}
+                    {showPercent && (
+                      <span style={getFontStyle(percentFont)}>
+                        {(_showValue ? "（" : "") +
                           percent +
-                          '%' +
-                          (_showValue ? '）' : '')
-                        }
+                          "%" +
+                          (_showValue ? "）" : "")}
                       </span>
-                    }
+                    )}
                   </div>
                 </foreignObject>
               </g>
@@ -1096,13 +1219,9 @@ const RingLabel = ({
         text,
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
-      }
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      precision
+      },
     },
+    percent: { show: showPercent, font: percentFont, precision },
   },
   judge,
   arcs,
@@ -1111,13 +1230,13 @@ const RingLabel = ({
     () => getDataWithPercent(arcs, precision),
     [arcs, precision]
   );
-  
- //数据做出容错
- if (judge == 0) {
-   _arcs.forEach((d) => {
-     d.percent=0
-   })
- } 
+
+  //数据做出容错
+  if (judge == 0) {
+    _arcs.forEach((d) => {
+      d.percent = 0;
+    });
+  }
 
   return (
     <g>
@@ -1166,69 +1285,89 @@ const RingLabel = ({
             (_showName || showPercent || _showValue) && (
               <g key={index}>
                 <path
-                  className={ringCss['label-line']}
+                  className={ringCss["label-line"]}
                   style={{
                     animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
                   }}
                   d={
-                    'M' +
+                    "M" +
                     x1 +
-                    ', ' +
+                    ", " +
                     y1 +
-                    'L' +
+                    "L" +
                     x2 +
-                    ', ' +
+                    ", " +
                     y2 +
-                    'L' +
+                    "L" +
                     x3 +
-                    ', ' +
+                    ", " +
                     y2
                   }
                   stroke={
                     lineColor
                       ? lineColor
-                      : type == 'pure'
+                      : type == "pure"
                       ? pure
                       : stops[0].color
                   }
-                  fill='none'
+                  fill="none"
                 />
-                <foreignObject width="1" height="1" x={_x} y={y2+translateY} style={{overflow:"visible"}}>
-                  <div className={ringCss['label-text']} style={{
-                    transform:"translate(0,-50%)",
-                    whiteSpace:"nowrap",
-                    float:x3>=0?"left":"right",
-                    width:"max-content",
-                    animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
-                  }}>
-                    {_showName &&<TextOverflow type={textOverflow} value={displayName+((showValue || showPercent)?":":"")} speed={speed} style={{
-                      maxWidth,
-                      ...getFontStyle(nameFont),
-                      float:mode=="horizontal"?"left":"none"
-                    }}></TextOverflow>}
-                    {
-                      showValue && <span style={getFontStyle(valueFont)}>
+                <foreignObject
+                  width="1"
+                  height="1"
+                  x={_x}
+                  y={y2 + translateY}
+                  style={{ overflow: "visible" }}
+                >
+                  <div
+                    className={ringCss["label-text"]}
+                    style={{
+                      transform: "translate(0,-50%)",
+                      whiteSpace: "nowrap",
+                      float: x3 >= 0 ? "left" : "right",
+                      width: "max-content",
+                      animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                    }}
+                  >
+                    {_showName && (
+                      <TextOverflow
+                        type={textOverflow}
+                        value={
+                          displayName + (showValue || showPercent ? ":" : "")
+                        }
+                        speed={speed}
+                        style={{
+                          maxWidth,
+                          ...getFontStyle(nameFont),
+                          float: mode == "horizontal" ? "left" : "none",
+                        }}
+                      ></TextOverflow>
+                    )}
+                    {showValue && (
+                      <span style={getFontStyle(valueFont)}>
                         {realData.y}
-                        {showSuffix && <span style={{
-                          position:"relative",
-                          fontSize:suffixFontSize,
-                          marginLeft:suffixTranslateX,
-                          top:suffixTranslateY
-                        }}>
-                          { text }
-                        </span>}
+                        {showSuffix && (
+                          <span
+                            style={{
+                              position: "relative",
+                              fontSize: suffixFontSize,
+                              marginLeft: suffixTranslateX,
+                              top: suffixTranslateY,
+                            }}
+                          >
+                            {text}
+                          </span>
+                        )}
                       </span>
-                    }
-                    {
-                      showPercent && <span style={getFontStyle(percentFont)}>
-                        {
-                          (_showValue ? '（' : '') +
+                    )}
+                    {showPercent && (
+                      <span style={getFontStyle(percentFont)}>
+                        {(_showValue ? "（" : "") +
                           percent +
-                          '%' +
-                          (_showValue ? '）' : '')
-                        }
+                          "%" +
+                          (_showValue ? "）" : "")}
                       </span>
-                    }
+                    )}
                   </div>
                 </foreignObject>
               </g>