From 66f777c42028549437cbb35308135daea8fb258c Mon Sep 17 00:00:00 2001
From: hss <2274246770@qq.com>
Date: Thu, 9 Nov 2023 17:48:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=203d=E9=A5=BC=E5=9B=BE=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/plenty-days-smoke.md               |  5 ++++
 .../lego/src/three-dimensional-pie/index.less | 28 +++++++++++++++++++
 .../lego/src/three-dimensional-pie/index.md   | 26 +++++++++--------
 .../lego/src/three-dimensional-pie/index.tsx  | 18 ++++++++++--
 4 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/plenty-days-smoke.md
 create mode 100644 packages/lego/src/three-dimensional-pie/index.less

diff --git a/.changeset/plenty-days-smoke.md b/.changeset/plenty-days-smoke.md
new file mode 100644
index 0000000000..59dac4f08b
--- /dev/null
+++ b/.changeset/plenty-days-smoke.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+3d饼图支持中心标题
diff --git a/packages/lego/src/three-dimensional-pie/index.less b/packages/lego/src/three-dimensional-pie/index.less
new file mode 100644
index 0000000000..02148c9859
--- /dev/null
+++ b/packages/lego/src/three-dimensional-pie/index.less
@@ -0,0 +1,28 @@
+.td-lego-3d-pie {
+  position: relative;
+
+  .td-lego-3d-pie-text-wrap {
+    position: absolute;
+    color: #fff;
+    left: 39%;
+    top: 40%;
+    z-index: 999;
+
+    .td-lego-3d-pie-title {
+      text-align: center;
+      font-family: Roboto;
+      font-size: 38px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 38px;
+    }
+
+    .td-lego-3d-pie-text {
+      font-family: Alibaba PuHuiTi;
+      text-align: center;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/lego/src/three-dimensional-pie/index.md b/packages/lego/src/three-dimensional-pie/index.md
index 0006eeab71..c121c63864 100644
--- a/packages/lego/src/three-dimensional-pie/index.md
+++ b/packages/lego/src/three-dimensional-pie/index.md
@@ -11,18 +11,20 @@ group:
 
 ## API
 
-| 属性        | 必填    | 说明            | 类型                                     | 默认值 |
-| ----------- | ------- | --------------- | ---------------------------------------- | ------ |
-| seriesData  | `true`  | 图表数据        | `{ name: string; value: string }[]`      |        |
-| style       | `false` | 自定义样式      | `CSSProperties`                          |        |
-| barConfig   | `false` | 3D 饼图纵向配置 | `ECOption`                               |        |
-| pieConfig   | `false` | 3D 饼图配置     | `ECOption`                               |        |
-| autoLoop    | `false` | 是否自动切换    | `boolean`                                |        |
-| isFlat      | `false` | 是否扁平        | `boolean`                                | `true` |
-| loopSpeed   | `false` | 切换速度        | `number`                                 | `2000` |
-| coefficient | `false` | 高度系数        | `number`                                 | `1`    |
-| pieColors   | `false` | 自定义颜色      | `string[]`                               |        |
-| onEvents    | `false` | 自定义事件      | `Record<string, (params?: any) => void>` |        |
+| 属性        | 必填    | 说明             | 类型                                     | 默认值  |
+| ----------- | ------- | ---------------- | ---------------------------------------- | ------- |
+| seriesData  | `true`  | 图表数据         | `{ name: string; value: string }[]`      |         |
+| style       | `false` | 自定义样式       | `CSSProperties`                          |         |
+| barConfig   | `false` | 3D 饼图纵向配置  | `ECOption`                               |         |
+| pieConfig   | `false` | 3D 饼图配置      | `ECOption`                               |         |
+| autoLoop    | `false` | 是否自动切换     | `boolean`                                |         |
+| isFlat      | `false` | 是否扁平         | `boolean`                                | `true`  |
+| loopSpeed   | `false` | 切换速度         | `number`                                 | `2000`  |
+| coefficient | `false` | 高度系数         | `number`                                 | `1`     |
+| pieColors   | `false` | 自定义颜色       | `string[]`                               |         |
+| showTitle   | `false` | 是否显示中心标题 | `boolean`                                | `false` |
+| titleStyle  | `false` | 中心标题的样式   | `CSSProperties`                          |         |
+| onEvents    | `false` | 自定义事件       | `Record<string, (params?: any) => void>` |         |
 
 ## 基本效果
 
diff --git a/packages/lego/src/three-dimensional-pie/index.tsx b/packages/lego/src/three-dimensional-pie/index.tsx
index e51a70096d..2b8aa6a26a 100644
--- a/packages/lego/src/three-dimensional-pie/index.tsx
+++ b/packages/lego/src/three-dimensional-pie/index.tsx
@@ -13,6 +13,7 @@ import useEchartsRef from '../hooks/useEchartsRef';
 import { useRAF } from '../hooks/useRAF';
 import useStyle from '../hooks/useStyle';
 import useTheme from '../hooks/useTheme';
+import './index.less';
 
 type ECOption = echarts.ComposeOption<PieSeriesOption | TooltipComponentOption | GraphicComponentOption>;
 
@@ -32,6 +33,8 @@ export interface ThreeDimensionalPieProps {
   onEvents?: Record<string, (params?: any) => void>;
   coefficient?: number;
   pieColors?: string[];
+  showTitle?: boolean;
+  titleStyle?: CSSProperties;
 }
 
 /** 3D立体饼图-对应Figma饼图2 */
@@ -49,6 +52,8 @@ export default forwardRef<ReactEcharts, ThreeDimensionalPieProps>(
       pieColors = [],
       onEvents,
       coefficient = 1,
+      showTitle = false,
+      titleStyle,
     },
     ref
   ) => {
@@ -191,7 +196,7 @@ export default forwardRef<ReactEcharts, ThreeDimensionalPieProps>(
               }
             });
           // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-          if (hoveredIndex === seriesIndex) {
+          if (autoLoop || hoveredIndex === seriesIndex) {
             return;
           } else {
             if (hoveredIndex !== '') {
@@ -207,6 +212,7 @@ export default forwardRef<ReactEcharts, ThreeDimensionalPieProps>(
               });
             }
             hoveredIndex = hoveredIndex !== '' ? '' : seriesIndex;
+            setHoveredIndex(hoveredIndex);
             myChart.setOption(option);
           }
         });
@@ -224,7 +230,15 @@ export default forwardRef<ReactEcharts, ThreeDimensionalPieProps>(
     }, [echartsRef, seriesData, option, isFlat, generateData, getInstance]);
 
     return (
-      <div style={modifiedStyle}>
+      <div className="td-lego-3d-pie" style={modifiedStyle}>
+        {showTitle && hoveredIndex ? (
+          <div className="td-lego-3d-pie-text-wrap" style={titleStyle}>
+            <div className="td-lego-3d-pie-title">
+              {((seriesData?.[hoveredIndex]?.value / total) * 100).toFixed(2) + '%'}
+            </div>
+            <div className="td-lego-3d-pie-text">{seriesData?.[hoveredIndex]?.name}</div>
+          </div>
+        ) : null}
         <ReactEcharts
           ref={echartsRef}
           style={{ width: modifiedStyle.width, height: modifiedStyle.height }}