From a91f1b18a29d6154eb0fcae7af0997e12dd7bfea Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:53:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=87=AA=E5=AE=9A=E4=B9=89marker=20(#20?=
 =?UTF-8?q?21)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 兵人 <xuezhiqiang.xzq@antgroup.com>
---
 .../f2/src/components/legend/legendView.tsx   |   2 +-
 ...6\232\344\271\211-items-marker-1-snap.png" | Bin 0 -> 4098 bytes
 .../f2/test/components/legend/legend.test.tsx |  43 ++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 "packages/f2/test/components/legend/__image_snapshots__/legend-test-tsx-\345\233\276\344\276\213-\345\233\276\344\276\213\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211-items-marker-1-snap.png"

diff --git a/packages/f2/src/components/legend/legendView.tsx b/packages/f2/src/components/legend/legendView.tsx
index f98c59717..e8f8c0840 100644
--- a/packages/f2/src/components/legend/legendView.tsx
+++ b/packages/f2/src/components/legend/legendView.tsx
@@ -88,7 +88,7 @@ export default (props) => {
             data-item={item}
             onClick={onClick}
           >
-            {Marker({ color: filtered ? '#bfbfbf' : color, type: marker })}
+            {Marker({ color: filtered ? '#bfbfbf' : color, type: item?.marker || marker })}
             {/* <Marker color={filtered ? '#bfbfbf' : color} type={marker} /> */}
             <text
               attrs={{
diff --git "a/packages/f2/test/components/legend/__image_snapshots__/legend-test-tsx-\345\233\276\344\276\213-\345\233\276\344\276\213\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211-items-marker-1-snap.png" "b/packages/f2/test/components/legend/__image_snapshots__/legend-test-tsx-\345\233\276\344\276\213-\345\233\276\344\276\213\346\240\267\345\274\217-\350\207\252\345\256\232\344\271\211-items-marker-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f386c260eda1d0f6dbf9b64b0cd0068ccd95da12
GIT binary patch
literal 4098
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
O?E!rh8d<9281_H++O;(R

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/legend/legend.test.tsx b/packages/f2/test/components/legend/legend.test.tsx
index 61503b41e..b092b4d6b 100644
--- a/packages/f2/test/components/legend/legend.test.tsx
+++ b/packages/f2/test/components/legend/legend.test.tsx
@@ -317,6 +317,49 @@ describe('图例', () => {
       await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
+
+
+    it('自定义 items Marker', async () => {
+      const context = createContext('自定义 items Marker', {
+        height: '70px',
+      });
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart data={data}>
+            <Legend
+              style={{
+                justifyContent: 'flex-start',
+              }}
+              marker="line"
+              items={[
+                {
+                  color: 'blue',
+                  name: 'Sports',
+                  value: 0.1,
+                  marker: 'square'
+                },
+                {
+                  color: 'red',
+                  name: 'Strategy',
+                  value: 0.2,
+                },
+                {
+                  color: 'red',
+                  name: 'Action',
+                  value: 0.3,
+                },
+              ]}
+            />
+            <Geometry x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
   });
 
   describe('点击交互', () => {