From d9a9bc53e93334b8bb941362cd3002af66ccdafc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E5=90=91=E5=89=8D?= <1062888640@qq.com> Date: Sat, 14 Nov 2020 12:07:59 +0800 Subject: [PATCH] feat: add line type into radial-bar (#1912) * feat: add line type * Update types.ts --- __tests__/unit/plots/radial-bar/index-spec.ts | 29 ++++++++++++++ docs/manual/plots/radial-bar.zh.md | 9 ++++- examples/radial-bar/basic/demo/line.ts | 40 +++++++++++++++++++ examples/radial-bar/basic/demo/meta.json | 8 ++++ src/plots/radial-bar/adaptor.ts | 10 +++-- src/plots/radial-bar/types.ts | 2 + 6 files changed, 94 insertions(+), 4 deletions(-) create mode 100644 examples/radial-bar/basic/demo/line.ts diff --git a/__tests__/unit/plots/radial-bar/index-spec.ts b/__tests__/unit/plots/radial-bar/index-spec.ts index dd60e58c0e..3a0a814352 100644 --- a/__tests__/unit/plots/radial-bar/index-spec.ts +++ b/__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(); }); }); diff --git a/docs/manual/plots/radial-bar.zh.md b/docs/manual/plots/radial-bar.zh.md index 32d23b72fe..fd700a1500 100644 --- a/docs/manual/plots/radial-bar.zh.md +++ b/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_ diff --git a/examples/radial-bar/basic/demo/line.ts b/examples/radial-bar/basic/demo/line.ts new file mode 100644 index 0000000000..0e1cc0d3e2 --- /dev/null +++ b/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(); diff --git a/examples/radial-bar/basic/demo/meta.json b/examples/radial-bar/basic/demo/meta.json index 68f541079b..c8870ed6ea 100644 --- a/examples/radial-bar/basic/demo/meta.json +++ b/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" } ] } diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts index 28cca48760..e7eab63165 100644 --- a/src/plots/radial-bar/adaptor.ts +++ b/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): Params { 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): Params { 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): Params * @param options */ export function adaptor(params: Params) { - 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); } diff --git a/src/plots/radial-bar/types.ts b/src/plots/radial-bar/types.ts index 3fe4c19367..1a521eabaf 100644 --- a/src/plots/radial-bar/types.ts +++ b/src/plots/radial-bar/types.ts @@ -17,4 +17,6 @@ export interface RadialBarOptions extends Options { readonly innerRadius?: number; /** 颜色字段 */ readonly colorField?: string; + /** 类型 */ + readonly type?: string; }