---
title: 基础饼图
order: 1
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}
          angleField="value"
          colorField="type"
          formatValue={(data) => `${data.percent * 100}%`}
          radius={0.65}
          style={{ width: '460px', height: '460px',margin:'0 auto' }}
        />
      </div>
    </>
  );
};

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