diff --git a/__tests__/unit/plots/pie/index-spec.ts b/__tests__/unit/plots/pie/index-spec.ts index cf1f99d60c..7074c1d7f0 100644 --- a/__tests__/unit/plots/pie/index-spec.ts +++ b/__tests__/unit/plots/pie/index-spec.ts @@ -6,25 +6,6 @@ describe('pie', () => { const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) => idx === 1 ? { ...d, type: 'item1' } : d ); - it('angleField: single color', () => { - const pie = new Pie(createDiv(), { - width: 400, - height: 300, - data, - angleField: 'value', - radius: 0.8, - }); - - pie.render(); - - const geometry = pie.chart.geometries[0]; - const elements = geometry.elements; - - expect(elements.length).toBe(data.length); - expect(elements[0].getModel().color).toBe(elements[1].getModel().color); - - pie.destroy(); - }); it('angleField with colorField: multiple colors', () => { const pie = new Pie(createDiv(), { diff --git a/__tests__/unit/plots/pie/label-spec.ts b/__tests__/unit/plots/pie/label-spec.ts index de73e06094..18dc702952 100644 --- a/__tests__/unit/plots/pie/label-spec.ts +++ b/__tests__/unit/plots/pie/label-spec.ts @@ -1,5 +1,5 @@ import { IGroup } from '@antv/g-base'; -import { getGeometryLabel } from '@antv/g2'; +import { flatten } from '@antv/util'; import { Pie } from '../../../../src'; import { POSITIVE_NEGATIVE_DATA } from '../../../data/common'; import { createDiv } from '../../../utils/dom'; @@ -19,40 +19,20 @@ describe('pie label', () => { label: {}, }; - it('label: visible', () => { - const pie = new Pie(createDiv(), config); - - pie.render(); + const pie = new Pie(createDiv(), config); + pie.render(); + it('label: visible', () => { const geometry = pie.chart.geometries[0]; const elements = geometry.elements; const labelGroups = geometry.labelsContainer.getChildren(); expect(elements.length).toBe(data.length); expect(labelGroups.length).toBe(data.length); - - pie.destroy(); - }); - - it.skip('label: single color(todo-hustcc: 没有 color 字段，label 显示错误)', () => { - const pie = new Pie(createDiv(), { - ...config, - colorField: null, - }); - - pie.render(); - - const geometry = pie.chart.geometries[0]; - const labelGroups = geometry.labelsContainer.getChildren(); - - expect(labelGroups.length).toBe(data.length); - - pie.destroy(); }); it('label: custom content & support percent', () => { - const pie = new Pie(createDiv(), { - ...config, + pie.update({ data: [ { type: 'item1', value: 1 }, { type: 'item2', value: 2 }, @@ -69,8 +49,6 @@ describe('pie label', () => { }, }); - pie.render(); - const geometry = pie.chart.geometries[0]; const labelGroups = geometry.labelsContainer.getChildren(); expect(labelGroups.length).toBe(3); @@ -80,13 +58,11 @@ describe('pie label', () => { expect(label1[0].attr('text')).toBe('hello'); const label2 = (labelGroups[1] as IGroup).getChildren(); expect(label2[0].attr('text')).toBe('item2: 2(40%)'); - - pie.destroy(); }); it('label: custom callback', () => { - const pie = new Pie(createDiv(), { - ...config, + pie.update({ + data, label: { callback: (value, type) => { return { @@ -95,9 +71,6 @@ describe('pie label', () => { }, }, }); - - pie.render(); - const geometry = pie.chart.geometries[0]; const labelGroups = geometry.labelsContainer.getChildren(); @@ -106,7 +79,29 @@ describe('pie label', () => { const label3 = (labelGroups[2] as IGroup).getChildren(); expect(label1[0].attr('text')).toBe(`${data[0].type}: ${data[0].value}`); expect(label3[0].attr('text')).toBe(`${data[2].type}: ${data[2].value}`); + }); + + it('label: offset adaptor', () => { + pie.update({ label: { type: 'inner', offset: -10 } }); + let geometry = pie.chart.geometries[0]; + // @ts-ignore + let labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray)); + expect(parseFloat(labelItems[0].offset)).toBeLessThan(0); + + pie.update({ label: { type: 'outer' } }); + geometry = pie.chart.geometries[0]; + // @ts-ignore + labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray)); + expect(parseFloat(labelItems[0].offset)).not.toBeLessThan(0); + + pie.update({ label: { type: 'inner' } }); + geometry = pie.chart.geometries[0]; + // @ts-ignorelabelGroups + labelItems = geometry.geometryLabel.getLabelItems(flatten(geometry.dataArray)); + expect(parseFloat(labelItems[0].offset)).toBe(-10); + }); + afterAll(() => { pie.destroy(); }); }); @@ -144,9 +139,3 @@ describe('support template string formatter', () => { pie.destroy(); }); - -describe('inner label', () => { - it('自定义注册饼图 inner label', () => { - expect(getGeometryLabel('pie-inner')).toBeDefined(); - }); -}); diff --git a/__tests__/unit/plots/pie/utils-spec.ts b/__tests__/unit/plots/pie/utils-spec.ts index 43bedea986..ab16122bc3 100644 --- a/__tests__/unit/plots/pie/utils-spec.ts +++ b/__tests__/unit/plots/pie/utils-spec.ts @@ -1,4 +1,4 @@ -import { getTotalValue, parsePercentageToNumber } from '../../../../src/plots/pie/utils'; +import { adaptOffset, getTotalValue } from '../../../../src/plots/pie/utils'; describe('utils of pie plot', () => { const data = [ @@ -48,13 +48,14 @@ describe('utils of pie plot', () => { ).toBe(null); }); - it('将 字符串百分比 转换为 数值型百分比', () => { - // @ts-ignore 不合法的入参 - expect(parsePercentageToNumber(null)).toBe(null); - // @ts-ignore 不合法的入参 - expect(parsePercentageToNumber(100)).toBe(100); - expect(parsePercentageToNumber('0.35')).toBe(0.35); - expect(parsePercentageToNumber('34%')).toBe(0.34); - expect(parsePercentageToNumber('0%')).toBe(0); + it('offset adaptor', () => { + expect(adaptOffset('inner', '-30%')).toBe('-30%'); + expect(parseFloat(adaptOffset('inner', '30%') as string)).toBeLessThan(0); + expect(adaptOffset('inner', NaN)).not.toBe(NaN); + expect(parseFloat(adaptOffset('inner', NaN) as string)).toBeLessThan(0); + expect(adaptOffset('outer', '-30%')).not.toBe('-30%'); + expect(parseFloat(adaptOffset('outer', '-30%') as string)).not.toBeLessThan(0); + expect(adaptOffset('spider', '30%')).toBe('30%'); + expect(adaptOffset('spider', NaN)).toBe(NaN); }); }); diff --git a/docs/common/component-no-axis.en.md b/docs/common/component-no-axis.en.md index 2eb946bbf7..f8848d99d2 100644 --- a/docs/common/component-no-axis.en.md +++ b/docs/common/component-no-axis.en.md @@ -15,15 +15,3 @@ Configure label style. #### annotations `markdown:docs/common/annotations.en.md` - -#### theme - -`markdown:docs/common/theme.en.md` - -### Event - -`markdown:docs/common/events.en.md` - -### Plot Method - -`markdown:docs/common/chart-methods.en.md` diff --git a/docs/common/component-no-axis.zh.md b/docs/common/component-no-axis.zh.md index 78bc92aa02..da2485be9f 100644 --- a/docs/common/component-no-axis.zh.md +++ b/docs/common/component-no-axis.zh.md @@ -2,28 +2,15 @@ `markdown:docs/common/tooltip.zh.md` -#### label - -标签文本 +#### 标签文本 `markdown:docs/common/label.zh.md` -#### legend +#### 图例 `markdown:docs/common/legend.zh.md` -#### annotations +#### 图表标注 `markdown:docs/common/annotations.zh.md` -#### theme - -`markdown:docs/common/theme.zh.md` - -### 事件 - -`markdown:docs/common/events.zh.md` - -### 图表方法 - -`markdown:docs/common/chart-methods.zh.md` diff --git a/docs/common/component-polygon.zh.md b/docs/common/component-polygon.zh.md index b59595a633..8b88ac1597 100644 --- a/docs/common/component-polygon.zh.md +++ b/docs/common/component-polygon.zh.md @@ -2,7 +2,7 @@ `markdown:docs/common/tooltip.zh.md` -#### annotations +#### 图表标注 `markdown:docs/common/annotations.zh.md` diff --git a/docs/common/component-progress.zh.md b/docs/common/component-progress.zh.md index b59595a633..8b88ac1597 100644 --- a/docs/common/component-progress.zh.md +++ b/docs/common/component-progress.zh.md @@ -2,7 +2,7 @@ `markdown:docs/common/tooltip.zh.md` -#### annotations +#### 图表标注 `markdown:docs/common/annotations.zh.md` diff --git a/docs/common/component-tiny.zh.md b/docs/common/component-tiny.zh.md index ebf1107763..d71a2813cd 100644 --- a/docs/common/component-tiny.zh.md +++ b/docs/common/component-tiny.zh.md @@ -8,7 +8,7 @@ xAxis、yAxis 配置相同。 `markdown:docs/common/axis.zh.md` -#### annotations +#### 图表标注 `markdown:docs/common/annotations.zh.md` diff --git a/docs/common/component.zh.md b/docs/common/component.zh.md index 08143b0a22..d57a610b9a 100644 --- a/docs/common/component.zh.md +++ b/docs/common/component.zh.md @@ -12,10 +12,10 @@ xAxis、yAxis 配置相同（由于 DualAxes 是双轴， yAxis 类型是数组 `markdown:docs/common/axis.zh.md` -#### legend +#### 图例 `markdown:docs/common/legend.zh.md` -#### annotations +#### 图表标注 `markdown:docs/common/annotations.zh.md` diff --git a/docs/common/label.en.md b/docs/common/label.en.md index eeeff06565..5161c3b623 100644 --- a/docs/common/label.en.md +++ b/docs/common/label.en.md @@ -2,7 +2,7 @@ | 属性名 | 类型 | 介绍 | | ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染 | +| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| | offset | number | label 的偏移量 | | offsetX | number | label 相对于数据点在 X 方向的偏移距离 | | offsetY | number | label 相对于数据点在 Y 方向的偏移距离 | diff --git a/docs/common/label.zh.md b/docs/common/label.zh.md index eeeff06565..5161c3b623 100644 --- a/docs/common/label.zh.md +++ b/docs/common/label.zh.md @@ -2,7 +2,7 @@ | 属性名 | 类型 | 介绍 | | ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染 | +| type | string | 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner|outer|spider`）| | offset | number | label 的偏移量 | | offsetX | number | label 相对于数据点在 X 方向的偏移距离 | | offsetY | number | label 相对于数据点在 Y 方向的偏移距离 | diff --git a/docs/common/legend.en.md b/docs/common/legend.en.md index 7b23bc2f37..1c2829bfcd 100644 --- a/docs/common/legend.en.md +++ b/docs/common/legend.en.md @@ -32,10 +32,10 @@ legend: { 背景框配置项。_LegendBackgroundCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------- | ------------------- | -------- | ------ | -------------- | -| padding | number \| number[] | | - | 背景的留白 | -| style | object 参考绘图属性 | | - | 背景样式配置项 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------- | ------------------- | ------ | -------------- | +| padding | number \| number[] | - | 背景的留白 | +| style | object 参考绘图属性 | - | 背景样式配置项 | ##### flipPage diff --git a/docs/common/legend.zh.md b/docs/common/legend.zh.md index d90c3ab0a4..16507c57b8 100644 --- a/docs/common/legend.zh.md +++ b/docs/common/legend.zh.md @@ -32,10 +32,10 @@ legend: { 背景框配置项。_LegendBackgroundCfg_ 配置如下： -| 参数名 | 类型 | 是否必选 | 默认值 | 描述 | -| ------- | ------------------- | -------- | ------ | -------------- | -| padding | number \| number[] | | - | 背景的留白 | -| style | object 参考绘图属性 | | - | 背景样式配置项 | +| 参数名 | 类型 | 默认值 | 描述 | +| ------- | ------------------- | ------ | -------------- | +| padding | number \| number[] | - | 背景的留白 | +| style | object 参考绘图属性 | - | 背景样式配置项 | ##### flipPage diff --git a/docs/manual/plots/liquid.en.md b/docs/manual/plots/liquid.en.md index 7568ad515f..b275e4fe1d 100644 --- a/docs/manual/plots/liquid.en.md +++ b/docs/manual/plots/liquid.en.md @@ -44,3 +44,15 @@ order: 12 ### Plot Components `markdown:docs/common/component-no-axis.en.md` + +### Event + +`markdown:docs/common/events.en.md` + +### Plot Method + +`markdown:docs/common/chart-methods.en.md` + +### theme + +`markdown:docs/common/theme.en.md` diff --git a/docs/manual/plots/liquid.zh.md b/docs/manual/plots/liquid.zh.md index 84d8c4cfdc..a59041410c 100644 --- a/docs/manual/plots/liquid.zh.md +++ b/docs/manual/plots/liquid.zh.md @@ -44,3 +44,15 @@ order: 12 ### 图表组件 `markdown:docs/common/component-no-axis.zh.md` + +### 事件 + +`markdown:docs/common/events.zh.md` + +### 图表方法 + +`markdown:docs/common/chart-methods.zh.md` + +#### 图表主题 + +`markdown:docs/common/theme.zh.md` \ No newline at end of file diff --git a/docs/manual/plots/pie.en.md b/docs/manual/plots/pie.en.md index 2e089771a1..6f0aa0d4b4 100644 --- a/docs/manual/plots/pie.en.md +++ b/docs/manual/plots/pie.en.md @@ -55,7 +55,7 @@ piePlot.render(); #### colorField -**optional** _string_ +**required** _string_ 扇形颜色映射对应的数据字段名。 @@ -65,7 +65,7 @@ piePlot.render(); **optional** _number_ -饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。 +饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。 `markdown:docs/common/color.en.md` @@ -79,8 +79,18 @@ piePlot.render(); ### Plot Components -加载失败 - -### Plot Components +加载失败 `markdown:docs/common/component-no-axis.en.md` + +### Event + +`markdown:docs/common/events.en.md` + +### Plot Method + +`markdown:docs/common/chart-methods.en.md` + +### theme + +`markdown:docs/common/theme.en.md` \ No newline at end of file diff --git a/docs/manual/plots/pie.zh.md b/docs/manual/plots/pie.zh.md index 431162ff64..e06714d746 100644 --- a/docs/manual/plots/pie.zh.md +++ b/docs/manual/plots/pie.zh.md @@ -55,7 +55,7 @@ piePlot.render(); #### colorField -**optional** _string_ +**required** _string_ 扇形颜色映射对应的数据字段名。 @@ -65,7 +65,7 @@ piePlot.render(); **optional** _number_ -饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。 +饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。 `markdown:docs/common/color.zh.md` @@ -79,8 +79,18 @@ piePlot.render(); ### 图表组件 -加载失败 - -### 图表组件 +加载失败 `markdown:docs/common/component-no-axis.zh.md` + +### 事件 + +`markdown:docs/common/events.zh.md` + +### 图表方法 + +`markdown:docs/common/chart-methods.zh.md` + +### 图表主题 + +`markdown:docs/common/theme.zh.md` \ No newline at end of file diff --git a/docs/manual/plots/rose.en.md b/docs/manual/plots/rose.en.md index e87822a9f0..d0991f0f37 100644 --- a/docs/manual/plots/rose.en.md +++ b/docs/manual/plots/rose.en.md @@ -91,7 +91,7 @@ piePlot.render(); **optional** _number_ -玫瑰图的半径，原点为画布中心。配置值域为 [0,1]，0 代表玫瑰图大小为 0，即不显示，1 代表玫瑰图撑满绘图区域。 +玫瑰图的半径，原点为画布中心。配置值域为 (0,1]，1 代表玫瑰图撑满绘图区域。 #### innerRadius diff --git a/docs/manual/plots/rose.zh.md b/docs/manual/plots/rose.zh.md index 98c6d37a84..e93525d701 100644 --- a/docs/manual/plots/rose.zh.md +++ b/docs/manual/plots/rose.zh.md @@ -91,7 +91,7 @@ piePlot.render(); **optional** _number_ -玫瑰图的半径，原点为画布中心。配置值域为 [0,1]，0 代表玫瑰图大小为 0，即不显示，1 代表玫瑰图撑满绘图区域。 +玫瑰图的半径，原点为画布中心。配置值域为 (0,1]，1 代表玫瑰图撑满绘图区域。 #### innerRadius diff --git a/examples/pie/basic/demo/basic.ts b/examples/pie/basic/demo/basic.ts index 4270a7e6ad..eb9d07b295 100644 --- a/examples/pie/basic/demo/basic.ts +++ b/examples/pie/basic/demo/basic.ts @@ -14,12 +14,11 @@ const piePlot = new Pie('container', { data, angleField: 'value', colorField: 'type', - radius: 0.8, + radius: 0.9, label: { type: 'inner', - // @ts-ignore 偏移 50% TODO 后续支持直接配置 -50% - offset: '-0.5', - content: '{name} {percentage}', + offset: '-30%', + content: '{percentage}', style: { fill: '#fff', fontSize: 14, diff --git a/examples/pie/basic/demo/pie-state.ts b/examples/pie/basic/demo/pie-state.ts index 388c483d85..3479e9d5df 100644 --- a/examples/pie/basic/demo/pie-state.ts +++ b/examples/pie/basic/demo/pie-state.ts @@ -17,11 +17,9 @@ const piePlot = new Pie('container', { radius: 0.8, label: { type: 'inner', - // @ts-ignore 偏移 50% TODO 后续支持直接配置 -50% - offset: '-0.5', - content: '{name} {percentage}', + offset: '-30%', + content: '{name}', style: { - fill: '#fff', fontSize: 14, textAlign: 'center', }, diff --git a/examples/pie/basic/demo/pie-texture.ts b/examples/pie/basic/demo/pie-texture.ts index bd9d0bb88a..9b16fc3ba7 100644 --- a/examples/pie/basic/demo/pie-texture.ts +++ b/examples/pie/basic/demo/pie-texture.ts @@ -14,8 +14,7 @@ const piePlot = new Pie('container', { legend: false, label: { type: 'inner', - // @ts-ignore 偏移 50% TODO 后续支持直接配置 -50% - offset: '-0.5', + offset: '-50%', style: { fill: '#fff', fontSize: 18, diff --git a/examples/pie/basic/demo/spider-label.ts b/examples/pie/basic/demo/spider-label.ts index 1552e31f3c..2eb4e64e8e 100644 --- a/examples/pie/basic/demo/spider-label.ts +++ b/examples/pie/basic/demo/spider-label.ts @@ -17,6 +17,7 @@ const piePlot = new Pie('container', { radius: 0.8, label: { type: 'spider', + labelHeight: 28, content: '{name}\n{percentage}', }, interactions: [{ type: 'element-selected' }, { type: 'element-active' }], diff --git a/examples/pie/donut/demo/basic.ts b/examples/pie/donut/demo/basic.ts index 5f6dfdbfd1..140ca9e82e 100644 --- a/examples/pie/donut/demo/basic.ts +++ b/examples/pie/donut/demo/basic.ts @@ -18,8 +18,7 @@ const piePlot = new Pie('container', { innerRadius: 0.6, label: { type: 'inner', - // @ts-ignore 偏移 50% TODO 后续支持直接配置 -50% - offset: '-0.5', + offset: '-50%', content: '{percentage}', style: { fill: '#fff', diff --git a/examples/radial-bar/basic/API.en.md b/examples/radial-bar/basic/API.en.md index 0abc22d0e9..94e6b0d35b 100644 --- a/examples/radial-bar/basic/API.en.md +++ b/examples/radial-bar/basic/API.en.md @@ -65,6 +65,18 @@ `markdown:docs/common/shape-style.en.md` -### 图表组件 +### Plot Components `markdown:docs/common/component-no-axis.en.md` + +### Event + +`markdown:docs/common/events.en.md` + +### Plot Method + +`markdown:docs/common/chart-methods.en.md` + +### theme + +`markdown:docs/common/theme.en.md` \ No newline at end of file diff --git a/examples/radial-bar/basic/API.zh.md b/examples/radial-bar/basic/API.zh.md index cc63d3cb3a..1097f5c126 100644 --- a/examples/radial-bar/basic/API.zh.md +++ b/examples/radial-bar/basic/API.zh.md @@ -68,3 +68,15 @@ ### 图表组件 `markdown:docs/common/component-no-axis.zh.md` + +### 事件 + +`markdown:docs/common/events.zh.md` + +### 图表方法 + +`markdown:docs/common/chart-methods.zh.md` + +### 图表主题 + +`markdown:docs/common/theme.zh.md` \ No newline at end of file diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index ebd80e597c..8e87ddb79b 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -6,7 +6,7 @@ import { Data } from '../../types'; import { flow, LEVEL, log, template, transformLabel, deepAssign } from '../../utils'; import { interval } from '../../adaptor/geometries'; import { PieOptions } from './types'; -import { getTotalValue } from './utils'; +import { adaptOffset, getTotalValue } from './utils'; /** * 字段 @@ -143,27 +143,23 @@ function label(params: Params): Params { }; } - // ② 转换 label type 和 layout type - const LABEL_TYPE_MAP = { - inner: 'pie-inner', - outer: 'pie', - spider: 'pie', - }; const LABEL_LAYOUT_TYPE_MAP = { inner: '', outer: 'pie-outer', spider: 'pie-spider', }; - const labelType = LABEL_TYPE_MAP[labelCfg.type] || 'pie'; const labelLayoutType = LABEL_LAYOUT_TYPE_MAP[labelCfg.type] || 'pie-outer'; - labelCfg.type = labelType; labelCfg.layout = deepAssign({}, labelCfg.layout, { type: labelLayoutType }); geometry.label({ // fix: could not create scale, when field is undefined（attributes 中的 fields 定义都会被用来创建 scale） fields: colorField ? [angleField, colorField] : [angleField], callback, - cfg: labelCfg, + cfg: { + ...labelCfg, + offset: adaptOffset(labelCfg.type, labelCfg.offset), + type: 'pie', + }, }); } return params; diff --git a/src/plots/pie/index.ts b/src/plots/pie/index.ts index dc7377f17c..474581f066 100644 --- a/src/plots/pie/index.ts +++ b/src/plots/pie/index.ts @@ -4,7 +4,6 @@ import { Adaptor } from '../../core/adaptor'; import { PieOptions } from './types'; import { adaptor } from './adaptor'; import './interactions'; -import './label'; export { PieOptions }; diff --git a/src/plots/pie/label/index.ts b/src/plots/pie/label/index.ts deleted file mode 100644 index 5f7af00170..0000000000 --- a/src/plots/pie/label/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { registerGeometryLabel } from '@antv/g2'; -import { PieInnerLabel } from './inner-label'; - -registerGeometryLabel('pie-inner', PieInnerLabel); diff --git a/src/plots/pie/label/inner-label.ts b/src/plots/pie/label/inner-label.ts deleted file mode 100644 index d674d0a528..0000000000 --- a/src/plots/pie/label/inner-label.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { getGeometryLabel } from '@antv/g2'; -import { isNil, isString } from '@antv/util'; -import { deepAssign } from '../../../utils'; -import { parsePercentageToNumber } from '../utils'; - -const PieLabel = getGeometryLabel('pie'); - -export class PieInnerLabel extends PieLabel { - public defaultLayout = 'pie-inner'; - - /** - * 获取 label 的默认配置 - * - 饼图 inner-label 强制不显示 label 牵引线 - */ - protected getDefaultLabelCfg() { - const cfg = super.getDefaultLabelCfg(); - return deepAssign({}, cfg, { labelLine: false }); - } - - /** - * 获取标签 offset距离（默认 -30% ） - * todo G2 offset 允许百分比设置后，移除 ts-ignore - */ - // @ts-ignore - protected getDefaultOffset(offset: number | string) { - const coordinate = this.getCoordinate(); - const radius = coordinate.getRadius(); - let innerRadius = 0; - let actualOffset = offset; - - if (isString(actualOffset)) { - // 存在 innerRadius - if (coordinate.innerRadius) { - innerRadius = radius * (coordinate.innerRadius / coordinate.radius); - actualOffset = (radius - innerRadius) * (parsePercentageToNumber(actualOffset) + (coordinate.radius - 1)); - } else { - actualOffset = radius * parsePercentageToNumber(actualOffset); - } - } - - return isNil(actualOffset) || actualOffset > 0 ? -(radius - innerRadius) * 0.3 : actualOffset; - } -} diff --git a/src/plots/pie/types.ts b/src/plots/pie/types.ts index 0056fba6ea..5e2247a634 100644 --- a/src/plots/pie/types.ts +++ b/src/plots/pie/types.ts @@ -1,19 +1,24 @@ import { Options, Statistic, StyleAttr } from '../../types'; +import { Label } from '../../types/label'; export type StatisticData = { title: string; value: string | number | null; }; +export type PieLabelType = 'inner' | 'outer' | 'spider'; + export interface PieOptions extends Options { /** 角度映射字段 */ readonly angleField: string; /** 颜色映射字段 */ - readonly colorField?: string; + readonly colorField: string; /** 饼图半径 */ readonly radius?: number; /** 饼图内半径 */ readonly innerRadius?: number; + /** 饼图标签 */ + readonly label?: Label; /** 饼图图形样式 */ readonly pieStyle?: StyleAttr; /** diff --git a/src/plots/pie/utils.ts b/src/plots/pie/utils.ts index 947c7aea2f..bff2c5852c 100644 --- a/src/plots/pie/utils.ts +++ b/src/plots/pie/utils.ts @@ -1,6 +1,6 @@ import { Data } from '@antv/g2/lib/interface'; import { each, isString } from '@antv/util'; -import { LEVEL, log } from '../../utils'; +import { PieLabelType } from './types'; /** * 获取总计值 @@ -18,17 +18,24 @@ export function getTotalValue(data: Data, field: string) { } /** - * 将 字符串的百分比 转换为 数值百分比 + * pie label offset adaptor */ -export function parsePercentageToNumber(percentage: string): number { - log(LEVEL.WARN, !isString(percentage), 'invalid string'); - - if (!isString(percentage)) { - return percentage as any; - } - - if (percentage.endsWith('%')) { - return Number(percentage.slice(0, -1)) * 0.01; +export function adaptOffset(type: PieLabelType, offset?: string | number): string | number { + let defaultOffset; + switch (type) { + case 'inner': + defaultOffset = '-30%'; + if (isString(offset) && offset.endsWith('%')) { + return parseFloat(offset) * 0.01 > 0 ? defaultOffset : offset; + } + return offset < 0 ? offset : defaultOffset; + case 'outer': + defaultOffset = 12; + if (isString(offset) && offset.endsWith('%')) { + return parseFloat(offset) * 0.01 < 0 ? defaultOffset : offset; + } + return offset > 0 ? offset : defaultOffset; + default: + return offset; } - return Number(percentage); } diff --git a/src/plots/rose/types.ts b/src/plots/rose/types.ts index 2600d5705b..0caf18cc78 100644 --- a/src/plots/rose/types.ts +++ b/src/plots/rose/types.ts @@ -12,8 +12,8 @@ export interface RoseOptions extends Options { /** 是否堆积玫瑰图 */ readonly isStack?: boolean; /** - * 玫瑰图的半径，原点为画布中心。配置值域为 [0,1] - * 0 代表玫瑰图大小为 0，即不显示，1 代表玫瑰图撑满绘图区域 + * 玫瑰图的半径，原点为画布中心。配置值域为 (0,1] + * 1 代表玫瑰图大小为 1，即撑满绘图区域 */ readonly radius?: number; /** 内部空心圆的半径，规则与 radius 一致 */ diff --git a/src/types/label.ts b/src/types/label.ts index 4d17e013df..75901beb07 100644 --- a/src/types/label.ts +++ b/src/types/label.ts @@ -1,6 +1,6 @@ import { LabelCallback, GeometryLabelCfg } from '@antv/g2/lib/interface'; -export type Label = +export type Label = | false | ({ /** 映射的字段。 */ @@ -9,4 +9,4 @@ export type Label = readonly callback?: LabelCallback; /** 功能同 content ，兼容 v1 */ readonly formatter?: GeometryLabelCfg['content']; - } & GeometryLabelCfg); + } & GeometryLabelCfg & { type?: T });