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 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 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; @@ -32,6 +33,8 @@ export interface ThreeDimensionalPieProps { onEvents?: Record void>; coefficient?: number; pieColors?: string[]; + showTitle?: boolean; + titleStyle?: CSSProperties; } /** 3D立体饼图-对应Figma饼图2 */ @@ -49,6 +52,8 @@ export default forwardRef( pieColors = [], onEvents, coefficient = 1, + showTitle = false, + titleStyle, }, ref ) => { @@ -191,7 +196,7 @@ export default forwardRef( } }); // 如果触发 mouseover 的扇形当前已高亮,则不做操作 - if (hoveredIndex === seriesIndex) { + if (autoLoop || hoveredIndex === seriesIndex) { return; } else { if (hoveredIndex !== '') { @@ -207,6 +212,7 @@ export default forwardRef( }); } hoveredIndex = hoveredIndex !== '' ? '' : seriesIndex; + setHoveredIndex(hoveredIndex); myChart.setOption(option); } }); @@ -224,7 +230,15 @@ export default forwardRef( }, [echartsRef, seriesData, option, isFlat, generateData, getInstance]); return ( -
+
+ {showTitle && hoveredIndex ? ( +
+
+ {((seriesData?.[hoveredIndex]?.value / total) * 100).toFixed(2) + '%'} +
+
{seriesData?.[hoveredIndex]?.name}
+
+ ) : null}