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

堆叠柱状图（组成结构）

功能说明（What）

堆叠柱状图用于展示总量与组成结构，适合预算/实际、多指标组成。

应用场景（When）

• 总量与结构同时展示
• 多系列合并对比

快速上手（How - Quick）

import { BaseBar } from '@ymhc/harmonycharts'; // 引入基础柱状图组件
import type { BaseBarConfig } from '@ymhc/harmonycharts'; // 引入柱状图配置类型

@Entry // 入口页面
struct Index { // 页面结构体
  @Prop baseBarConfig: BaseBarConfig = { // 组件配置（可响应）
    categories: ['Mon', 'Tue', 'Wed'], // X 轴类目
    series: [ // 堆叠系列
      { name: 'A', stack: 'total', data: [10, 20, 30] }, // 堆叠组 A
      { name: 'B', stack: 'total', data: [5, 15, 25] } // 堆叠组 B
    ],
    grid: { top: 24, left: 16, right: 16, bottom: 28 }, // 画布边距
    tooltip: { show: true, trigger: 'axis', confine: true }, // 轴触发提示
    legend: { show: true } // 图例开关
  }; // 配置结束

  build() { // 页面构建
    Column() { // 纵向布局
      BaseBar({ config: this.baseBarConfig, chartHeight: 220 }) // 渲染柱状图
    } // 布局结束
  } // 构建结束
}

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

const option: HarmonyChartsOption = {
  grid: { top: 24, left: 16, right: 16, bottom: 28 },
  tooltip: { show: true, trigger: 'axis', confine: true },
  legend: { show: true },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value', includeZero: true },
  series: [
    { type: 'bar', name: 'A', stack: 'total', data: [10, 20, 30] },
    { type: 'bar', name: 'B', stack: 'total', data: [5, 15, 25] }
  ]
};

示例图

配置项说明（API）

参数	说明	类型	默认值
stack	堆叠名称	string	未设置

事件与交互（Events）

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

高级用法（Advanced）

• 配合 markLine 标注目标线
• 配合 tooltip 展示结构占比

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

• 堆叠时建议统一颜色体系，便于识别。