From c180c288763a1a34eb729b91d8c03a62e0a8b64a Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 10:45:22 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(pattern):=20pattern=20=E5=A1=AB?= =?UTF-8?q?=E5=85=85=E4=BD=9C=E7=94=A8=E5=9C=A8=20style=20=E4=B8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/adaptor/pattern.ts | 72 +++++++++++++++++++++------------------- src/plots/pie/adaptor.ts | 2 +- 2 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/adaptor/pattern.ts b/src/adaptor/pattern.ts index 450b2389d6..e97e983187 100644 --- a/src/adaptor/pattern.ts +++ b/src/adaptor/pattern.ts @@ -1,40 +1,44 @@ -import { isString, get, isObjectLike, isFunction, isNil } from '@antv/util'; -import { createPattern, PatternShape, PatternStyle } from '../plugin/pattern'; +import { createPattern } from '../plugin/pattern'; import { Params } from '../core/adaptor'; -import { Options } from '../types'; +import { Options, StyleAttr } from '../types'; import { deepAssign } from '../utils'; -export function pattern(params: Params): Params { - const { options } = params; - const patternAttr = get(options, 'pattern', null); - /** - * pattern: PatternShape | PatternStyle | ((datum: Datum) => CanvasPattern) | CanvasPattern; - */ - let pattern, color; - /** - * 1. 如果是 string，PatternStyle 就通过 createPattern 函数转换成 pattern对象 - * PatternStyle = {type: 'dot', cfg:{size: [10, 10], bgColor: 'aliceblue'}} - * const pattern = createPattern(PatternStyle); - */ - if (isString(patternAttr) || isObjectLike(patternAttr)) { - pattern = createPattern(patternAttr as PatternShape | PatternStyle); - color = () => pattern; - } - /** - * 2. 如果是 ((datum: Datum) => CanvasPattern)，直接传给 color - */ - if (isFunction(patternAttr)) { - color = patternAttr; - } - /** - * 3. 如果是 CanvasPattern，转换成回调 传给 color - */ - if (patternAttr instanceof CanvasPattern) { - color = () => patternAttr; - } +/** + * Pattern 通道，处理图案填充 + * @param key key of style property + * @returns + */ +export function pattern(key: string) { + return (params: Params): Params => { + const { options } = params; + const { pattern: patternOption } = options; - let p = params; - if (!isNil(color)) p = deepAssign({}, p, { options: { color } }); + // 没有 pattern 配置，则直接返回 + if (!patternOption) { + return params; + } - return p; + /** ~~~~~~~ 进行贴图图案处理 ~~~~~~~ */ + + const style: StyleAttr = (datum: any) => { + let pattern: CanvasPattern; + if (typeof patternOption === 'function') { + // 1. 如果是 ((datum: Datum) => CanvasPattern)，直接传给 color + pattern = patternOption.call(datum); + } else { + console.log('datum', datum, params.chart); + + // 2. 如果是 string，PatternStyle, 则 pattern = createPattern(PatternStyle) 转换为 CanvasPattern + // 3. 如果是 CanvasPattern，则直接赋予 + pattern = patternOption instanceof CanvasPattern ? patternOption : createPattern(patternOption as any); + } + + return { + ...(typeof options[key] === 'function' ? options[key].call(datum) : options[key] || {}), + fill: pattern, + }; + }; + + return deepAssign({}, params, { options: { [key]: style } }); + }; } diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index 896aa72e34..8325e39cdd 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -316,7 +316,7 @@ export function interaction(params: Params): Params { export function adaptor(params: Params) { // flow 的方式处理所有的配置到 G2 API return flow>( - pattern, + pattern('pieStyle'), geometry, meta, theme, From 532e1421c8315e04b0fb7e580b5dfb7d5d1e92e5 Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 12:27:54 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat(pattern):=20pattern=20=E9=80=9A?= =?UTF-8?q?=E9=81=93=20&=20=E6=8E=A5=E5=85=A5=E6=9F=B1=E6=9D=A1=E5=BD=A2?= =?UTF-8?q?=E5=9B=BE=E3=80=81=E7=8E=89=E7=8F=8F=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/adaptor/pattern.ts | 55 ++++++++++++++++++++++++--------- src/plots/column/adaptor.ts | 4 ++- src/plots/radial-bar/adaptor.ts | 2 ++ src/plugin/pattern/dot.ts | 9 +++--- src/types/attr.ts | 6 +++- 5 files changed, 56 insertions(+), 20 deletions(-) diff --git a/src/adaptor/pattern.ts b/src/adaptor/pattern.ts index e97e983187..c2aff58d92 100644 --- a/src/adaptor/pattern.ts +++ b/src/adaptor/pattern.ts @@ -1,17 +1,27 @@ import { createPattern } from '../plugin/pattern'; import { Params } from '../core/adaptor'; -import { Options, StyleAttr } from '../types'; +import { Datum, Options, StyleAttr } from '../types'; import { deepAssign } from '../utils'; +/** + * 使用 Pattern 通道的 options，要求有 colorField、seriesField 作为分类字段（进行颜色映射） + */ +type OptionsRequiredInPattern = Options & { + colorField?: string; + seriesField?: string; +}; + /** * Pattern 通道，处理图案填充 + * 🚀 目前支持图表类型：饼图、柱状图、条形图、玉珏图（不支持在多 view 图表中，后续按需扩展） + * * @param key key of style property * @returns */ export function pattern(key: string) { - return (params: Params): Params => { + return (params: Params): Params => { const { options } = params; - const { pattern: patternOption } = options; + const { pattern: patternOption, colorField, seriesField } = options; // 没有 pattern 配置，则直接返回 if (!patternOption) { @@ -20,21 +30,38 @@ export function pattern(key: string) { /** ~~~~~~~ 进行贴图图案处理 ~~~~~~~ */ - const style: StyleAttr = (datum: any) => { - let pattern: CanvasPattern; + const style: StyleAttr = (datum?: Datum, ...args: any[]) => { + let color = params.chart.getTheme().defaultColor; + if (params.chart.geometries[0].attributes.color?.callback) { + color = params.chart.geometries[0].attributes.color.callback(datum?.[colorField] || datum?.[seriesField]); + } + + let pattern: CanvasPattern = patternOption as CanvasPattern; + + // 1. 如果 patternOption 是一个回调，则获取回调结果。`(datum: Datum, color: string) => CanvasPattern` if (typeof patternOption === 'function') { - // 1. 如果是 ((datum: Datum) => CanvasPattern)，直接传给 color - pattern = patternOption.call(datum); - } else { - console.log('datum', datum, params.chart); - - // 2. 如果是 string，PatternStyle, 则 pattern = createPattern(PatternStyle) 转换为 CanvasPattern - // 3. 如果是 CanvasPattern，则直接赋予 - pattern = patternOption instanceof CanvasPattern ? patternOption : createPattern(patternOption as any); + pattern = patternOption.call(this, datum, color); + } + + // 2. 如果 pattern 不是 CanvasPattern，则进一步处理，否则直接赋予给 fill + if (pattern instanceof CanvasPattern === false) { + // 通过 createPattern(PatternStyle) 转换为 CanvasPattern + pattern = createPattern( + deepAssign( + {}, + { + cfg: { + bgColor: color, + stroke: color, + }, + }, + pattern + ) + ); } return { - ...(typeof options[key] === 'function' ? options[key].call(datum) : options[key] || {}), + ...(typeof options[key] === 'function' ? options[key].call(this, datum, ...args) : options[key] || {}), fill: pattern, }; }; diff --git a/src/plots/column/adaptor.ts b/src/plots/column/adaptor.ts index 741a01fe94..7eb487f1ce 100644 --- a/src/plots/column/adaptor.ts +++ b/src/plots/column/adaptor.ts @@ -15,10 +15,11 @@ import { import { conversionTag } from '../../adaptor/conversion-tag'; import { connectedArea } from '../../adaptor/connected-area'; import { interval } from '../../adaptor/geometries'; +import { pattern } from '../../adaptor/pattern'; +import { brushInteraction } from '../../adaptor/brush'; import { flow, transformLabel, deepAssign, findGeometry, adjustYMetaByZero, pick } from '../../utils'; import { getDataWhetherPecentage, getDeepPercent } from '../../utils/transform/percent'; import { Datum } from '../../types'; -import { brushInteraction } from '../../adaptor/brush'; import { ColumnOptions } from './types'; /** @@ -287,6 +288,7 @@ export function adaptor(params: Params, isBar = false) { return flow( defaultOptions, // 处理默认配置 theme, // theme 需要在 geometry 之前 + pattern('columnStyle'), state, geometry, meta, diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts index 281e856d8d..cd392ad6a2 100644 --- a/src/plots/radial-bar/adaptor.ts +++ b/src/plots/radial-bar/adaptor.ts @@ -2,6 +2,7 @@ import { interaction, animation, theme, scale, tooltip, legend, annotation } fro import { Params } from '../../core/adaptor'; import { flow, deepAssign, findGeometry, transformLabel } from '../../utils'; import { interval, point } from '../../adaptor/geometries'; +import { pattern } from '../../adaptor/pattern'; import { processIllegalData } from '../../utils'; import { RadialBarOptions } from './types'; import { getScaleMax, getStackedData } from './utils'; @@ -131,6 +132,7 @@ function label(params: Params): Params { */ export function adaptor(params: Params) { return flow( + pattern('barStyle'), geometry, meta, axis, diff --git a/src/plugin/pattern/dot.ts b/src/plugin/pattern/dot.ts index cb50186d1b..8fce63ba56 100644 --- a/src/plugin/pattern/dot.ts +++ b/src/plugin/pattern/dot.ts @@ -5,6 +5,7 @@ import { Pattern, PatternCfg } from './base'; export type DotCfg = PatternCfg & { radius?: number; padding?: number; + /** 是否交错，默认: true. 即 staggered dots. */ isStagger?: boolean; fill?: string; //... @@ -13,12 +14,12 @@ export type DotCfg = PatternCfg & { export class DotPattern extends Pattern { private static defaultCfg = { radius: 20, - bgColor: '#FFE869', + bgColor: 'transparent', opacity: 1, - fill: '#F7B32D', + fill: '#FFF', padding: 5, - stroke: '#F7B32D', - strokeWidth: 0, + stroke: '#FFF', + lineWidth: 0, isStagger: true, }; diff --git a/src/types/attr.ts b/src/types/attr.ts index 99c9d33d28..0869049988 100644 --- a/src/types/attr.ts +++ b/src/types/attr.ts @@ -8,7 +8,11 @@ export type ShapeStyle = ShapeAttrs; /** 颜色映射 */ export type ColorAttr = string | string[] | ((datum: Datum) => string) | object; /** pattern 映射*/ -export type PatternAttr = PatternShape | PatternStyle | ((datum: Datum) => CanvasPattern) | CanvasPattern; +export type PatternAttr = + | PatternShape + | PatternStyle + | ((datum: Datum, color: string /** inherit color */) => CanvasPattern) + | CanvasPattern; /** 尺寸大小映射 */ export type SizeAttr = number | [number, number] | ((datum: Datum) => number); /** 图形 shape 映射 */ From fc38ef158cd663d002988e79681cd138941c30d7 Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 12:30:09 +0800 Subject: [PATCH 3/6] =?UTF-8?q?docs(pattern-demo):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E8=8B=A5=E5=B9=B2=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/pie/basic/demo/basic.ts | 9 --- examples/plugin/pattern/demo/bar-pattern.ts | 30 +++++++++ .../plugin/pattern/demo/column-pattern.ts | 26 ++++++++ .../pattern/demo/group-column-pattern.ts | 38 +++++++++++ examples/plugin/pattern/demo/meta.json | 64 +++++++++++++++++++ .../pattern/demo/pie-pattern-callback.ts | 37 +++++++++++ examples/plugin/pattern/demo/pie-pattern.ts | 38 +++++++++++ .../plugin/pattern/demo/radial-bar-pattern.ts | 39 +++++++++++ examples/plugin/pattern/index.en.md | 4 ++ examples/plugin/pattern/index.zh.md | 4 ++ 10 files changed, 280 insertions(+), 9 deletions(-) create mode 100644 examples/plugin/pattern/demo/bar-pattern.ts create mode 100644 examples/plugin/pattern/demo/column-pattern.ts create mode 100644 examples/plugin/pattern/demo/group-column-pattern.ts create mode 100644 examples/plugin/pattern/demo/meta.json create mode 100644 examples/plugin/pattern/demo/pie-pattern-callback.ts create mode 100644 examples/plugin/pattern/demo/pie-pattern.ts create mode 100644 examples/plugin/pattern/demo/radial-bar-pattern.ts create mode 100644 examples/plugin/pattern/index.en.md create mode 100644 examples/plugin/pattern/index.zh.md diff --git a/examples/pie/basic/demo/basic.ts b/examples/pie/basic/demo/basic.ts index cecd59650a..27b300511a 100644 --- a/examples/pie/basic/demo/basic.ts +++ b/examples/pie/basic/demo/basic.ts @@ -24,15 +24,6 @@ const piePlot = new Pie('container', { textAlign: 'center', }, }, - pattern: { - type: 'dot', - cfg: { - radius: 2, - padding: 10, - isStagger: true, - mode: 'repeat', - }, - }, interactions: [{ type: 'element-active' }], }); diff --git a/examples/plugin/pattern/demo/bar-pattern.ts b/examples/plugin/pattern/demo/bar-pattern.ts new file mode 100644 index 0000000000..4ea0132868 --- /dev/null +++ b/examples/plugin/pattern/demo/bar-pattern.ts @@ -0,0 +1,30 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { type: '分类一', value: 27 }, + { type: '分类二', value: 25 }, + { type: '分类三', value: 18 }, + { type: '分类四', value: 15 }, + { type: '分类五', value: 10 }, + { type: '其他', value: 5 }, +]; + +const plot = new Bar('container', { + data, + xField: 'value', + yField: 'type', + // 可不设置 + // seriesField: 'type', + pattern: { + type: 'dot', + cfg: { + radius: 2, + padding: 10, + // dot 不进行交错 + isStagger: false, + mode: 'repeat', + }, + }, +}); + +plot.render(); diff --git a/examples/plugin/pattern/demo/column-pattern.ts b/examples/plugin/pattern/demo/column-pattern.ts new file mode 100644 index 0000000000..ba40b4da68 --- /dev/null +++ b/examples/plugin/pattern/demo/column-pattern.ts @@ -0,0 +1,26 @@ +import { Column } from '@antv/g2plot'; + +const data = [ + { type: '分类一', value: 27 }, + { type: '分类二', value: 25 }, + { type: '分类三', value: 18 }, + { type: '分类四', value: 15 }, + { type: '分类五', value: 10 }, + { type: '其他', value: 5 }, +]; + +const plot = new Column('container', { + data, + yField: 'value', + xField: 'type', + pattern: { + type: 'dot', + cfg: { + radius: 2, + padding: 10, + mode: 'repeat', + }, + }, +}); + +plot.render(); diff --git a/examples/plugin/pattern/demo/group-column-pattern.ts b/examples/plugin/pattern/demo/group-column-pattern.ts new file mode 100644 index 0000000000..4f51bd1d03 --- /dev/null +++ b/examples/plugin/pattern/demo/group-column-pattern.ts @@ -0,0 +1,38 @@ +import { Column } from '@antv/g2plot'; + +const data = [ + { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, + { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, + { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, + { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, + { name: 'London', 月份: 'May', 月均降雨量: 47 }, + { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, + { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, + { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, + { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, + { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, + { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, + { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, + { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, + { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, + { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, + { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, +]; + +const plot = new Column('container', { + data, + yField: '月均降雨量', + xField: '月份', + seriesField: 'name', + isGroup: true, + pattern: { + type: 'dot', + cfg: { + radius: 2, + padding: 10, + mode: 'repeat', + }, + }, +}); + +plot.render(); diff --git a/examples/plugin/pattern/demo/meta.json b/examples/plugin/pattern/demo/meta.json new file mode 100644 index 0000000000..d77c2afe7d --- /dev/null +++ b/examples/plugin/pattern/demo/meta.json @@ -0,0 +1,64 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "pie-pattern.ts", + "title": { + "zh": "带贴图图案的饼图", + "en": "Pie plot with pattern" + }, + "screenshot": "" + }, + { + "filename": "pie-pattern-callback.ts", + "title": { + "zh": "带贴图图案的饼图(回调方式)", + "en": "Pie plot with pattern callback" + }, + "screenshot": "" + }, + { + "filename": "column-pattern.ts", + "title": { + "zh": "带贴图图案的柱状图", + "en": "Column plot with pattern" + }, + "screenshot": "" + }, + { + "filename": "group-column-pattern.ts", + "title": { + "zh": "带贴图图案的分组柱状图", + "en": "Grouped column plot with pattern" + }, + "screenshot": "" + }, + { + "filename": "bar-pattern.ts", + "title": { + "zh": "带贴图图案的条形图", + "en": "Bar plot with pattern" + }, + "screenshot": "" + }, + { + "filename": "pie-pattern-callback.ts", + "title": { + "zh": "带贴图图案的饼图(回调方式)", + "en": "Pie plot with pattern callback" + }, + "screenshot": "" + }, + { + "filename": "radial-bar-pattern.ts", + "title": { + "zh": "带贴图图案的玉珏图", + "en": "Radial-bar plot with pattern" + }, + "screenshot": "" + } + ] +} diff --git a/examples/plugin/pattern/demo/pie-pattern-callback.ts b/examples/plugin/pattern/demo/pie-pattern-callback.ts new file mode 100644 index 0000000000..00c16dbff9 --- /dev/null +++ b/examples/plugin/pattern/demo/pie-pattern-callback.ts @@ -0,0 +1,37 @@ +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 plot = new Pie('container', { + appendPadding: 10, + data, + angleField: 'value', + colorField: 'type', + radius: 0.9, + label: false, + pieStyle: { + lineWidth: 1, + }, + pattern: (datum, color) => { + return { + type: 'dot', + cfg: { + radius: datum.type === '其他' ? 4 : 2, + padding: 10, + mode: 'repeat', + bgColor: datum.type === '其他' ? '#B8E1FF' : color, + fill: datum.type === '其他' ? color : 'transparent', + }, + }; + }, + interactions: [{ type: 'element-active' }], +}); + +plot.render(); diff --git a/examples/plugin/pattern/demo/pie-pattern.ts b/examples/plugin/pattern/demo/pie-pattern.ts new file mode 100644 index 0000000000..e9e3a20e63 --- /dev/null +++ b/examples/plugin/pattern/demo/pie-pattern.ts @@ -0,0 +1,38 @@ +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 plot = new Pie('container', { + appendPadding: 10, + data, + angleField: 'value', + colorField: 'type', + radius: 0.9, + label: { + type: 'inner', + offset: '-30%', + content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, + style: { + fontSize: 14, + textAlign: 'center', + }, + }, + pattern: { + type: 'dot', + cfg: { + radius: 2, + padding: 10, + mode: 'repeat', + }, + }, + interactions: [{ type: 'element-active' }], +}); + +plot.render(); diff --git a/examples/plugin/pattern/demo/radial-bar-pattern.ts b/examples/plugin/pattern/demo/radial-bar-pattern.ts new file mode 100644 index 0000000000..df560ea5e5 --- /dev/null +++ b/examples/plugin/pattern/demo/radial-bar-pattern.ts @@ -0,0 +1,39 @@ +import { RadialBar } from '@antv/g2plot'; + +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +]; + +const plot = new RadialBar('container', { + data, + xField: 'name', + yField: 'star', + // color 字段，可不设置 + // colorField: 'name', + radius: 0.8, + innerRadius: 0.2, + tooltip: { + formatter: (datum) => { + return { name: 'star数', value: datum.star }; + }, + }, + pattern: { + type: 'dot', + cfg: { + radius: 2, + padding: 2, + // dot 不进行交错 + isStagger: false, + mode: 'repeat', + }, + }, +}); + +plot.render(); diff --git a/examples/plugin/pattern/index.en.md b/examples/plugin/pattern/index.en.md new file mode 100644 index 0000000000..57300062e6 --- /dev/null +++ b/examples/plugin/pattern/index.en.md @@ -0,0 +1,4 @@ +--- +title: Pattern +order: 4 +--- diff --git a/examples/plugin/pattern/index.zh.md b/examples/plugin/pattern/index.zh.md new file mode 100644 index 0000000000..aee77f7a40 --- /dev/null +++ b/examples/plugin/pattern/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 图案 - Pattern +order: 4 +--- From 391ea9b6504182089c9f2525ec1bad16e5518853 Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 12:40:22 +0800 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=B8=8B?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/adaptor/pattern.ts | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/adaptor/pattern.ts b/src/adaptor/pattern.ts index c2aff58d92..4e2070ed72 100644 --- a/src/adaptor/pattern.ts +++ b/src/adaptor/pattern.ts @@ -20,7 +20,7 @@ type OptionsRequiredInPattern = Options & { */ export function pattern(key: string) { return (params: Params): Params => { - const { options } = params; + const { options, chart } = params; const { pattern: patternOption, colorField, seriesField } = options; // 没有 pattern 配置，则直接返回 @@ -32,8 +32,10 @@ export function pattern(key: string) { const style: StyleAttr = (datum?: Datum, ...args: any[]) => { let color = params.chart.getTheme().defaultColor; - if (params.chart.geometries[0].attributes.color?.callback) { - color = params.chart.geometries[0].attributes.color.callback(datum?.[colorField] || datum?.[seriesField]); + + const colorMapping = chart.geometries[0].attributes.color?.callback; + if (typeof colorMapping === 'function') { + color = colorMapping(datum?.[colorField] || datum?.[seriesField]); } let pattern: CanvasPattern = patternOption as CanvasPattern; @@ -46,22 +48,13 @@ export function pattern(key: string) { // 2. 如果 pattern 不是 CanvasPattern，则进一步处理，否则直接赋予给 fill if (pattern instanceof CanvasPattern === false) { // 通过 createPattern(PatternStyle) 转换为 CanvasPattern - pattern = createPattern( - deepAssign( - {}, - { - cfg: { - bgColor: color, - stroke: color, - }, - }, - pattern - ) - ); + pattern = createPattern(deepAssign({}, { cfg: { bgColor: color, stroke: color } }, pattern)); } + const styleOption = options[key] as StyleAttr; + return { - ...(typeof options[key] === 'function' ? options[key].call(this, datum, ...args) : options[key] || {}), + ...(typeof styleOption === 'function' ? styleOption.call(this, datum, ...args) : styleOption || {}), fill: pattern, }; }; From 69c6ffdd72c2336c80e8053d0efd5e8d829ad97f Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 12:43:54 +0800 Subject: [PATCH 5/6] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20demos=20?= =?UTF-8?q?=E4=B8=8A=E6=96=B0=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/plugin/pattern/demo/meta.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/examples/plugin/pattern/demo/meta.json b/examples/plugin/pattern/demo/meta.json index d77c2afe7d..f78dd90532 100644 --- a/examples/plugin/pattern/demo/meta.json +++ b/examples/plugin/pattern/demo/meta.json @@ -10,6 +10,7 @@ "zh": "带贴图图案的饼图", "en": "Pie plot with pattern" }, + "new": true, "screenshot": "" }, { @@ -18,6 +19,7 @@ "zh": "带贴图图案的饼图(回调方式)", "en": "Pie plot with pattern callback" }, + "new": true, "screenshot": "" }, { @@ -26,6 +28,7 @@ "zh": "带贴图图案的柱状图", "en": "Column plot with pattern" }, + "new": true, "screenshot": "" }, { @@ -34,6 +37,7 @@ "zh": "带贴图图案的分组柱状图", "en": "Grouped column plot with pattern" }, + "new": true, "screenshot": "" }, { @@ -42,6 +46,7 @@ "zh": "带贴图图案的条形图", "en": "Bar plot with pattern" }, + "new": true, "screenshot": "" }, { @@ -50,6 +55,7 @@ "zh": "带贴图图案的饼图(回调方式)", "en": "Pie plot with pattern callback" }, + "new": true, "screenshot": "" }, { @@ -58,6 +64,7 @@ "zh": "带贴图图案的玉珏图", "en": "Radial-bar plot with pattern" }, + "new": true, "screenshot": "" } ] From d3ad785fb1a36637b71111b531400d8af26d6adf Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Tue, 10 Aug 2021 14:00:55 +0800 Subject: [PATCH 6/6] =?UTF-8?q?refactor(pattern):=20=E4=BF=AE=E6=94=B9=20c?= =?UTF-8?q?r=20=E5=86=85=E5=AE=B9=20&=20=E4=BC=98=E5=8C=96=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pattern/demo/pie-pattern-callback.ts | 36 ++++++++++++------- src/adaptor/pattern.ts | 4 +-- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/examples/plugin/pattern/demo/pie-pattern-callback.ts b/examples/plugin/pattern/demo/pie-pattern-callback.ts index 00c16dbff9..a08800c48a 100644 --- a/examples/plugin/pattern/demo/pie-pattern-callback.ts +++ b/examples/plugin/pattern/demo/pie-pattern-callback.ts @@ -1,4 +1,4 @@ -import { Pie } from '@antv/g2plot'; +import { Pie, createPattern } from '@antv/g2plot'; const data = [ { type: '分类一', value: 27 }, @@ -9,6 +9,18 @@ const data = [ { type: '其他', value: 5 }, ]; +const pattern = (datum, color) => + createPattern({ + type: 'dot', + cfg: { + radius: datum.type === '其他' ? 1 : 2, + padding: 4, + mode: 'repeat', + stroke: 'transparent', + bgColor: datum.type === '其他' ? '#014c63' : color, + }, + }); + const plot = new Pie('container', { appendPadding: 10, data, @@ -19,18 +31,18 @@ const plot = new Pie('container', { pieStyle: { lineWidth: 1, }, - pattern: (datum, color) => { - return { - type: 'dot', - cfg: { - radius: datum.type === '其他' ? 4 : 2, - padding: 10, - mode: 'repeat', - bgColor: datum.type === '其他' ? '#B8E1FF' : color, - fill: datum.type === '其他' ? color : 'transparent', - }, - }; + legend: { + // 缺少文档 + marker: (text, index, item) => { + const color = item.style.fill; + return { + style: { + fill: text === '其他' ? pattern({ type: text }, color) : color, + }, + }; + }, }, + pattern, interactions: [{ type: 'element-active' }], }); diff --git a/src/adaptor/pattern.ts b/src/adaptor/pattern.ts index 4e2070ed72..f1ceae2023 100644 --- a/src/adaptor/pattern.ts +++ b/src/adaptor/pattern.ts @@ -31,9 +31,9 @@ export function pattern(key: string) { /** ~~~~~~~ 进行贴图图案处理 ~~~~~~~ */ const style: StyleAttr = (datum?: Datum, ...args: any[]) => { - let color = params.chart.getTheme().defaultColor; + let color = chart.getTheme().defaultColor; - const colorMapping = chart.geometries[0].attributes.color?.callback; + const colorMapping = chart.geometries[0].getAttribute('color')?.callback; if (typeof colorMapping === 'function') { color = colorMapping(datum?.[colorField] || datum?.[seriesField]); }