fix: legend 无用参数删除 (#1483)

packages/f2/src/components/legend/legendView.tsx

@@ -39,19 +39,18 @@ export default (props) => {
     marker = 'circle', // 图例标记默认为 circle
     nameStyle,
     valueStyle,
+    valuePrefix
   } = props;
 
-  const formatValue = (value) => {
-    if (isFunction(itemFormatter)) {
-      return `: ${itemFormatter(value)}`;
-    }
-    return `: ${value}`;
+  const formatValue = (value, valuePrefix = ": ") => {
+    return `${valuePrefix}${value}`;
   };
 
   return (
     <group style={style}>
       {items.map((item) => {
-        const { color, name, value, filtered } = item;
+        const { color, name, value, filtered, tickValue } = item;
+        const valueText = isFunction(itemFormatter) ? itemFormatter(value, tickValue) : value;
         return (
           <group
             className="legend-item"
@@ -73,11 +72,11 @@ export default (props) => {
                 ...nameStyle,
               }}
             />
-            {value ? (
+            { valueText ? (
               <text
                 attrs={{
                   fill: '#808080',
-                  text: formatValue(value),
+                  text: formatValue(valueText, valuePrefix),
                   ...valueStyle,
                 }}
               />

packages/f2/src/components/legend/withLegend.tsx

@@ -2,7 +2,7 @@ import { jsx } from '../../jsx';
 import { renderShape } from '../../base/diff';
 import Component from '../../base/component';
 import Chart from '../../chart';
-import { find } from '@antv/util';
+import { find, isFunction } from '@antv/util';
 import { getElementsByClassName, isInBBox } from '../../util';
 import { Style, TextAttrs } from '../../types';
 
@@ -25,10 +25,6 @@ interface LegendItem {
   marker?: string;
 }
 export interface LegendProps {
-  /**
-   * 代表图例对应的数据字段名。
-   */
-  field?: string;
   /**
    * 图表。
    */
@@ -52,7 +48,7 @@ export interface LegendProps {
   /**
    * 回调函数，用于格式化图例每项的文本显示。
    */
-  itemFormatter?: (value: string) => string;
+  itemFormatter?: (value: string, name: string) => string;
   /**
    * 图例项列表。
    */
@@ -73,6 +69,10 @@ export interface LegendProps {
    * 用于设置图例项的文本样式
    */
   valueStyle?: TextAttrs;
+  /**
+   * value展示文案的前缀
+   */
+   valuePrefix?: string;
   /**
    * 是否可点击
    */
@@ -105,7 +105,7 @@ export default (View) => {
         const { tickValue } = item;
         return {
           ...item,
-          filtered: filtered[tickValue],
+          filtered: filtered[tickValue]
         };
       });
     }

packages/f2/test/components/interval/example/doughnut.test.tsx

@@ -23,6 +23,12 @@ describe('环形图', () => {
         a: '1',
       },
     ];
+
+    const map = {};
+    data.forEach(function(obj) {
+      map[obj.name] = obj.percent + '%';
+    });
+
     const context = createContext('基础环形图');
     const chartRef = { current: null };
     const { type, props } = (
@@ -47,6 +53,13 @@ describe('环形图', () => {
               range: ['#FE5D4D', '#3BA4FF', '#737DDE'],
             }}
           />
+          <Legend
+            position="right"
+            itemFormatter={(value, name) => {
+              return map[name];
+            }}
+            valuePrefix="      "
+          />
         </Chart>
       </Canvas>
     );
@@ -184,8 +197,8 @@ describe('环形图', () => {
 
   it('基础环形图 - 数值的和刚好等于nice处理后的最后一个tick值', async () => {
     const data = [
-      { "type": "fundType", "name": "偏债型", "percent": 3 },
-      { "type": "fundType", "name": "偏股型", "percent": 97 }
+      { type: 'fundType', name: '偏债型', percent: 3 },
+      { type: 'fundType', name: '偏股型', percent: 97 },
     ];
     const context = createContext('基础环形图');
     const chartRef = { current: null };