feat: 饼图支持配置坐标系 startAngle 和 endAngle (#2164)

* feat(pie): 饼图支持设置坐标系起始角度和结束角度

* docs(demo): 增加四分之一圆的demo  & 调整饼图 demo

* test: 添加饼图startAngle & endAngle的单测

* docs: 添加饼图 startAngle & endAngle 的 api 文档

* docs(demo): 移除多余的 demo & 添加 demo 截图

Author: visiky

__tests__/unit/plots/pie/coordinate-spec.ts

@@ -0,0 +1,26 @@
+import { Pie } from '../../../../src';
+import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
+import { createDiv } from '../../../utils/dom';
+
+describe('pie', () => {
+  it('set startAngle & endAngle', () => {
+    const pie = new Pie(createDiv(), {
+      width: 400,
+      height: 300,
+      data: POSITIVE_NEGATIVE_DATA,
+      angleField: 'value',
+      colorField: 'type',
+      radius: 0.8,
+      startAngle: 0,
+      endAngle: Math.PI,
+    });
+
+    pie.render();
+
+    const coodinate = pie.chart.getCoordinate();
+    expect(coodinate.startAngle).toBe(0);
+    expect(coodinate.endAngle).toBe(Math.PI);
+
+    pie.destroy();
+  });
+});

docs/api/plots/pie.en.md

@@ -67,6 +67,26 @@ piePlot.render();
 
 饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。
 
+#### innerRadius 
+
+<description>**optional** _number_</description>
+
+饼图的内半径，原点为画布中心。配置值域为 (0,1]
+
+#### startAngle 
+
+<description>**optional** _number_</description>
+
+配置坐标系的起始角度。
+
+#### endAngle 
+
+<description>**optional** _number_</description>
+
+配置坐标系的结束角度。
+
+<playground rid="quarter-circle" path="pie/basic/demo/quarter-circle.ts"></playground>
+
 `markdown:docs/common/color.en.md`
 
 #### pieStyle 

docs/api/plots/pie.zh.md

@@ -67,6 +67,25 @@ piePlot.render();
 
 饼图的半径，原点为画布中心。配置值域为 (0,1]，1 代表饼图撑满绘图区域。
 
+#### innerRadius 
+
+<description>**optional** _number_</description>
+
+饼图的内半径，原点为画布中心。配置值域为 (0,1]
+#### startAngle 
+
+<description>**optional** _number_</description>
+
+配置坐标系的起始角度。
+
+#### endAngle 
+
+<description>**optional** _number_</description>
+
+配置坐标系的结束角度。
+
+<playground rid="quarter-circle" path="pie/basic/demo/quarter-circle.ts"></playground>
+
 `markdown:docs/common/color.zh.md`
 
 #### statistic ✨

examples/pie/basic/demo/meta.json

@@ -20,14 +20,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZztJQa4RLwoAAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "outer-label.ts",
-      "title": {
-        "zh": "饼图-外部图形标签",
-        "en": "Pie plot - outer label"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZztJQa4RLwoAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "spider-label.ts",
       "title": {
@@ -37,26 +29,26 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QyXPRK-URmUAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "pie-state.ts",
+      "filename": "quarter-circle.ts",
       "title": {
-        "zh": "饼图-设置条件状态",
-        "en": "Pie plot - set condition state"
+        "zh": "四分之一圆",
+        "en": "Quarter circle pie"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*y8zjS5DZib8AAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/bzXrKEyk6T/f334d3fa-4494-41b7-9260-c469588555a6.png"
     },
     {
       "filename": "legend-interaction.ts",
       "title": {
         "zh": "饼图-图例交互",
-        "en": "Pie interaction - with legend action"
+        "en": "Pie interaction with legend action"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xZtSQocP4kYAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "pie-texture.ts",
       "title": {
         "en": "Pie plot fill with texture",
-        "zh": "饼图-带纹理"
+        "zh": "带纹理的饼图"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/SUQSZupP5X/c2076423-44ca-41d2-b8fa-a221b6a8fcf2.png"
     }

examples/pie/basic/demo/pie-state.ts

@@ -0,0 +1,33 @@
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const piePlot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 1,
+  // 设置圆弧起始角度
+  startAngle: Math.PI,
+  endAngle: Math.PI * 1.5,
+  label: {
+    type: 'inner',
+    offset: '-8%',
+    content: '{name}',
+    style: { fontSize: 18 },
+  },
+  interactions: [{ type: 'element-active' }],
+  pieStyle: {
+    lineWidth: 0,
+  },
+});
+
+piePlot.render();

examples/pie/basic/demo/quarter-circle.ts

@@ -14,7 +14,7 @@ const piePlot = new Pie('container', {
   data,
   angleField: 'value',
   colorField: 'type',
-  radius: 0.8,
+  radius: 0.75,
   label: {
     type: 'spider',
     labelHeight: 28,

examples/pie/basic/demo/spider-label.ts

@@ -7,7 +7,7 @@
     {
       "filename": "basic.ts",
       "title": {
-        "zh": "环图",
+        "zh": "基础环图",
         "en": "Basic donut plot"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*65WIQK5T4c8AAAAAAAAAAAAAARQnAQ"

examples/pie/donut/demo/meta.json

@@ -89,13 +89,15 @@ function meta(params: Params<PieOptions>): Params<PieOptions> {
  */
 function coordinate(params: Params<PieOptions>): Params<PieOptions> {
   const { chart, options } = params;
-  const { radius, innerRadius } = options;
+  const { radius, innerRadius, startAngle, endAngle } = options;
 
   chart.coordinate({
     type: 'theta',
     cfg: {
       radius,
       innerRadius,
+      startAngle,
+      endAngle,
     },
   });
 

src/plots/pie/adaptor.ts

@@ -19,6 +19,11 @@ export interface PieOptions extends Options {
   readonly label?: Label;
   /** 饼图图形样式 */
   readonly pieStyle?: StyleAttr;
+  // 设置扇形图
+  /** 圆环的开始角度 */
+  readonly startAngle?: number;
+  /** 圆环的结束角度 */
+  readonly endAngle?: number;
   /**
    * 指标卡组件: 显示在环图中心，可以代替tooltip，显示环图数据的总计值和各项数据
    * 启用 statistic 组件的同时将自动关闭tooltip