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

BarChart 柱状图

单 series 垂直柱状图。

基础用法

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

背景视口

src/App.vue

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" />
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" />
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
  const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
  return (
    <>
      <CfBarChart data={data} labels={labels} />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64, 49];
  const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue'];
  return (
    <>
      <CfBarChart data={data} labels={labels} />
    </>
  );
}

颜色

colorIndex 0..7 直接选 --viz-1..8。

背景视口

src/App.vue

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon'];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <CfBarChart :data="data" :labels="labels" :color-index="0" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="2" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="3" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="5" :height="180" />
  </div>
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';
const data = [42, 68, 35, 91, 57, 78, 23, 64];
const labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon'];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <CfBarChart :data="data" :labels="labels" :color-index="0" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="2" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="3" :height="180" />
    <CfBarChart :data="data" :labels="labels" :color-index="5" :height="180" />
  </div>
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64];
  return (
    <>
      <CfBarChart data={data} colorIndex={0} />
      <CfBarChart data={data} colorIndex={3} />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78, 23, 64];
  return (
    <>
      <CfBarChart data={data} colorIndex={0} />
      <CfBarChart data={data} colorIndex={3} />
    </>
  );
}

横向布局

需要较长分类名、排行或对比列表时，使用 orientation="horizontal"。

背景视口

src/App.vue

<script setup lang="ts">
import { CfBarChart } from '@chufix-design/vue';

const data = [42, 68, 35, 91, 57, 78];
const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" orientation="horizontal" />
</template>

<script setup>
import { CfBarChart } from '@chufix-design/vue';

const data = [42, 68, 35, 91, 57, 78];
const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
</script>
<template>
  <CfBarChart :data="data" :labels="labels" orientation="horizontal" />
</template>

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78];
  const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
  return (
    <>
      <CfBarChart data={data} labels={labels} orientation="horizontal" />
    </>
  );
}

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

export default function Demo() {
  const data = [42, 68, 35, 91, 57, 78];
  const labels = ['API', 'Web', 'DB', 'Cache', 'Queue', 'Worker'];
  return (
    <>
      <CfBarChart data={data} labels={labels} orientation="horizontal" />
    </>
  );
}

API

Props

属性	类型	默认值	说明
`data`	`number[]`	`—`	柱高度数组
`labels`	`string[]`	自动 `0..n-1`	x 轴标签
`width`	`number`	`480`	SVG 宽度
`height`	`number`	`240`	SVG 高度
`colorIndex`	`0..7`	`0`	柱体颜色（`--viz-1..8`）
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	柱方向
`showGrid`	`boolean`	`true`	显示网格
`showLabels`	`boolean`	`true`	显示坐标轴标签
`showTooltip`	`boolean`	`true`	启用 hover tooltip
`valueFormatter`	`(value, payload: BarChartInteractionPayload) => string`	—	tooltip 内值的格式化
`tooltipFormatter`	`(payload: BarChartInteractionPayload) => string`	—	完整 tooltip HTML 自渲染
`ariaLabel`	`string`	—	透传给根 `<svg>` 的 `aria-label`

Events

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

类型

interface BarChartInteractionPayload {
  label: string;
  value: number;
  dataIndex: number;
  colorIndex: number;
  nativeEvent?: MouseEvent;
}