Preview Updated 2026-05-10

Funnel chart

Step-by-step narrowing conversion funnel with absolute values per step.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

背景

src/App.vue

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

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

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

export default function Demo() {
  const steps = [
    { label: '访问', value: 10000 },
    { label: '注册', value: 3200 },
    { label: '激活', value: 1800 },
    { label: '付费', value: 580 },
    { label: '续订', value: 410 },
  ];
  return (
    <>
      <CfFunnelChart steps={steps} />
    </>
  );
}

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

export default function Demo() {
  const steps = [
    { label: '访问', value: 10000 },
    { label: '注册', value: 3200 },
    { label: '激活', value: 1800 },
    { label: '付费', value: 580 },
    { label: '续订', value: 410 },
  ];
  return (
    <>
      <CfFunnelChart steps={steps} />
    </>
  );
}

Healthy vs leaky funnel

A healthy funnel (30–50% drop per step) versus a leaky funnel (92% drop right after the first step).

背景

健康漏斗（12% 付费）

流失严重（0.4% 付费）

src/App.vue

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

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

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

export default function Demo() {
  return (
    <>
      <CfFunnelChart steps={good} />
      <CfFunnelChart steps={bad} />
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfFunnelChart steps={good} />
      <CfFunnelChart steps={bad} />
    </>
  );
}

API

Prop	Type	Default	Description
`steps`	`FunnelStep[]`	`—`	{ label, value }[]; values decrease from top to bottom
`width / height / showLabels`	“	“