你正在查看 v1.0.1 文档。切换到最新版请访问：/

环形饼图

功能说明（What）

环形饼图通过中空结构保留中心信息区域，适合与指标卡结合展示。

应用场景（When）

• 结构占比 + 中央指标
• 总量/目标对比展示

快速上手（How - Quick）

import { BasePie } from '@ymhc/harmonycharts';
import type { BasePieConfig } from '@ymhc/harmonycharts';

@Entry
struct Index {
  @Prop basePieConfig: BasePieConfig = {
    data: [
      { name: 'A', value: 40 },
      { name: 'B', value: 32 },
      { name: 'C', value: 28 }
    ],
    radius: ['40%', '70%'],
    tooltip: { show: true, trigger: 'item', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BasePie({ config: this.basePieConfig, chartHeight: 220 })
    }
  }
}

运行结果

完整示例配置（整页可用）

const option: HarmonyChartsOption = {
  tooltip: { show: true, trigger: 'item', confine: true },
  legend: { show: true },
  series: [
    {
      type: 'pie',
      name: 'Donut',
      radius: ['40%', '70%'],
      data: [
        { name: 'A', value: 40 },
        { name: 'B', value: 32 },
        { name: 'C', value: 28 }
      ]
    }
  ]
};

默认值（精确工程默认）

该页面默认值与 BasePie 一致，详见总览页「默认值（精确工程默认）」。

配置项说明（API）

参数	说明	类型	默认值
radius	内外半径	[number | string, number | string]	-
center	圆心	[number | string, number | string]	['50%','50%']

事件与交互（Events）

chart.on('click', (params) => {
  // params.seriesType === 'pie'
});

高级用法（Advanced）

• 中心区域自定义指标

注意事项 / 设计说明（Notes）

• 内外半径差值越大，环越粗。