---
title: 环图统计指标
order: 5
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: 30,
    },
    {
      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.8}
          legend={{
            position: 'right',
          }}
          // 是否显示统计指标
          hasStatistic={true}
          // 统计指标标题
          statisticTitle={(datum) => {
            console.log('statisticTitle=>',datum);
            // 当有滑入某个区块时显示该区块的type，否则显示合计
            return datum ? datum.type : '合计';
          }}
          // 统计指标内容
          statisticContent={(datum,data) => {
            console.log('statisticContent=>',datum,data);
            // 当有滑入某个区块时显示该区块的value，否则显示所有区块的value总和
            const retData = datum ? `¥ ${datum.value}` : `¥ ${data.reduce((r, d) => r + d.value, 0)}`
            return retData;
          }}
          style={{ width: '520px', height: '520px',margin:'0 auto' }}
          originalProps={{
            innerRadius: 0.6,
          }}
        />
      </div>
    </>
  );
};

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