饼状图，图表使用已经封装好的Echarts-For-React。用饼图表示人员的抢红包结果，并且实现按钮事件，每次点击展示本次抢红包的分配结果。

import { Component } from 'react';
import { Button } from 'antd';
import ReactCharts from 'echarts-for-react';
type AppProps = {};
class Pie extends Component {
  constructor(props: AppProps) {
    super(props);
    //与render函数的onClick绑定，必须绑定，不然js找不到这两个函数
    this.onClicked = this.onClicked.bind(this);
  }
  //点击事件
  onClicked() {
    const arr = [];
    for (let i = 0; i < this.state.data.length; i++) {
      const num = Math.round(Math.random() * 100);
      arr[i] = num;
      // console.log(this.state.data[i]);
      this.Option();
    }
    this.setState({ data: arr });
  }

  state = {
    data: [
      {

        value: 36,
      },
      {
        value: 25,
      },
      {

        value: 1,
      },
      {

        value: 10,
      },
      {

        value: 65,
      },
    ],
  };
  Option = () => {
    return {
      tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b} : {c} (元)',
      },
      legend: {
        // orient: 'vertical',
        // left: 'left',
      },
      series: [
        {
          name: '抢红包',
          type: 'pie',
          radius: '50%',
          data: [
            { name: '迪丽热巴', value: this.state.data[0] },
            { name: '刘亦菲', value: this.state.data[1] },
            { name: '唐嫣', value: this.state.data[2] },
            { name: '杨幂', value: this.state.data[3] },
            { name: '克拉拉', value: this.state.data[4] },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
  };

  render() {
    return (
      <div>
        <ReactCharts option={this.Option()} />
        <Button onClick={this.onClicked} style={{ left: '445px' }}>
          开始抢红包
        </Button>
      </div>
    );
  }
}
export default Pie;