@@ -37,8 +37,8 @@ interface LegendProps {
3737 height? : number | string ;
3838 /** legend 和图表内容的间距 */
3939 margin? : number | string ;
40- /** 格式化图例每项的文本显示 */
41- itemFormatter? : (value : any , name : string ) => string ;
40+ /** 格式化图例每项的值显示 */
41+ itemFormatter? : (value : any , tickValue : any ) => string ;
4242 /** 图例项列表 */
4343 items? : LegendItem [];
4444 /** 图例样式 */
@@ -114,7 +114,7 @@ const data = [
114114| 属性 | 类型 | 默认值 | 说明 |
115115| ------| ------| --------| ------|
116116| ` items ` | ` LegendItem[] ` | - | 自定义图例项列表 |
117- | ` itemFormatter ` | ` (value, name ) => string ` | - | 格式化图例每项的文本显示 |
117+ | ` itemFormatter ` | ` (value, tickValue ) => string ` | - | 格式化图例每项的值显示。第一个参数为图例项的值,第二个参数为原始分类值 |
118118
119119### 样式配置
120120
@@ -203,6 +203,43 @@ const data = [
203203/ >
204204```
205205
206+ ### 使用 itemFormatter 格式化自动生成的图例
207+
208+ 当不传 ` items ` 属性时,F2 会自动从图表的图形属性映射生成图例。此时可以使用 ` itemFormatter ` 对图例值进行格式化:
209+
210+ ``` jsx
211+ // 数据(环形图示例)
212+ const data = [
213+ { name: ' 股票类' , percent: 83.59 , a: ' 1' },
214+ { name: ' 债券类' , percent: 2.17 , a: ' 1' },
215+ { name: ' 现金类' , percent: 14.24 , a: ' 1' },
216+ ];
217+
218+ // 创建分类名到百分比的查找表
219+ const nameToPercentMap = Object .fromEntries (
220+ data .map (({ name, percent }) => [name, percent])
221+ );
222+
223+ < Chart
224+ data= {data}
225+ coord= {{
226+ type: ' polar' ,
227+ transposed: true ,
228+ }}
229+ >
230+ < Interval x= " a" y= " percent" adjust= " stack" color= " name" / >
231+ < Legend
232+ position= " bottom"
233+ itemFormatter= {(value , tickValue ) => {
234+ // value: undefined(自动生成的图例没有值)
235+ // tickValue: 分类名称,如 '股票类'、'债券类'
236+ // 格式化为百分比形式
237+ return nameToPercentMap[tickValue] + ' %' ;
238+ }}
239+ / >
240+ < / Chart>
241+ ```
242+
206243### 自定义图例项
207244
208245``` jsx
0 commit comments