feat: legend 支持 nameStyle 和 valueStyle (#1387)

antvis · Mar 10, 2022 · eb24656 · eb24656
1 parent 0657c4f
commit eb24656
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git 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,13 +70,15 @@ export default (props) => {
               attrs={{
                 fill: filtered ? '#bfbfbf' : '#808080',
                 text: name,
+                ...nameStyle,
               }}
             />
             {value ? (
               <text
                 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
@@ -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/...nts/legend/__image_snapshots__/legend-test-tsx-图例-图例样式-设置-name-style-1-snap.png b/...nts/legend/__image_snapshots__/legend-test-tsx-图例-图例样式-设置-name-style-1-snap.png
diff --git 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();
+    });
   });
 });