chore: 增加官网polylineGuide例子 (#2018)

Co-authored-by: xuying.xu <[email protected]>

site/.dumirc.ts

@@ -371,4 +371,5 @@ export default defineConfig({
     'https://polyfill.alicdn.com/v3/polyfill.js?features=Intl.RelativeTimeFormat,Intl.RelativeTimeFormat.~locale.en',
   ],
   legacy: {},
+  mako: {},
 });

site/examples/component/guide/demo/linestep.jsx

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { Canvas, Chart, Interval, jsx, PolylineGuide } from '@antv/f2';
+
+const context = document.getElementById('container').getContext('2d');
+
+const data = [
+  { genre: 'Sports', sold: 275, type: 'a' },
+  { genre: 'Strategy', sold: 115, type: 'a' },
+  { genre: 'Action', sold: 120, type: 'a' },
+  { genre: 'Shooter', sold: 350, type: 'a' },
+  { genre: 'Other', sold: 150, type: 'a' },
+];
+
+const goal = [
+  { genre: 'min', sold: 225 },
+  { genre: 'Sports', sold: 225 },
+  { genre: 'Strategy', sold: 85 },
+  { genre: 'Action', sold: 100 },
+  { genre: 'Shooter', sold: 250 },
+  { genre: 'Other', sold: 120 },
+  { genre: 'max', sold: 120 },
+];
+
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart data={data}>
+      <Interval x="genre" y="sold" color="#FA8416" />
+      <PolylineGuide
+        records={[
+          { genre: 'min', sold: 0 },
+          ...goal,
+          {
+            genre: 'max',
+            sold: 0,
+          },
+        ]}
+        style={{
+          step: 'middle',
+          fill: 'rgba(255,253,251,0.6)',
+        }}
+      />
+      <PolylineGuide
+        records={goal}
+        style={{
+          step: 'middle',
+          fill: 'none',
+          stroke: 'rgba(250,132,22,0.8)',
+          lineDash: ['5px', '5px'],
+          lineWidth: '2px',
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
+chart.render();

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

@@ -29,6 +29,11 @@
       "title": "lottie标注",
       "screenshot": "https://mdn.alipayobjects.com/huamei_khb4xj/afts/img/A*T8H2SICWEy0AAAAAAAAAAAAADq2NAQ/original"
     },
+    {
+      "filename": "linestep.jsx",
+      "title": "Polyline标注",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/Db3kGGhW89ADbLVyjW6Tz/7DEB9227_1F17_4254_8B81_629805F52B98.png"
+    },
     {
       "filename": "custom.jsx",
       "title": "自定义",