feat(tiny-area): 迷你面积图支持 pattern，同时添加 pattern 与渐变色无法共存的说明文档 (#2811)

antvis · Aug 23, 2021 · b4fe6d7 · b4fe6d7
1 parent 3f37134
commit b4fe6d7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<TinyAreaOptions>): Params<TinyAreaOptions> {
  * @param options
  */
 export function adaptor(params: Params<TinyAreaOptions>) {
-  return flow(geometry, meta, tooltip, theme, animation, annotation())(params);
+  return flow(pattern('areaStyle'), geometry, meta, tooltip, theme, animation, annotation())(params);
 }