management/src/pages/Safe/Content/Info/Summary/pieChart.tsx

import React, { memo } from 'react'
import { Pie, G2  } from '@ant-design/charts'
import { PieConfig } from '@ant-design/charts/es/pie'
import './index.scss'
G2.registerTheme('custom-pie', {
  colors10: [ '#C7B8A1', '#9CA8B8', '#7B8B6F' ],
  colors29: [ '#DACAB1', '#ABB8CA', '#87987A' ]
})

type iPieChartProps = {
  type: string
  value: number
}[]
const DemoPie: React.FC<{data: iPieChartProps}> = ({ data }) => {

  const config:PieConfig = {
    appendPadding: 10,
    data,
    padding: 'auto',
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    renderer: 'canvas',
    innerRadius: 0.7,
    className: 'echarts-pie',
    label: {
      type: 'outer',
      autoRotate: false,
      content: '{name}: {percentage}'
    },
    statistic: {
      title: false,
      content: false
    },
    interactions: [
      { type: 'element-selected' },
      // { type: 'pie-legend-active' },
      { type: 'element-active' }
      // { type: 'pie-statistic-active' }
    ],
    legend: {
      layout: 'horizontal',
      position: 'top-left'
    },
    theme: 'custom-pie'
  }
  return <Pie {...config} />
}
export default memo(DemoPie)