Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
excel2010饼图如何显示数据和百分比_图表生成器app,希望能够帮助你!!!。

效果图

百分比

官网API：https://www.bizcharts.net/product/BizCharts4/category/62/page/81#itemvalue
itemValue是Legend设置配置图例value的属性，我们可以再formatter函数中设置我们想要显示的值。

打印formatter中(text: string, item: ListItem, index: number)对应的值，我们可以用index获取当前对应的value值const tarValue = chartList[index].value;

itemValue={ 
   { 
    formatter: (_text: string, _item: any, index: number) => { 
    console.log(_item,'_item--',_text, index) const data = chartList; let total = 0; const tarValue = chartList[index].value; for (let i = 0; i < data.length; i++) { 
    total += data[i].value; } const p = Math.round((tarValue / total) * 100); return `${ 
     p}%`; }, style: { 
    fill: '#1A1A1A', }, }} 

完整代码

import React from 'react'; import { 
    Chart, Coordinate, Tooltip, Axis, Interval, Annotation, Legend } from 'bizcharts'; type IChartsProps = { 
    store: any; }; const chartList = [ { 
    "type": "A", "value": 1 }, { 
    "type": "B", "value": 20 }, { 
    "type": "C", "value": 4 }, { 
    "type": "D", "value": 8 }, ]; const Charts: React.FC<IChartsProps> = ({ 
     store }) => ( <div> <div style={ 
   { 
    textAlign: 'center' }}> <Chart height={ 
   300} padding={ 
   [0, 150, 0, 0]} data={ 
   chartList} autoFit> <Coordinate type="theta" radius={ 
   0.65} innerRadius={ 
   0.77} /> <Tooltip showTitle={ 
   false} /> <Axis visible={ 
   false} /> <Legend position="right" offsetX={ 
   -80} itemHeight={ 
   18} itemName={ 
   { 
    formatter: (text: string) => `${ 
     text}类`, style: { 
    fill: '#8D8E99', }, }} itemValue={ 
   { 
    formatter: (_text: string, _item: any, index: number) => { 
    // 百分比显示 const data = chartList; let total = 0; const tarValue = chartList[index].value; for (let i = 0; i < data.length; i++) { 
    total += data[i].value; } const p = Math.round((tarValue / total) * 100); return `${ 
     p}%`; }, style: { 
    fill: '#1A1A1A', }, }} /> <Annotation.Text position={ 
   ['50%', '46%']} content={ 
   chartList.map(item => item.value).reduce((a, b) => a + b, 0)} style={ 
   { 
    lineHeight: 40, fontSize: 22, fontWeight: 700, fill: '#1A1A1A', textAlign: 'center', }} /> <Annotation.Text position={ 
   ['50%', '57%']} content="数量" style={ 
   { 
    lineHeight: 20, fontSize: 12, fill: '#8D8E99', textAlign: 'center', }} /> <Interval position="value" adjust="stack" color="type" style={ 
   { 
    lineWidth: 1, stroke: '#fff', }} /> </Chart> </div> </div> ); export default Charts; 

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。