diff --git a/__tests__/unit/plots/word-cloud/color-spec.ts b/__tests__/unit/plots/word-cloud/color-spec.ts index 1af54011c2..9049768008 100644 --- a/__tests__/unit/plots/word-cloud/color-spec.ts +++ b/__tests__/unit/plots/word-cloud/color-spec.ts @@ -73,4 +73,23 @@ describe('word-cloud color option', () => { cloud.destroy(); }); + + it('callback color', () => { + const cloud = new WordCloud(createDiv(), { + width: 400, + height: 300, + data: CountryEconomy, + wordField: 'Country', + weightField: 'GDP', + colorField: 'x', + color: (data) => { + expect(!!data['datum'] || !data['color']).toBe(true); + return 'red'; + }, + }); + + cloud.render(); + + cloud.destroy(); + }); }); diff --git a/__tests__/unit/plots/word-cloud/legend-spec.ts b/__tests__/unit/plots/word-cloud/legend-spec.ts index 4ecd0b25aa..3e89209104 100644 --- a/__tests__/unit/plots/word-cloud/legend-spec.ts +++ b/__tests__/unit/plots/word-cloud/legend-spec.ts @@ -53,4 +53,33 @@ describe('word-cloud', () => { cloud.destroy(); }); + + it('配置 legend', async () => { + const cloud = new WordCloud(createDiv('x*y'), { + width: 400, + height: 300, + data: CountryEconomy, + wordField: 'Country', + weightField: 'GDP', + colorField: 'continent', + legend: { + position: 'left', + marker: { style: { fill: 'red' } }, + }, + animation: false, + wordStyle: { + // 本地跑 live 也会丢失一个 series,故此加上 font-size + fontSize: [12, 20], + }, + }); + + cloud.render(); + + expect(cloud.options.legend).toMatchObject({ + position: 'left', + marker: { style: { fill: 'red' } }, + }); + + cloud.destroy(); + }); }); diff --git a/src/plots/word-cloud/adaptor.ts b/src/plots/word-cloud/adaptor.ts index a5aabe3918..ef544b80e8 100644 --- a/src/plots/word-cloud/adaptor.ts +++ b/src/plots/word-cloud/adaptor.ts @@ -1,9 +1,11 @@ +import { isFunction, get } from '@antv/util'; import { Params } from '../../core/adaptor'; -import { tooltip, interaction, animation, theme, scale, state, legend } from '../../adaptor/common'; +import { tooltip, interaction, animation, theme, scale, state } from '../../adaptor/common'; import { flow, deepAssign } from '../../utils'; import { point } from '../../adaptor/geometries'; import { WordCloudOptions } from './types'; import { transform } from './utils'; +import { WORD_CLOUD_COLOR_FIELD } from './constant'; /** * geometry 配置处理 @@ -20,7 +22,8 @@ function geometry(params: Params): Params { options: { xField: 'x', yField: 'y', - seriesField: colorField && 'color', + seriesField: colorField && WORD_CLOUD_COLOR_FIELD, + rawFields: isFunction(color) && [...get(options, 'rawFields', []), 'datum'], point: { color, shape: 'word-cloud', @@ -50,6 +53,23 @@ function meta(params: Params): Params { )(params); } +/** + * 词云图 legend 配置 + * @param params + */ +export function legend(params: Params): Params { + const { chart, options } = params; + const { legend, colorField } = options; + + if (legend === false) { + chart.legend(false); + } else if (colorField) { + chart.legend(WORD_CLOUD_COLOR_FIELD, legend); + } + + return params; +} + /** * 词云图适配器 * @param chart diff --git a/src/plots/word-cloud/constant.ts b/src/plots/word-cloud/constant.ts index 5939f0ef09..8eb2e11dfc 100644 --- a/src/plots/word-cloud/constant.ts +++ b/src/plots/word-cloud/constant.ts @@ -2,8 +2,11 @@ import { Plot } from '../../core/plot'; import { Datum } from '../../types'; import { deepAssign } from '../../utils'; +/** 词云图 color 通道映射字段 */ +export const WORD_CLOUD_COLOR_FIELD = 'color'; + /** - * 旭日图 默认配置项 + * 词云图 默认配置项 */ export const DEFAULT_OPTIONS = deepAssign({}, Plot.getDefaultOptions(), { timeInterval: 2000, @@ -12,7 +15,7 @@ export const DEFAULT_OPTIONS = deepAssign({}, Plot.getDefaultOptions(), { showTitle: false, showMarkers: false, showCrosshairs: false, - fields: ['text', 'value', 'color'], + fields: ['text', 'value', WORD_CLOUD_COLOR_FIELD], formatter: (datum: Datum) => { return { name: datum.text, value: datum.value }; },