bizcharts饼图Legend显示数值和百分比

最新推荐文章于 2024-08-13 08:48:42 发布

MYG_G

最新推荐文章于 2024-08-13 08:48:42 发布

阅读量2.5k

点赞数 1

分类专栏： react 文章标签：前端 javascript bizcharts

本文链接：https://blog.csdn.net/qq_40657321/article/details/121969593

版权

react 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文档展示了如何在BizCharts库中利用Legend的itemValue属性和formatter函数，来格式化饼图图例，使其显示每个类别的百分比。通过计算总和并应用Math.round函数，可以精确地呈现每个值相对于总和的比例。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

百分比

官网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;