From 80b827e5c9080ce27ebeda1438601cfdac25a50d Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:22:01 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E5=AE=98=E7=BD=91po?=
 =?UTF-8?q?lylineGuide=E4=BE=8B=E5=AD=90=20(#2018)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
---
 site/.dumirc.ts                               |  1 +
 .../component/guide/demo/linestep.jsx         | 57 +++++++++++++++++++
 site/examples/component/guide/demo/meta.json  |  5 ++
 3 files changed, 63 insertions(+)
 create mode 100644 site/examples/component/guide/demo/linestep.jsx

diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index 5e25bc7d0..8c0b5391e 100644
--- a/site/.dumirc.ts
+++ b/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: {},
 });
diff --git a/site/examples/component/guide/demo/linestep.jsx b/site/examples/component/guide/demo/linestep.jsx
new file mode 100644
index 000000000..9caf78add
--- /dev/null
+++ b/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();
diff --git a/site/examples/component/guide/demo/meta.json b/site/examples/component/guide/demo/meta.json
index ccf9ac38a..0cd33160d 100644
--- a/site/examples/component/guide/demo/meta.json
+++ b/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": "自定义",