【避坑指“难”】React配置AntV G2 饼图

效果如下：

核心代码：

import {
    Chart } from '@antv/g2';
import React, {
    useEffect, useState } from 'react';

interface PieProps {
   
  dataList: any;
}
const Pie: React.FC<PieProps> = (props: any) => {
   
  const {
    dataList } = props;
  const data = dataList;
  const initial = () => {
   
    const chart = new Chart({
   
      container: 'container',
      autoFit: true,
      height: 100,
    });
    const innerView = chart.createView();
    chart.coordinate('theta', {
   
      radius: 0.75,
      innerRadius: 0.5,
    });
    chart.data(data);
    chart.scale('percent', {
   
      formatter: (val) => {
   
        val = val * 100 + '%';
        return val;
      },
    });

    chart.tooltip(false);
    // 声明