Appearance
柱状图总览（HarmonyOS / ArkTS）
摘要：HarmonyCharts 柱状图覆盖单组/分组/堆叠/正负值等常用形态，支持轴联动、Tooltip/Legend/dataZoom 等交互，适用于鸿蒙应用中的分类对比与结构分析。
建议阅读顺序：
- 快速开始（完整可运行页面）
- 完整示例配置（直接作为模板）
- 默认值（精确工程默认）
- API Reference（完整参数表）
功能说明（What）
柱状图用于分类对比与数值分布展示，支持：
- 单系列 / 多系列并列
- 堆叠柱（结构占比）
- 正负值（涨跌/盈亏）
- Tooltip / Legend / dataZoom / markLine 等常用交互
应用场景（When）
适用：
- 分类数据对比（如不同渠道、不同区域）
- 分组/堆叠对比（如预算 vs 实际）
- 正负值变化对比（盈亏/涨跌）
不适合：
- 强连续趋势展示（更适合折线）
- 类别非常多且标签拥挤的场景
快速开始（入口）
完整示例配置（整页可用）
适合直接当模板，复制后只改数据与颜色即可。
ts
const option: HarmonyChartsOption = {
grid: { top: 24, left: 16, right: 16, bottom: 28, containLabel: true },
tooltip: { show: true, trigger: 'axis', confine: true },
legend: { show: true },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
boundaryGap: true,
axisLabel: { show: true, margin: 8 },
axisTick: { show: true, length: 6 },
axisLine: { show: true }
},
yAxis: {
type: 'value',
includeZero: true,
axisLabel: { show: true, margin: 8 },
splitLine: { show: true }
},
series: [
{
type: 'bar',
name: 'Sales',
data: [120, 200, 150, 80, 70],
color: '#5470C6',
label: { show: true, position: 'top' }
},
{
type: 'bar',
name: 'Profit',
data: [60, 140, 100, 50, 90],
color: '#91CC75',
label: { show: true, position: 'top' }
}
]
};示例图
默认值（精确工程默认）
默认值来自 BaseBar 组件。如果你使用 BaseBar 而不传配置，就会得到这些默认表现。
BaseBar 默认 option
| 项 | 默认值 |
|---|---|
| categories | ['Mon','Tue','Wed','Thu','Fri'] |
| grid | { top: 32, left: 16, right: 16, bottom: 28 } |
| tooltip | { show: true, trigger: 'axis', confine: true } |
| legend | { show: true } |
| xAxis.type | 'category' |
| xAxis.boundaryGap | true |
| xAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#8C8C8C' } } |
| xAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#D0D4DA' } } |
| xAxis.splitLine | { show: true, lineStyle: { color: '#F0F2F5', dash: [3,3], width: 1 } } |
| xAxis.axisLabel | { show: true, color: '#4E5969', fontSize: 12, margin: 8 } |
| yAxis.type | 'value' |
| yAxis.includeZero | true |
| yAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#8C8C8C' } } |
| yAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#D0D4DA' } } |
| yAxis.splitLine | { show: true, lineStyle: { color: '#F0F2F5', dash: [3,3], width: 1 } } |
| yAxis.axisLabel | { show: true, color: '#4E5969', fontSize: 12, margin: 8 } |
BaseBar 默认 series（未传 series 时）
| 项 | 默认值 |
|---|---|
| type | 'bar' |
| name | 'Series A' |
| data | [120, 200, 150, 80, 70] |
| color | '#5B8FF9' |
| minHeightZero | true |
| label | { show: true, position: 'top', color: '#4E5969', fontSize: 11 } |
BaseBar 默认 series（传入 series 但未指定字段）
| 项 | 默认值 |
|---|---|
| color | 主题色板（按序：#5470C6, #91CC75, #FAC858, #EE6666, #73C0DE, #3BA272, #FC8452, #9A60B4, #EA7CCC） |
| minHeightZero | true |
| label | { show: true, position: 'top', color: '#4E5969', fontSize: 11 } |