Composition Chart

使用归一化柱形或堆叠面积比较不同分类的组成贡献。

适用场景

当界面需要以下行为时使用 Composition Chart：使用归一化柱形或堆叠面积比较不同分类的组成贡献。

安装

选择安装方式，用法示例将同步更新导入路径。

$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/.json

首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。

示例

Sep 5100%

Aug 1Sep 5

Illustrative acquisition channel shares data
Series	Aug 1	Aug 2	Aug 3	Aug 4	Aug 5	Aug 6	Aug 7	Aug 8	Aug 9	Aug 10	Aug 11	Aug 12	Aug 13	Aug 14	Aug 15	Aug 16	Aug 17	Aug 18	Aug 19	Aug 20	Aug 21	Aug 22	Aug 23	Aug 24	Aug 25	Aug 26	Aug 27	Aug 28	Aug 29	Aug 30	Aug 31	Sep 1	Sep 2	Sep 3	Sep 4	Sep 5
Organic search	5,520 visits	6,061 visits	5,259 visits	4,803 visits	5,600 visits	5,729 visits	4,776 visits	4,771 visits	5,603 visits	5,272 visits	4,403 visits	4,837 visits	5,472 visits	4,753 visits	4,181 visits	4,925 visits	5,184 visits	4,251 visits	4,111 visits	4,958 visits	4,757 visits	3,840 visits	4,155 visits	4,869 visits	4,248 visits	3,572 visits	4,246 visits	4,626 visits	3,733 visits	3,461 visits	4,302 visits	4,236 visits	3,289 visits	3,478 visits	4,254 visits	3,743 visits
Direct	3,426 visits	2,576 visits	2,445 visits	3,361 visits	3,289 visits	2,424 visits	2,751 visits	3,564 visits	3,060 visits	2,410 visits	3,114 visits	3,615 visits	2,814 visits	2,552 visits	3,453 visits	3,516 visits	2,631 visits	2,829 visits	3,695 visits	3,306 visits	2,573 visits	3,183 visits	3,792 visits	3,057 visits	2,670 visits	3,537 visits	3,733 visits	2,848 visits	2,913 visits	3,813 visits	3,550 visits	2,749 visits	3,252 visits	3,955 visits	3,304 visits	2,801 visits
Referrals	897 visits	1,018 visits	1,636 visits	1,443 visits	961 visits	1,365 visits	1,830 visits	1,392 visits	1,128 visits	1,720 visits	1,919 visits	1,362 visits	1,393 visits	2,029 visits	1,920 visits	1,400 visits	1,729 visits	2,251 visits	1,874 visits	1,535 visits	2,087 visits	2,370 visits	1,833 visits	1,774 visits	2,413 visits	2,394 visits	1,846 visits	2,094 visits	2,664 visits	2,356 visits	1,952 visits	2,451 visits	2,813 visits	2,308 visits	2,162 visits	2,792 visits
Social	1,306 visits	1,922 visits	1,466 visits	984 visits	1,580 visits	1,925 visits	1,256 visits	1,100 visits	1,825 visits	1,811 visits	1,106 visits	1,318 visits	1,984 visits	1,617 visits	1,061 visits	1,588 visits	2,024 visits	1,401 visits	1,142 visits	1,848 visits	1,942 visits	1,228 visits	1,334 visits	2,037 visits	1,766 visits	1,149 visits	1,596 visits	2,113 visits	1,550 visits	1,193 visits	1,865 visits	2,065 visits	1,358 visits	1,357 visits	2,080 visits	1,911 visits
Email	798 visits	556 visits	438 visits	734 visits	801 visits	512 visits	544 visits	849 visits	763 visits	504 visits	682 visits	919 visits	705 visits	547 visits	826 visits	936 visits	653 visits	640 visits	951 visits	908 visits	633 visits	771 visits	1,035 visits	853 visits	660 visits	916 visits	1,068 visits	797 visits	740 visits	1,050 visits	1,051 visits	765 visits	862 visits	1,147 visits	1,002 visits	778 visits
Other	295 visits	271 visits	454 visits	436 visits	263 visits	331 visits	491 visits	388 visits	259 visits	402 visits	499 visits	337 visits	287 visits	467 visits	476 visits	299 visits	341 visits	513 visits	432 visits	286 visits	410 visits	529 visits	380 visits	305 visits	479 visits	515 visits	337 visits	352 visits	531 visits	475 visits	316 visits	419 visits	557 visits	424 visits	326 visits	489 visits

