From eb246560c99d6a9b6bad200f02f7062b79503e06 Mon Sep 17 00:00:00 2001
From: Acery <acery.ycy@antgroup.com>
Date: Thu, 10 Mar 2022 14:21:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20legend=20=E6=94=AF=E6=8C=81=20nameStyle?=
 =?UTF-8?q?=20=E5=92=8C=20valueStyle=20(#1387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../f2/src/components/legend/legendView.tsx   |   4 +++
 .../f2/src/components/legend/withLegend.tsx   |  10 +++++-
 ...256\276\347\275\256-name-style-1-snap.png" | Bin 0 -> 4734 bytes
 .../f2/test/components/legend/legend.test.tsx |  32 +++++++++++++++++-
 4 files changed, 44 insertions(+), 2 deletions(-)
 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\256\276\347\275\256-name-style-1-snap.png"

diff --git a/packages/f2/src/components/legend/legendView.tsx b/packages/f2/src/components/legend/legendView.tsx
index 7f2bcf600..cbe073c09 100644
--- a/packages/f2/src/components/legend/legendView.tsx
+++ b/packages/f2/src/components/legend/legendView.tsx
@@ -37,6 +37,8 @@ export default (props) => {
     itemFormatter,
     style,
     marker = 'circle', // 图例标记默认为 circle
+    nameStyle,
+    valueStyle,
   } = props;
 
   const formatValue = (value) => {
@@ -68,6 +70,7 @@ export default (props) => {
               attrs={{
                 fill: filtered ? '#bfbfbf' : '#808080',
                 text: name,
+                ...nameStyle,
               }}
             />
             {value ? (
@@ -75,6 +78,7 @@ export default (props) => {
                 attrs={{
                   fill: '#808080',
                   text: formatValue(value),
+                  ...valueStyle,
                 }}
               />
             ) : null}
diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
index 003dc9d76..e39d1dad8 100644
--- a/packages/f2/src/components/legend/withLegend.tsx
+++ b/packages/f2/src/components/legend/withLegend.tsx
@@ -4,7 +4,7 @@ import Component from '../../base/component';
 import Chart from '../../chart';
 import { find } from '@antv/util';
 import { getElementsByClassName, isInBBox } from '../../util';
-import { Style } from '../../types';
+import { Style, TextAttrs } from '../../types';
 
 interface LegendItem {
   /**
@@ -65,6 +65,14 @@ export interface LegendProps {
    * 图例标记。
    */
   marker?: 'circle' | 'square';
+  /**
+   * 用于设置图例项的文本样式
+   */
+  nameStyle?: TextAttrs;
+  /**
+   * 用于设置图例项的文本样式
+   */
+  valueStyle?: TextAttrs;
 }
 
 export default (View) => {
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\256\276\347\275\256-name-style-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\256\276\347\275\256-name-style-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..788adae5ec329535b4b4d8f6888ced0b8b538781
GIT binary patch
literal 4734
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

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 59b6949cf..c19b59f34 100644
--- a/packages/f2/test/components/legend/legend.test.tsx
+++ b/packages/f2/test/components/legend/legend.test.tsx
@@ -1,5 +1,5 @@
 import { clone, values } from '@antv/util';
-import { jsx, Component, Canvas, Chart, Tooltip, Geometry } from '../../../src';
+import { jsx, Component, Canvas, Chart, Tooltip, Geometry, Interval } from '../../../src';
 import { Line, Axis, Legend } from '../../../src/components';
 import { createContext, delay } from '../../util';
 
@@ -153,5 +153,35 @@ describe('图例', () => {
       await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
+
+    it('设置 nameStyle', async () => {
+      const data = [
+        { genre: 'Sports', sold: 275 },
+        { genre: 'Strategy', sold: 115 },
+        { genre: 'Action', sold: 120 },
+      ];
+      const context = createContext('设置 nameStyle', {
+        height: '100px',
+      });
+      const { props } = (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart data={data}>
+            <Legend
+              position="left"
+              nameStyle={{
+                fontSize: '40px',
+                fill: 'red',
+              }}
+            />
+            <Geometry x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      canvas.render();
+
+      await delay(1000);
+      expect(context).toMatchImageSnapshot();
+    });
   });
 });