feat: 玫瑰图新增 startAngle、endAngle (#2350)

Co-authored-by: 沈杨 <wb-sy450736@alibaba-inc.com>
antvis · Feb 24, 2021 · 15e1603 · 15e1603
1 parent 2f5b0e8
commit 15e1603
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 5 deletions.
diff --git a/__tests__/unit/plots/rose/coordinate-spec.ts b/__tests__/unit/plots/rose/coordinate-spec.ts
@@ -0,0 +1,28 @@
+import { Rose } from '../../../../src';
+import { salesByArea } from '../../../data/sales';
+import { createDiv } from '../../../utils/dom';
+
+describe('rose', () => {
+  it('set startAngle & endAngle', () => {
+    const rose = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      seriesField: 'area',
+      radius: 0.8,
+      startAngle: 0,
+      endAngle: Math.PI,
+    });
+
+    rose.render();
+
+    const coordinate = rose.chart.getCoordinate();
+    const { startAngle, endAngle } = coordinate;
+    expect(startAngle).toBe(0);
+    expect(endAngle).toBe(Math.PI);
+
+    rose.destroy();
+  });
+});
diff --git a/docs/api/plots/rose.en.md b/docs/api/plots/rose.en.md
@@ -101,6 +101,18 @@ The radius of the rose with the origin being the center of the canvas. The confi
 
 The radius of the hollow circle inside the rose is the same as radius.
 
+#### startAngle
+
+<description>**optional** _number_ _default:_ `(Math.PI * 0) / 180`</description>
+
+The starting Angle of the disk.
+
+#### endAngle
+
+<description>**optional** _number_ _default:_ `(Math.PI * 180) / 180`</description>
+
+The termination Angle of the disk.
+
 `markdown:docs/common/color.en.md`
 
 #### sectorStyle

diff --git a/docs/api/plots/rose.zh.md b/docs/api/plots/rose.zh.md
@@ -69,7 +69,7 @@ const rosePlot = new Rose('container', {
 piePlot.render();
 ```
 
-#### seriesField 
+#### seriesField
 
 <description>**optional** _string_</description>
 
@@ -89,21 +89,33 @@ piePlot.render();
 
 ### 图形样式
 
-#### radius 
+#### radius
 
 <description>**optional** _number_</description>
 
 玫瑰图的半径，原点为画布中心。配置值域为 (0,1]，1 代表玫瑰图撑满绘图区域。
 
-#### innerRadius 
+#### innerRadius
 
 <description>**optional** _number_</description>
 
 玫瑰图内部空心圆的半径，规则与 radius 一致。
 
+#### startAngle
+
+<description>**optional** _number_ _default:_ `(Math.PI * 0) / 180`</description>
+
+配置坐标系的起始角度。
+
+#### endAngle
+
+<description>**optional** _number_ _default:_ `(Math.PI * 180) / 180`</description>
+
+配置坐标系的结束角度。
+
 `markdown:docs/common/color.zh.md`
 
-#### sectorStyle 
+#### sectorStyle
 
 <description>**optional** _object | Function_</description>
 

diff --git a/src/plots/rose/adaptor.ts b/src/plots/rose/adaptor.ts
@@ -92,13 +92,15 @@ export function legend(params: Params<RoseOptions>): Params<RoseOptions> {
  */
 function coordinate(params: Params<RoseOptions>): Params<RoseOptions> {
   const { chart, options } = params;
-  const { radius, innerRadius } = options;
+  const { radius, innerRadius, startAngle, endAngle } = options;
 
   chart.coordinate({
     type: 'polar',
     cfg: {
       radius,
       innerRadius,
+      startAngle,
+      endAngle,
     },
   });
 

diff --git a/src/plots/rose/types.ts b/src/plots/rose/types.ts
@@ -18,6 +18,10 @@ export interface RoseOptions extends Options {
   readonly radius?: number;
   /** 内部空心圆的半径，规则与 radius 一致 */
   readonly innerRadius?: number;
+  /** 玫瑰图开始角度 */
+  readonly startAngle?: number;
+  /** 玫瑰图结束角度 */
+  readonly endAngle?: number;
   /**
    * 设置扇形样式。sectorStyle 中的fill会覆盖 color 的配置
    * sectorStyle 可以直接指定，也可以通过 callback 的方式，根据数据为每个扇形切片指定单独的样式