Merge pull request #759 from thundersdata-frontend/feat/3dpie

feat: 3d饼图支持中心标题
thundersdata-frontend · Nov 9, 2023 · 7731f56 · 7731f56
2 parents 4aa917c + 66f777c
commit 7731f56
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 14 deletions.
diff --git a/.changeset/plenty-days-smoke.md 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
@@ -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;
+    }
+  }
+}
diff --git 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
@@ -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 }}