---
code: "CMP-02"
id: "c-funnel"
tab: "compare"
kind: "core"
title: "Funnel · 깔때기"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "pipeline"
dataShape: "ordered conversion stages"
tasks: ["compare alternatives", "show delta", "benchmark groups", "show drop-off"]
tags: ["comparison", "benchmark", "delta", "funnel", "pipeline", "깔때기"]
gallery: "https://graph.heal7.com/#CMP-02"
js: "/sku/CMP-02.js"
---

# [CMP-02] Funnel · 깔때기

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
단계별 통과율 — 진로 단계, 전환 깔때기.

**응용** 가입→유료 전환, 매칭→면접→입사.

## 데이터 모양
- family: `pipeline`
- dataShape: ordered conversion stages
- tasks: compare alternatives, show delta, benchmark groups, show drop-off
- tags: comparison, benchmark, delta, funnel, pipeline, 깔때기


## 의존
echarts@5 · load `low` · library `ECharts`

## 붙여넣는 법
1. echarts 5.x 로드
2. 아래 코드를 그대로 붙인다
3. `T` 토큰이 없으면 파일 상단 defaultT를 쓴다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const el = document.querySelector('#chart');
const chart = echarts.init(el);
chart.setOption({
  backgroundColor:T.bg,
  series:[{type:'funnel', left:'10%', right:'10%', top:14, bottom:14, sort:'descending', gap:2,
    label:{color:'#fff', fontSize:11, fontWeight:600},
    data:[
      {name:'관심', value:100, itemStyle:{color:T.royal}},
      {name:'학습', value:78, itemStyle:{color:T.plum}},
      {name:'시도', value:54, itemStyle:{color:T.rose}},
      {name:'성과', value:32, itemStyle:{color:T.gold}}
    ]}]
});
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 765-775
- gallery: https://graph.heal7.com/#CMP-02
- raw js: https://graph.heal7.com/sku/CMP-02.js

```js
() => reg('c-funnel', {
  backgroundColor:T.bg,
  series:[{type:'funnel', left:'10%', right:'10%', top:14, bottom:14, sort:'descending', gap:2,
    label:{color:'#fff', fontSize:11, fontWeight:600},
    data:[
      {name:'관심', value:100, itemStyle:{color:T.royal}},
      {name:'학습', value:78, itemStyle:{color:T.plum}},
      {name:'시도', value:54, itemStyle:{color:T.rose}},
      {name:'성과', value:32, itemStyle:{color:T.gold}}
    ]}]
})
```