feat: add line type into radial-bar (#1912)

* feat: add line type

* Update types.ts

__tests__/unit/plots/radial-bar/index-spec.ts

@@ -52,7 +52,36 @@ describe('radial-bar', () => {
     // @ts-ignore
     const colorValue = geometry.getAttribute('color').values;
     expect(colorValue).toBe(color);
+    bar.destroy();
+  });
 
+  it('xField*yField*type', () => {
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      type: 'line',
+      annotations: [
+        {
+          type: 'text',
+          position: ['50%', '50%'],
+          content: 'Music',
+          style: {
+            textAlign: 'center',
+            fontSize: 24,
+          },
+        },
+      ],
+    });
+    bar.render();
+    const geometry = bar.chart.geometries[0];
+    const point = bar.chart.geometries[1];
+    expect(geometry.attributes.shape.values[0]).toBe('line');
+    expect(point.type).toBe('point');
+    expect(bar.chart.getController('annotation').getComponents().length).toBe(1);
+    expect(bar.chart.getController('annotation').getComponents()[0].component.get('content')).toBe('Music');
     bar.destroy();
   });
 });

docs/manual/plots/radial-bar.zh.md

@@ -23,6 +23,14 @@ order: 25
 
 `markdown:docs/common/meta.zh.md`
 
+#### type
+
+**可选**, _string_
+
+功能描述: 图表类型， 'line' 为线形图。
+
+默认配置： 无
+
 ### 图形样式
 
 #### radius
@@ -47,7 +55,6 @@ order: 25
 
 默认配置： 240
 
-
 #### barStyle
 
 **可选**, _StyleAttr | Function_

examples/radial-bar/basic/demo/line.ts

@@ -0,0 +1,40 @@
+import { RadialBar } from '@antv/g2plot';
+
+const data = [
+  { term: 'Zombieland', count: 9 },
+  { term: 'Wieners', count: 8 },
+  { term: 'Toy Story', count: 8 },
+  { term: 'trashkannon', count: 7 },
+  { term: 'the GROWLERS', count: 6 },
+  { term: 'mudweiser', count: 6 },
+  { term: 'ThunderCats', count: 4 },
+  { term: 'The Taqwacores - Motion Picture', count: 4 },
+  { term: 'The Shawshank Redemption', count: 2 },
+  { term: 'The Olivia Experiment', count: 1 },
+];
+
+const bar = new RadialBar('container', {
+  width: 400,
+  height: 300,
+  data,
+  xField: 'term',
+  yField: 'count',
+  radius: 0.8,
+  innerRadius: 0.2,
+  tooltip: {
+    showMarkers: true,
+  },
+  type: 'line',
+  annotations: [
+    {
+      type: 'text',
+      position: ['50%', '50%'],
+      content: 'Music',
+      style: {
+        textAlign: 'center',
+        fontSize: 24,
+      },
+    },
+  ],
+});
+bar.render();

examples/radial-bar/basic/demo/meta.json

@@ -19,6 +19,14 @@
         "en": "basic Radial-Bar chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*GTDCRYkg6V4AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "线形玉珏图",
+        "en": "Radial-line chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*GC6wT4GQ-oMAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

src/plots/radial-bar/adaptor.ts

@@ -1,4 +1,4 @@
-import { interaction, animation, theme, scale, tooltip, legend } from '../../adaptor/common';
+import { interaction, animation, theme, scale, tooltip, legend, annotation } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { flow, deepAssign } from '../../utils';
 import { interval } from '../../adaptor/geometries';
@@ -11,7 +11,7 @@ import { getScaleMax } from './utils';
  */
 function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
   const { chart, options } = params;
-  const { data, barStyle: style, color, tooltip, colorField } = options;
+  const { data, barStyle: style, color, tooltip, colorField, type, xField, yField } = options;
   chart.data(data);
   const p = deepAssign({}, params, {
     options: {
@@ -20,10 +20,14 @@ function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
       interval: {
         style,
         color,
+        shape: type === 'line' ? 'line' : 'intervel',
       },
     },
   });
   interval(p);
+  if (type === 'line') {
+    chart.point().position(`${xField}*${yField}`).shape('circle');
+  }
   return params;
 }
 
@@ -81,5 +85,5 @@ export function axis(params: Params<RadialBarOptions>): Params<RadialBarOptions>
  * @param options
  */
 export function adaptor(params: Params<RadialBarOptions>) {
-  return flow(geometry, meta, axis, coordinate, interaction, animation, theme, tooltip, legend)(params);
+  return flow(geometry, meta, axis, coordinate, interaction, animation, theme, tooltip, legend, annotation())(params);
 }

src/plots/radial-bar/types.ts

@@ -17,4 +17,6 @@ export interface RadialBarOptions extends Options {
   readonly innerRadius?: number;
   /** 颜色字段 */
   readonly colorField?: string;
+  /** 类型 */
+  readonly type?: string;
 }