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

FunnelChart 漏斗图

逐层收窄的转化漏斗，每层显示绝对值。

基础用法

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

背景

<script setup lang="ts">
import { CfFunnelChart } from '@chufix-design/vue';
const steps = [
  { label: '访问', value: 10000 },
  { label: '注册', value: 3200 },
  { label: '激活', value: 1800 },
  { label: '付费', value: 580 },
  { label: '续订', value: 410 },
];
</script>

<template>
  <CfFunnelChart :steps="steps" />
</template>

<CfFunnelChart ... />

好坏漏斗对比

健康漏斗（每段流失 30-50%）vs 流失严重漏斗（92% 直接流失）。

背景

健康漏斗（12% 付费）

流失严重（0.4% 付费）

<script setup lang="ts">
import { CfFunnelChart } from '@chufix-design/vue';
const goodConversion = [
  { label: '访问 100k', value: 100000 },
  { label: '注册 50k', value: 50000 },
  { label: '激活 35k', value: 35000 },
  { label: '付费 12k', value: 12000 },
];
const badConversion = [
  { label: '访问 100k', value: 100000 },
  { label: '注册 8k', value: 8000 },
  { label: '激活 3k', value: 3000 },
  { label: '付费 400', value: 400 },
];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">健康漏斗（12% 付费）</div>
      <CfFunnelChart :steps="goodConversion" :height="200" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px;">流失严重（0.4% 付费）</div>
      <CfFunnelChart :steps="badConversion" :height="200" />
    </div>
  </div>
</template>

<CfFunnelChart steps={good} />
<CfFunnelChart steps={bad} />

API

属性	类型	默认值	说明
`steps`	`FunnelStep[]`	`—`	{ label, value }[]，从上到下值递减
`width / height / showLabels`	“	“