From 676bc8ca658628b81cd87243b33974c4b0bcb168 Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:49:14 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=AE=98=E7=BD=91=E5=A2=9E=E5=8A=A0Pi?=
 =?UTF-8?q?ctorial=E7=BB=84=E4=BB=B6=E4=BE=8B=E5=AD=90=20(#2016)?=
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/examples/column/column/demo/meta.json    |   5 +
 .../examples/column/column/demo/pictorial.jsx | 101 ++++++++++++++++++
 2 files changed, 106 insertions(+)
 create mode 100644 site/examples/column/column/demo/pictorial.jsx

diff --git a/site/examples/column/column/demo/meta.json b/site/examples/column/column/demo/meta.json
index 8ebef6e35..6b1f13b6e 100644
--- a/site/examples/column/column/demo/meta.json
+++ b/site/examples/column/column/demo/meta.json
@@ -9,6 +9,11 @@
       "title": "基础柱状图",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_4f0ff1/afts/img/A*vDAjTLpn6YwAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "pictorial.jsx",
+      "title": "自定义柱状图",
+      "screenshot": "https://gw.alipayobjects.com/zos/finxbff/compress-tinypng/mh69VTTqfLkAFVbn4TMbD/6551953C_5493_46DD_BDA5_9A6B424E569F.png"
+    },
     {
       "filename": "selection.jsx",
       "title": "柱状图选中",
diff --git a/site/examples/column/column/demo/pictorial.jsx b/site/examples/column/column/demo/pictorial.jsx
new file mode 100644
index 000000000..eb6572f23
--- /dev/null
+++ b/site/examples/column/column/demo/pictorial.jsx
@@ -0,0 +1,101 @@
+/** @jsx jsx */
+import { Axis, Canvas, Chart, jsx, Line, Pictorial, Point } from '@antv/f2';
+
+const data = [
+  {
+    year: '5月',
+    sales: 38,
+    rate: -0.16,
+  },
+  {
+    year: '6月',
+    sales: 52,
+    rate: -0.14,
+  },
+  {
+    year: '7月',
+    sales: 61,
+    rate: -0.21,
+  },
+  {
+    year: '8月',
+    sales: 85,
+    rate: 0.36,
+  },
+  {
+    year: '9月',
+    sales: 48,
+    rate: 0.16,
+  },
+  {
+    year: '10月',
+    sales: 38,
+    rate: -0.2,
+  },
+  {
+    year: '11月',
+    sales: 38,
+    rate: -0.36,
+  },
+  {
+    year: '12月',
+    sales: 38,
+    rate: 0.16,
+  },
+];
+
+const context = document.getElementById('container').getContext('2d');
+const { props } = (
+  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
+    <Chart
+      data={data}
+      scale={{
+        sales: {
+          tickCount: 5,
+          min: 0,
+        },
+        rate: {
+          max: 1,
+          // min: 0,
+        },
+      }}
+    >
+      <Axis field="year" />
+      <Axis field="sales" />
+      <Axis field="rate" position="right" />
+      <Pictorial
+        x="year"
+        y="rate"
+        symbol={({ xMin, xMax, yMin, yMax, rate }) => {
+          return (
+            <image
+              style={{
+                x: xMin,
+                y: yMin,
+                width: xMax - xMin,
+                height: yMax - yMin,
+                src:
+                  rate > 0
+                    ? 'https://mdn.alipayobjects.com/fin_xbff/afts/img/A*mlaNSpbXMwkAAAAAAAAAAAAADRx5AQ/original'
+                    : 'https://mdn.alipayobjects.com/fin_xbff/afts/img/A*xBADRJZ4TtoAAAAAAAAAAAAADRx5AQ/original',
+              }}
+            />
+          );
+        }}
+      />
+      <Line x="year" y="sales" shape="smooth" color="rgb(200,135,145)" />
+      <Point
+        x="year"
+        y="sales"
+        style={{
+          fill: 'white',
+          stroke: 'rgb(200,135,145)',
+          strokeWidth: '3px',
+        }}
+      />
+    </Chart>
+  </Canvas>
+);
+
+const chart = new Canvas(props);
+chart.render();