docs: add custom symbol demo (#6388)

* docs: add custom symbol demo

* docs: replace image url

site/examples/component/legend/demo/meta.json

@@ -27,6 +27,14 @@
         "en": "Custom Legend"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mZFvTZtdBEUAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "symbol.ts",
+      "title": {
+        "zh": "自定义符号",
+        "en": "Custom Symbol"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UM2yQKYXczEAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/examples/component/legend/demo/symbol.ts

@@ -0,0 +1,55 @@
+import { Chart, register, type SymbolFactor } from '@antv/g2';
+
+const customSquare = Object.assign<SymbolFactor, Partial<SymbolFactor>>(
+  (x, y, r) => {
+    const radius = r / 2;
+
+    return [
+      ['M', x + radius, y - r],
+      ['L', x - radius, y - r],
+      ['A', radius, radius, 0, 0, 0, x - r, y - radius],
+      ['L', x - r, y + radius],
+      ['A', radius, radius, 0, 0, 0, x - radius, y + r],
+      ['L', x + radius, y + r],
+      ['A', radius, radius, 0, 0, 0, x + r, y + radius],
+      ['L', x + r, y - radius],
+      ['A', radius, radius, 0, 0, 0, x + radius, y - r],
+      ['Z'],
+    ];
+  },
+  {
+    // 空心请设置为 ['stroke', 'lineWidth']
+    style: ['fill']
+  },
+);
+
+register('symbol.customSquare', customSquare);
+
+const chart = new Chart({
+  container: 'container',
+});
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const colorField = 'genre';
+
+chart
+  .interval()
+  .data(data)
+  .encode('x', 'genre')
+  .encode('y', 'sold')
+  .encode('color', colorField)
+  .legend({
+    color: {
+      itemMarker: 'customSquare',
+    },
+  });
+
+chart.render();
+