Appearance
饼图总览(HarmonyOS / ArkTS)
摘要:HarmonyCharts 饼图面向占比与结构展示,提供基础/玫瑰/环形等变种,适合鸿蒙应用中的构成分析与对比场景。
建议阅读顺序:
- 快速开始(完整可运行页面)
- 完整示例配置(直接作为模板)
- 默认值(精确工程默认)
- API Reference(完整参数表)
功能说明(What)
饼图用于展示整体占比与结构构成,适用于占比、分布与结构对比场景。
应用场景(When)
- 占比结构展示(如预算分布)
- 类别构成对比
- 同一时刻的比例拆分
不适合:
- 强连续趋势(更适合折线)
- 类别非常多且标签密集的场景
快速开始(入口)
完整示例配置(整页可用)
ts
const option: HarmonyChartsOption = {
tooltip: { show: true, trigger: 'item', confine: true },
legend: { show: true },
series: [{
type: 'pie',
name: 'Pie',
radius: '60%',
center: ['50%', '50%'],
label: { show: true, position: 'inside', fontSize: 11 },
data: [
{ name: 'A', value: 40 },
{ name: 'B', value: 32 },
{ name: 'C', value: 28 }
]
}]
};示例图
默认值(精确工程默认)
默认值来自 BasePie 组件。
BasePie 默认 option(有数据时)
| 项 | 默认值 |
|---|---|
| series[0].type | 'pie' |
| series[0].name | 'Pie' |
| series[0].radius | '60%' |
| series[0].center | ['50%','50%'] |
| series[0].label | { show: true, position: 'inside', fontSize: 11 } |
| series[0].label.color | inside -> '#FFFFFF' / outside -> '#303133' |
| series[0].labelLine | position: 'outside' 时默认 { show: true } |
| series[0].selectedMode | 'single' |
| tooltip | { show: true, trigger: 'item', confine: true } |
| legend | { show: true } |
BasePie 默认 data(未传 data 时)
| 项 | 默认值 |
|---|---|
| data | [{ name:'Category A', value:40 }, { name:'Category B', value:32 }, { name:'Category C', value:28 }] |
| itemStyle.color | 主题色板(按序:#5B8FF9, #5AD8A6, #F6BD16) |
BasePie 空数据时(empty)
| 项 | 默认值 |
|---|---|
| series[0].name | 'Empty' |
| series[0].data | [{ value: 1 }] |
| series[0].itemStyle | { color: '#D9D9D9' } |
| series[0].label / labelLine | { show: false } |
| tooltip | { show: false } |
| legend | { show: false } |