diff --git a/docs/api/pattern.zh.md b/docs/api/pattern.zh.md index f5f612a091..2796324bfa 100644 --- a/docs/api/pattern.zh.md +++ b/docs/api/pattern.zh.md @@ -30,4 +30,5 @@ G2Plot 内置了 `'dot' | 'line' | 'square'` 等若干贴图, 图案颜色默 请注意 pattern 的使用,目前有一些限制: 1. `svg` 的渲染方式下,暂不支持 pattern 图案填充 -2. Tooltip, Legend 的 marker 使用的是依旧是纯颜色(plain color). 对于 Legend marker 可以考虑使用回调的方式来设置,参考:[Demo](/zh/examples/plugin/pattern#pie-pattern-callback) +2. pattern 默认继承元素(element)的填充色,但不支持 pattern 填充色为渐变色,即元素(element)为渐变色时,pattern 背景色无法继承,需要手动指定。参考:[Demo](/zh/examples/tiny/tiny-area#pattern) +3. Tooltip, Legend 的 marker 使用的是依旧是纯颜色(plain color). 对于 Legend marker 可以考虑使用回调的方式来设置,参考:[Demo](/zh/examples/plugin/pattern#pie-pattern-callback) diff --git a/examples/tiny/tiny-area/demo/meta.json b/examples/tiny/tiny-area/demo/meta.json index a4a5451ed2..2d77b8ae5a 100644 --- a/examples/tiny/tiny-area/demo/meta.json +++ b/examples/tiny/tiny-area/demo/meta.json @@ -12,6 +12,15 @@ }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*1dr5RKX8gWIAAAAAAAAAAAAAARQnAQ" }, + { + "filename": "pattern.ts", + "title": { + "zh": "带纹理图案的迷你面积图", + "en": "Tiny area plot with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/DZ4mKJ9Y%240/aeae5577-f5fc-49e1-a4aa-eeb91d76610d.png" + }, { "filename": "area-annotation.ts", "title": { diff --git a/examples/tiny/tiny-area/demo/pattern.ts b/examples/tiny/tiny-area/demo/pattern.ts new file mode 100644 index 0000000000..640eb955ba --- /dev/null +++ b/examples/tiny/tiny-area/demo/pattern.ts @@ -0,0 +1,16 @@ +import { TinyArea } from '@antv/g2plot'; + +const data = [ + 264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226, 192, +]; + +const tinyArea = new TinyArea('container', { + height: 60, + autoFit: false, + data, + smooth: true, + color: '#E5EDFE', + pattern: { type: 'line', cfg: { stroke: '#5B8FF9' } }, +}); + +tinyArea.render(); diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts index 9010abc225..b66d1894d1 100644 --- a/src/plots/tiny-area/adaptor.ts +++ b/src/plots/tiny-area/adaptor.ts @@ -1,4 +1,4 @@ -import { theme, scale, animation, annotation, tooltip } from '../../adaptor/common'; +import { theme, scale, animation, annotation, tooltip, pattern } from '../../adaptor/common'; import { Params } from '../../core/adaptor'; import { flow, deepAssign } from '../../utils'; import { area, line, point } from '../../adaptor/geometries'; @@ -74,5 +74,5 @@ export function meta(params: Params): Params { * @param options */ export function adaptor(params: Params) { - return flow(geometry, meta, tooltip, theme, animation, annotation())(params); + return flow(pattern('areaStyle'), geometry, meta, tooltip, theme, animation, annotation())(params); }