---
code: "DIS-01"
id: "c-donut"
tab: "distribution"
kind: "core"
title: "Donut · 도넛"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "composition"
dataShape: "category shares or weighted blocks"
tasks: ["show composition", "show frequency", "compare magnitudes", "show part-to-whole"]
tags: ["distribution", "비율", "빈도", "composition", "share", "donut", "도넛"]
gallery: "https://graph.heal7.com/#DIS-01"
js: "/sku/DIS-01.js"
---

# [DIS-01] Donut · 도넛

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

## 언제 가져가나
두 범주의 비중을 한 눈에 — 음양·성별·이탈/잔존.

**응용** 중앙에 총합 텍스트, 그라데이션 색상 stop으로 입체감.

## 데이터 모양
- family: `composition`
- dataShape: category shares or weighted blocks
- tasks: show composition, show frequency, compare magnitudes, show part-to-whole
- tags: distribution, 비율, 빈도, composition, share, donut, 도넛


## 의존
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:{trigger:'item', formatter:'{b}: {c} ({d}%)'},
  legend:{bottom:0, textStyle:{color:T.sub}},
  series:[{type:'pie', radius:['58%','80%'], center:['50%','46%'],
    label:{color:T.fg, fontSize:12, fontWeight:600, formatter:'{b}\n{d}%'},
    labelLine:{lineStyle:{color:T.grid}},
    data:[
      {name:'양(양)', value:4, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:1,colorStops:[{offset:0,color:'#e07a5f'},{offset:1,color:'#f0c060'}]}}},
      {name:'음(음)', value:2, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:1,colorStops:[{offset:0,color:'#3a4a6a'},{offset:1,color:'#6b94e0'}]}}}
    ]}],
  graphic:[{type:'text', left:'center', top:'42%', style:{text:'6자', fontSize:22, fontWeight:700, fill:T.fg, textAlign:'center'}}]
});
```

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

```js
() => reg('c-donut', {
  backgroundColor:T.bg, tooltip:{trigger:'item', formatter:'{b}: {c} ({d}%)'},
  legend:{bottom:0, textStyle:{color:T.sub}},
  series:[{type:'pie', radius:['58%','80%'], center:['50%','46%'],
    label:{color:T.fg, fontSize:12, fontWeight:600, formatter:'{b}\n{d}%'},
    labelLine:{lineStyle:{color:T.grid}},
    data:[
      {name:'양(양)', value:4, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:1,colorStops:[{offset:0,color:'#e07a5f'},{offset:1,color:'#f0c060'}]}}},
      {name:'음(음)', value:2, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:1,colorStops:[{offset:0,color:'#3a4a6a'},{offset:1,color:'#6b94e0'}]}}}
    ]}],
  graphic:[{type:'text', left:'center', top:'42%', style:{text:'6자', fontSize:22, fontWeight:700, fill:T.fg, textAlign:'center'}}]
})
```