Sep 5100%

Aug 1Sep 5

Illustrative acquisition channel shares data
Series	Aug 1	Aug 2	Aug 3	Aug 4	Aug 5	Aug 6	Aug 7	Aug 8	Aug 9	Aug 10	Aug 11	Aug 12	Aug 13	Aug 14	Aug 15	Aug 16	Aug 17	Aug 18	Aug 19	Aug 20	Aug 21	Aug 22	Aug 23	Aug 24	Aug 25	Aug 26	Aug 27	Aug 28	Aug 29	Aug 30	Aug 31	Sep 1	Sep 2	Sep 3	Sep 4	Sep 5
Organic search	5,520 visits	6,061 visits	5,259 visits	4,803 visits	5,600 visits	5,729 visits	4,776 visits	4,771 visits	5,603 visits	5,272 visits	4,403 visits	4,837 visits	5,472 visits	4,753 visits	4,181 visits	4,925 visits	5,184 visits	4,251 visits	4,111 visits	4,958 visits	4,757 visits	3,840 visits	4,155 visits	4,869 visits	4,248 visits	3,572 visits	4,246 visits	4,626 visits	3,733 visits	3,461 visits	4,302 visits	4,236 visits	3,289 visits	3,478 visits	4,254 visits	3,743 visits
Direct	3,426 visits	2,576 visits	2,445 visits	3,361 visits	3,289 visits	2,424 visits	2,751 visits	3,564 visits	3,060 visits	2,410 visits	3,114 visits	3,615 visits	2,814 visits	2,552 visits	3,453 visits	3,516 visits	2,631 visits	2,829 visits	3,695 visits	3,306 visits	2,573 visits	3,183 visits	3,792 visits	3,057 visits	2,670 visits	3,537 visits	3,733 visits	2,848 visits	2,913 visits	3,813 visits	3,550 visits	2,749 visits	3,252 visits	3,955 visits	3,304 visits	2,801 visits
Referrals	897 visits	1,018 visits	1,636 visits	1,443 visits	961 visits	1,365 visits	1,830 visits	1,392 visits	1,128 visits	1,720 visits	1,919 visits	1,362 visits	1,393 visits	2,029 visits	1,920 visits	1,400 visits	1,729 visits	2,251 visits	1,874 visits	1,535 visits	2,087 visits	2,370 visits	1,833 visits	1,774 visits	2,413 visits	2,394 visits	1,846 visits	2,094 visits	2,664 visits	2,356 visits	1,952 visits	2,451 visits	2,813 visits	2,308 visits	2,162 visits	2,792 visits
Social	1,306 visits	1,922 visits	1,466 visits	984 visits	1,580 visits	1,925 visits	1,256 visits	1,100 visits	1,825 visits	1,811 visits	1,106 visits	1,318 visits	1,984 visits	1,617 visits	1,061 visits	1,588 visits	2,024 visits	1,401 visits	1,142 visits	1,848 visits	1,942 visits	1,228 visits	1,334 visits	2,037 visits	1,766 visits	1,149 visits	1,596 visits	2,113 visits	1,550 visits	1,193 visits	1,865 visits	2,065 visits	1,358 visits	1,357 visits	2,080 visits	1,911 visits
Email	798 visits	556 visits	438 visits	734 visits	801 visits	512 visits	544 visits	849 visits	763 visits	504 visits	682 visits	919 visits	705 visits	547 visits	826 visits	936 visits	653 visits	640 visits	951 visits	908 visits	633 visits	771 visits	1,035 visits	853 visits	660 visits	916 visits	1,068 visits	797 visits	740 visits	1,050 visits	1,051 visits	765 visits	862 visits	1,147 visits	1,002 visits	778 visits
Other	295 visits	271 visits	454 visits	436 visits	263 visits	331 visits	491 visits	388 visits	259 visits	402 visits	499 visits	337 visits	287 visits	467 visits	476 visits	299 visits	341 visits	513 visits	432 visits	286 visits	410 visits	529 visits	380 visits	305 visits	479 visits	515 visits	337 visits	352 visits	531 visits	475 visits	316 visits	419 visits	557 visits	424 visits	326 visits	489 visits

