开发预览更新于 2026-05-10

StackedBar100 100% 占比柱

横向 100% 堆叠柱，适合占比分布。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景视口

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

src/App.vue

<script setup lang="ts">
import { CfStackedBar100 } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfStackedBar100 :segments="segments" />
</template>

<script setup>
import { CfStackedBar100 } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfStackedBar100 :segments="segments" />
</template>

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfStackedBar100 segments={segments} />
    </>
  );
}

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfStackedBar100 segments={segments} />
    </>
  );
}

趋势对比

把多年份的占比柱叠在一起，能直观看出份额迁移。

背景视口

2024 浏览器份额

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

2025 浏览器份额

Chrome 62.0%
Safari 20.0%
Firefox 7.0%
Edge 8.0%
Other 3.0%

src/App.vue

<script setup lang="ts">
import { CfStackedBar100 } from '@chufix-design/vue';
const browsers2024 = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
const browsers2025 = [
  { name: 'Chrome', value: 62 },
  { name: 'Safari', value: 20 },
  { name: 'Firefox', value: 7 },
  { name: 'Edge', value: 8 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 14px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2024 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2024" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2025 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2025" />
    </div>
  </div>
</template>

<script setup>
import { CfStackedBar100 } from '@chufix-design/vue';
const browsers2024 = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
const browsers2025 = [
  { name: 'Chrome', value: 62 },
  { name: 'Safari', value: 20 },
  { name: 'Firefox', value: 7 },
  { name: 'Edge', value: 8 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 14px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2024 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2024" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-2); margin-bottom: 4px;">2025 浏览器份额</div>
      <CfStackedBar100 :segments="browsers2025" />
    </div>
  </div>
</template>

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const browsers2024 = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  const browsers2025 = [
    { name: 'Chrome', value: 62 },
    { name: 'Safari', value: 20 },
    { name: 'Firefox', value: 7 },
    { name: 'Edge', value: 8 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2024 浏览器份额</div>
            <CfStackedBar100 segments={browsers2024} />
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2025 浏览器份额</div>
            <CfStackedBar100 segments={browsers2025} />
          </div>
        </div>
    </>
  );
}

import { CfStackedBar100 } from '@chufix-design/react';

export default function Demo() {
  const browsers2024 = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  const browsers2025 = [
    { name: 'Chrome', value: 62 },
    { name: 'Safari', value: 20 },
    { name: 'Firefox', value: 7 },
    { name: 'Edge', value: 8 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2024 浏览器份额</div>
            <CfStackedBar100 segments={browsers2024} />
          </div>
          <div>
            <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 4 }}>2025 浏览器份额</div>
            <CfStackedBar100 segments={browsers2025} />
          </div>
        </div>
    </>
  );
}

API

属性	类型	默认值	说明
`segments`	`StackedBar100Series[]`	`—`	`{ name, value, colorIndex? }[]`
`width`	`number`	`480`	SVG 宽度
`height`	`number`	`24`	柱高度
`showLegend`	`boolean`	`true`	显示图例
`ariaLabel`	`string`	`—`	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`StackedBar100InteractionPayload`	鼠标进入某段时触发
`item-leave`	`onItemLeave`	`StackedBar100InteractionPayload`	鼠标离开某段时触发

类型

interface StackedBar100InteractionPayload {
  segment: StackedBar100Series;
  dataIndex: number;
  /** 该段占总和的比例（0..1）。 */
  pct: number;
  nativeEvent?: PointerEvent;
}