开发预览更新于 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%

<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>

<CfStackedBar100 ... />

趋势对比

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

背景

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%

<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>

<CfStackedBar100 segments={seg2024} />
<CfStackedBar100 segments={seg2025} />

API

属性	类型	默认值	说明
`segments`	`StackedBar100Series[]`	`—`	{ name, value, colorIndex? }[]
`height`	`number`	`24`
`showLegend`	`boolean`	`true`