---
title: 基础环形图
order: 4
docGenIncludes:
  - src/components/YwPieChartProps/index.tsx
---

```jsx
import React, { Component, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwPieChart } from '@ywfe/yw-charts';

const App = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];

  const meta = {
    value: {
      formatter: (v) => `${v}人`,
    }
  };

  useEffect(() => {
    //
  }, []);

  return (
    <>
      <div className="com-chartbox">
        <YwPieChart
          className="pie-chart"
          data={data}
          meta={meta}
          donut={true}
          angleField="value"
          colorField="type"
          radius={0.65}
          legend={{
            position: 'right',
          }}
          style={{ width: '520px', height: '520px',margin:'0 auto' }}
          originalProps={{
            innerRadius: 0.6,
            statistic: {
              title: {
                formatter: (v) => '合计',
                style: {
                  fontSize: '14px',
                  color: '#8c8c8c',
                },
              },
              content: {
                formatter: (v, row) => {
                  const sum = row.reduce((total, cur) => total + cur.value, 0);
                  return `${sum}个`;
                },
                style: {
                  fontSize: '24px',
                  color: '#8c8c8c',
                },
              },
            },
          }}
        />
      </div>
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```