你正在查看 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 },
      { name: 'D', value: 20 }
    ],
    roseType: 'radius',
    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: 'Rose',
      radius: ['25%', '70%'],
      roseType: 'radius',
      data: [
        { name: 'A', value: 40 },
        { name: 'B', value: 32 },
        { name: 'C', value: 28 },
        { name: 'D', value: 20 }
      ]
    }
  ]
};

默认值（精确工程默认）

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

配置项说明（API）

参数	说明	类型	默认值
roseType	玫瑰类型	'radius' | 'area'	-
minAngle	最小角度	number	-

事件与交互（Events）

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

高级用法（Advanced）

• 结合 labelLine 展示外侧标签

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

• 玫瑰图建议保持较少类别，避免视觉拥挤。