---
code: "DIS-07"
id: "c-treemap"
tab: "distribution"
kind: "core"
title: "Treemap · 트리맵"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "hierarchy"
dataShape: "nested parent-child structure"
tasks: ["show composition", "show frequency", "compare magnitudes", "show hierarchy"]
tags: ["distribution", "비율", "빈도", "hierarchy", "tree", "treemap", "트리맵"]
gallery: "https://graph.heal7.com/#DIS-07"
js: "/sku/DIS-07.js"
---

# [DIS-07] Treemap · 트리맵

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

## 언제 가져가나
직무 클러스터(부모) × 개별 직무(자식). 면적=적합도.

**응용** 산업별 채용 시장 규모, 콘텐츠 카테고리 점유율.

## 데이터 모양
- family: `hierarchy`
- dataShape: nested parent-child structure
- tasks: show composition, show frequency, compare magnitudes, show hierarchy
- tags: distribution, 비율, 빈도, hierarchy, tree, treemap, 트리맵


## 의존
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:'treemap', roam:false, breadcrumb:{show:false}, nodeClick:false,
    label:{color:'#fff', fontSize:12, fontWeight:600},
    upperLabel:{show:true, color:'#fff', height:22, fontWeight:700},
    levels:[{itemStyle:{borderColor:'#0e0a1a',borderWidth:2,gapWidth:2}},{colorSaturation:[.3,.6], itemStyle:{borderColorSaturation:.6,gapWidth:1,borderWidth:1}}],
    data:[
      {name:'창의·콘텐츠', value:240, children:[{name:'UX',value:92},{name:'카피',value:60},{name:'영상',value:50},{name:'브랜딩',value:38}]},
      {name:'분석·전략', value:200, children:[{name:'데이터',value:88},{name:'리서치',value:62},{name:'전략기획',value:50}]},
      {name:'관계·매개', value:160, children:[{name:'PM',value:74},{name:'영업',value:48},{name:'커뮤니티',value:38}]},
      {name:'기술·구축', value:140, children:[{name:'프론트',value:60},{name:'백엔드',value:50},{name:'데이터엔지',value:30}]},
      {name:'운영·서비스', value:100, children:[{name:'CX',value:42},{name:'QA',value:32},{name:'운영',value:26}]}
    ]
  }]
});
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 491-505
- gallery: https://graph.heal7.com/#DIS-07
- raw js: https://graph.heal7.com/sku/DIS-07.js

```js
() => reg('c-treemap', {
  backgroundColor:T.bg,
  series:[{type:'treemap', roam:false, breadcrumb:{show:false}, nodeClick:false,
    label:{color:'#fff', fontSize:12, fontWeight:600},
    upperLabel:{show:true, color:'#fff', height:22, fontWeight:700},
    levels:[{itemStyle:{borderColor:'#0e0a1a',borderWidth:2,gapWidth:2}},{colorSaturation:[.3,.6], itemStyle:{borderColorSaturation:.6,gapWidth:1,borderWidth:1}}],
    data:[
      {name:'창의·콘텐츠', value:240, children:[{name:'UX',value:92},{name:'카피',value:60},{name:'영상',value:50},{name:'브랜딩',value:38}]},
      {name:'분석·전략', value:200, children:[{name:'데이터',value:88},{name:'리서치',value:62},{name:'전략기획',value:50}]},
      {name:'관계·매개', value:160, children:[{name:'PM',value:74},{name:'영업',value:48},{name:'커뮤니티',value:38}]},
      {name:'기술·구축', value:140, children:[{name:'프론트',value:60},{name:'백엔드',value:50},{name:'데이터엔지',value:30}]},
      {name:'운영·서비스', value:100, children:[{name:'CX',value:42},{name:'QA',value:32},{name:'운영',value:26}]}
    ]
  }]
})
```