---
title: 几分之一圆
order: 2
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={1}
          legend={false}
          style={{ width: '520px', height: '520px',margin:'0 auto' }}
          originalProps={{
            // 设置圆弧起始角度
            startAngle: Math.PI,
            // 1.5为 4分之一圆 2为半圆
            endAngle: Math.PI * 2,
            pieStyle: {
              lineWidth: 0,
            },
            // 在每块扇形中间显示对应的类型
            label: {
              type: 'inner',
              offset: '-8%',
              // 数据对应angleField 和 colorField 字段
              // content: `${name}-${value为每块扇形的值}`
              formatter: ( item) => {
                // 除percent外, 另外数据对应angleField 和 colorField 字段
                const { type, percent } = item;
                return `${type}: ${(percent*100).toFixed(0)}%`;
              },
              style: {
                fontSize: 14,
              },
            },
          }}
        />
      </div>
    </>
  );
};

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