图表 - 饼图演示

此页面包含饼图的演示。

TwoLevelPieChart

StraightAnglePieChart

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
/>

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
/>

按 Enter 开始编辑

TwoSimplePieChart

PieChartWithCustomizedLabel

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

按 Enter 开始编辑

PieChartWithPaddingAngle

PieChartWithCenterLabel

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

按 Enter 开始编辑

OnSeriesItemClick

item id: undefined

item identifier:
  undefined

API

请参阅下面的文档，以获得此处提及的组件的所有 props 和类的完整参考。