docs: 完善 legend marker 配置文档 & 优化 pattern demo

antvis · Aug 15, 2021 · 33a1d9b · 33a1d9b
1 parent 3c907df
commit 33a1d9b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 11 deletions.
diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md
@@ -225,12 +225,20 @@ type Marker = {
 
 ##### marker
 
-<description>**optional** _MarkerCfg_ </description>
+<description>**optional** _MarkerCfg \| MarkerCfgCallback_ </description>
 
 适用于 <tag color="green" text="分类图例">分类图例</tag>，图例项的 marker 图标的配置。
 
 `markdown:docs/common/marker.zh.md`
 
+
+```sign
+type LegendItem = { name: string; value: string; } & MarkerCfg;
+
+type MarkerCfgCallback = (name: string, index: number, item: LegendItem) => MarkerCfg;
+```
+
+
 ##### maxItemWidth
 
 <description> _number_ **optional** </description>

diff --git a/docs/common/marker.zh.md b/docs/common/marker.zh.md
@@ -1,8 +1,17 @@
-| 参数名  | 类型                          | 默认值 | 描述                             |
-| ------- | ---------------------------- | ------ | -------------------------------- |
-| symbol  | _Marker_ \| _MarkerCallback_ | -      | 配置图例 marker 的 symbol 形状   |
-| style   | _ShapeAttrs_                   | -      | 图例项 marker 的配置项           |
-| spacing | _number_                       | -      | 图例项 marker 同后面 name 的间距 |
-
-_Marker_ 为支持的标记类型有： _circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphen_；
-_MarkerCallback_ 为 `(x: number, y: number, r: number) => PathCommand`；
+<!-- #### *MarkerCfg*  配置 -->
+
+| 参数名  | 类型                  | 默认值 | 描述                                                                     |
+| ------- | --------------------- | ------ | ------------------------------------------------------------------------ |
+| symbol  | _string \| MarkerSymbolCallback_  | -      | 配置图例 marker 的 symbol 形状 |
+| style   | _ShapeAttrs \| ((style: ShapeAttrs) => ShapeAttrs)_  | -   | 图例项 marker 的配置项                                           |
+| spacing | number                | -      | 图例项 marker 同后面 name 的间距                                         |
+
+**_MarkerSymbolCallback_** 类型定义如下：
+
+除了内置一些 symbol 类型，可以指定具体的标记类型，也可以通过回调的方式返回 symbol 绘制的 path 命令
+
+内置支持的标记类型有：`"circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"`
+
+回调的方式为：`(x: number, y: number, r: number) => PathCommand`；
+
+<!--这里可以插入一个代码示例-->
diff --git a/examples/plugin/pattern/demo/bar-pattern.ts b/examples/plugin/pattern/demo/bar-pattern.ts
@@ -1,4 +1,5 @@
-import { Bar } from '@antv/g2plot';
+import { Bar, getCanvasPattern } from '@antv/g2plot';
+import { deepMix } from '@antv/util';
 
 const data = [
   { type: '分类一', value: 27 },
@@ -41,12 +42,25 @@ const PATTERN_MAP = {
     },
   },
 };
+const pattern = ({ type }, color) =>
+  getCanvasPattern(deepMix({}, PATTERN_MAP[type], { cfg: { backgroundColor: color } }));
+
 const plot = new Bar('container', {
   data,
   xField: 'value',
   yField: 'type',
   // 可不设置
   seriesField: 'type',
+  legend: {
+    marker: (text, index, item) => {
+      const color = item.style.fill;
+      return {
+        style: {
+          fill: pattern({ type: text }, color),
+        },
+      };
+    },
+  },
   pattern: ({ type }) => {
     return PATTERN_MAP[type] || { type: 'dot' };
   },

diff --git a/examples/plugin/pattern/demo/legend-marker-with-pattern.ts b/examples/plugin/pattern/demo/legend-marker-with-pattern.ts
@@ -35,7 +35,6 @@ const plot = new Pie('container', {
     lineWidth: 1,
   },
   legend: {
-    // 缺少文档
     marker: (text, index, item) => {
       const color = item.style.fill;
       return {