---
code: "NET-03"
id: "c-sankey"
tab: "network"
kind: "core"
title: "Sankey · 산키"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "relationship"
dataShape: "flows, ties or connected entities"
tasks: ["show connections", "show hierarchy", "trace flow"]
tags: ["network", "relationship", "flow", "sankey", "산키"]
gallery: "https://graph.heal7.com/#NET-03"
js: "/sku/NET-03.js"
---

# [NET-03] Sankey · 산키

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

## 언제 가져가나
재능 → 산업 → 직무 3단 흐름. 폭=적합도.

**응용** 사용자 여정(소스→페이지→이탈), 예산 배분 흐름.

## 데이터 모양
- family: `relationship`
- dataShape: flows, ties or connected entities
- tasks: show connections, show hierarchy, trace flow
- tags: network, relationship, flow, sankey, 산키


## 의존
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, tooltip:{},
  series:[{type:'sankey', left:20, right:120, top:10, bottom:10, nodeWidth:14, nodeGap:10,
    label:{color:T.fg, fontSize:11},
    lineStyle:{color:'gradient', opacity:.55, curveness:.5},
    data:[
      {name:'창의'},{name:'분석'},{name:'관계'},{name:'실행'},
      {name:'IT/콘텐츠'},{name:'금융/컨설팅'},{name:'교육/연구'},{name:'서비스/운영'},
      {name:'UX 디자이너'},{name:'데이터 분석가'},{name:'PM'},{name:'전략기획'},{name:'리서처'},{name:'CX 매니저'}
    ],
    links:[
      {source:'창의',target:'IT/콘텐츠',value:8},{source:'창의',target:'교육/연구',value:3},
      {source:'분석',target:'금융/컨설팅',value:7},{source:'분석',target:'IT/콘텐츠',value:4},
      {source:'관계',target:'서비스/운영',value:6},{source:'관계',target:'금융/컨설팅',value:3},
      {source:'실행',target:'IT/콘텐츠',value:5},{source:'실행',target:'서비스/운영',value:4},
      {source:'IT/콘텐츠',target:'UX 디자이너',value:6},{source:'IT/콘텐츠',target:'데이터 분석가',value:5},{source:'IT/콘텐츠',target:'PM',value:6},
      {source:'금융/컨설팅',target:'전략기획',value:6},{source:'금융/컨설팅',target:'데이터 분석가',value:4},
      {source:'교육/연구',target:'리서처',value:3},
      {source:'서비스/운영',target:'CX 매니저',value:6},{source:'서비스/운영',target:'PM',value:4}
    ]
  }]
});
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 543-564
- gallery: https://graph.heal7.com/#NET-03
- raw js: https://graph.heal7.com/sku/NET-03.js

```js
() => reg('c-sankey', {
  backgroundColor:T.bg, tooltip:{},
  series:[{type:'sankey', left:20, right:120, top:10, bottom:10, nodeWidth:14, nodeGap:10,
    label:{color:T.fg, fontSize:11},
    lineStyle:{color:'gradient', opacity:.55, curveness:.5},
    data:[
      {name:'창의'},{name:'분석'},{name:'관계'},{name:'실행'},
      {name:'IT/콘텐츠'},{name:'금융/컨설팅'},{name:'교육/연구'},{name:'서비스/운영'},
      {name:'UX 디자이너'},{name:'데이터 분석가'},{name:'PM'},{name:'전략기획'},{name:'리서처'},{name:'CX 매니저'}
    ],
    links:[
      {source:'창의',target:'IT/콘텐츠',value:8},{source:'창의',target:'교육/연구',value:3},
      {source:'분석',target:'금융/컨설팅',value:7},{source:'분석',target:'IT/콘텐츠',value:4},
      {source:'관계',target:'서비스/운영',value:6},{source:'관계',target:'금융/컨설팅',value:3},
      {source:'실행',target:'IT/콘텐츠',value:5},{source:'실행',target:'서비스/운영',value:4},
      {source:'IT/콘텐츠',target:'UX 디자이너',value:6},{source:'IT/콘텐츠',target:'데이터 분석가',value:5},{source:'IT/콘텐츠',target:'PM',value:6},
      {source:'금융/컨설팅',target:'전략기획',value:6},{source:'금융/컨설팅',target:'데이터 분석가',value:4},
      {source:'교육/연구',target:'리서처',value:3},
      {source:'서비스/운영',target:'CX 매니저',value:6},{source:'서비스/운영',target:'PM',value:4}
    ]
  }]
})
```