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

BarChart 柱状图

单 series 垂直柱状图。

基础用法

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

背景

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

<CfBarChart ... />

颜色

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

背景

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

<CfBarChart data={data} colorIndex={0} />
<CfBarChart data={data} colorIndex={3} />

横向布局

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

背景

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

<CfBarChart data={data} labels={labels} orientation="horizontal" />

API

属性	类型	默认值	说明
`data`	`number[]`	`—`	柱高度
`labels`	`string[]`	`—`	x 轴标签
`colorIndex`	`0..7`	`0`
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	柱方向
`width / height / showGrid / showLabels`	“	“