packages/vue/src/charts/composition-chart/demo.vue

<script setup lang="ts">
import { CompositionChart } from "@/components/orvui/charts/composition-chart";
const dates = new Intl.DateTimeFormat("en", {
  month: "short",
  day: "numeric",
  timeZone: "UTC",
});
const periods = Array.from({ length: 36 }, (_, index) =>
  dates.format(new Date(Date.UTC(2026, 7, index + 1))),
);
const channels = [
  {
    id: "organic",
    name: "Organic search",
    color: "#2563eb",
    base: 46,
    trend: -0.45,
  },
  { id: "direct", name: "Direct", color: "#38bdf8", base: 24, trend: 0.12 },
  {
    id: "referral",
    name: "Referrals",
    color: "#0d9488",
    base: 10,
    trend: 0.32,
  },
  { id: "social", name: "Social", color: "#fbbf24", base: 12, trend: 0.06 },
  { id: "email", name: "Email", color: "#a78bfa", base: 5, trend: 0.09 },
  { id: "other", name: "Other", color: "#a1a1aa", base: 3, trend: 0.02 },
];
const series = channels.map(({ base, trend, ...channel }, index) => ({
  ...channel,
  values: periods.map((_, day) =>
    Math.round(
      (base +
        day * trend +
        Math.sin(day * 1.7 + index * 2) * Math.min(base / 3, 5)) *
        120,
    ),
  ),
}));
const formatVisits = (value: number) => `${value.toLocaleString("en")} visits`;
</script>
<template>
  <div class="w-full space-y-10">
    <CompositionChart
      view="bar"
      :series="series"
      :periods="periods"
      label="Illustrative acquisition channel shares"
      :format-value="formatVisits"
    />
    <div class="border-t border-border pt-10">
      <CompositionChart
        view="area"
        :series="series"
        :periods="periods"
        label="Illustrative acquisition channel shares"
        :format-value="formatVisits"
      />
    </div>
  </div>
</template>

packages/vue/src/charts/composition-chart/src/CompositionChart.vue

状态与事件

需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。

组件状态绑定
组件	Vue 绑定	更新事件
`CompositionChart`	`v-model:period`string	`update:period`

可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。

API 参考

series

readonly CompositionSeries[]

—

periods

readonly string[]

—

view?

"bar" | "area"

"bar"

period?

string

—

defaultPeriod?

string

""

formatValue?

(value: number) => string

formatNumber

label?

string

"Composition over time"

className?

string

—

事件

update:period

—

@update:period

periodChange

—

@periodChange

插槽

default

() => VNodeChild

#default

无障碍

为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。

常见问题

如何配置 Composition Chart？: 通过 series、periods、view、period、defaultPeriod、formatValue、label、className 配置 Composition Chart；API 表列出其类型与默认值。
如何连接到应用状态？: 监听 update:period、periodChange，将组件连接到应用状态。
可以在服务端渲染吗？: 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。

更新于 2026年10月26日

来源与许可 ↗MIT · 0.1.1

Composition Chart

适用场景

安装

示例

预览

状态与事件

API 参考

事件

插槽

无障碍

常见问题

相关组件

Status Bar

Liquidity Heatmap

Bump Chart