docs: 增加图例自定义 marker 的demo

close: #2953

Author: visiky

docs/common/marker.en.md

@@ -6,3 +6,5 @@
 
 _Marker_ The supported tag types are： _circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphen_；
 _MarkerCallback_ is `(x: number, y: number, r: number) => PathCommand`；
+
+[DEMO](zh/examples/component/legend#legend-marker-customize) of `Customize legend marker`.

docs/common/marker.zh.md

@@ -14,4 +14,6 @@
 
 回调的方式为：`(x: number, y: number, r: number) => PathCommand`；
 
+自定义图例 marker [DEMO](zh/examples/component/legend#legend-marker-customize)
+
 <!--这里可以插入一个代码示例-->

examples/component/legend/demo/legend-marker-customize.ts

@@ -0,0 +1,37 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/P14mCvkybz/large-datra.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new Column('container', {
+      data,
+      xField: 'product_box',
+      yField: 'value',
+      seriesField: 'province',
+      isGroup: 'true',
+      legend: {
+        flipPage: true,
+        maxRow: 2,
+        marker: {
+          // 把 marker 从 square 变成线条
+          symbol: (x, y, r) => {
+            return [
+              ['M', x - r / 2, y],
+              ['L', x + r / 2, y],
+            ];
+          },
+          style: (oldStyle) => {
+            return {
+              ...oldStyle,
+              r: 4,
+              lineWidth: 2,
+              // square marker 只有填充色，赋给 line 的 stroke
+              stroke: oldStyle.stroke || oldStyle.fill,
+            };
+          },
+        },
+      },
+    });
+
+    plot.render();
+  });

examples/component/legend/demo/meta.json

@@ -43,6 +43,14 @@
         "en": "Legend flip-page configuration"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/W6n7yMd5lw/0a28a2bd-e5f3-4756-8fda-d8e2faf79076.png"
+    },
+    {
+      "filename": "legend-marker-customize.ts",
+      "title": {
+        "zh": "图例 marker 自定义",
+        "en": "Customize legend marker"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/w87M340IdH/5f2f2e58-8426-4f6e-8100-7529ed57b5ed.png"
     }
   ]
 }