---
code: "DIS-02"
id: "c-gauge"
tab: "distribution"
kind: "core"
title: "Gauge · 게이지"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "kpi"
dataShape: "headline value, rank race or progress state"
tasks: ["show composition", "show frequency", "compare magnitudes", "surface headline KPI"]
tags: ["distribution", "비율", "빈도", "kpi", "progress", "gauge", "게이지"]
gallery: "https://graph.heal7.com/#DIS-02"
js: "/sku/DIS-02.js"
---

# [DIS-02] Gauge · 게이지

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

## 언제 가져가나
단일 KPI를 다이얼로 — 적합도·달성률·균형 점수.

**응용** 격국 강도, 용신 일치율, 90일 KPI 진행률 표시.

## 데이터 모양
- family: `kpi`
- dataShape: headline value, rank race or progress state
- tasks: show composition, show frequency, compare magnitudes, surface headline KPI
- tags: distribution, 비율, 빈도, kpi, progress, gauge, 게이지


## 의존
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:'gauge', startAngle:200, endAngle:-20, min:0, max:100,
    progress:{show:true, width:14, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:0,colorStops:[{offset:0,color:'#6b8cff'},{offset:1,color:'#e8c069'}]}}},
    axisLine:{lineStyle:{width:14, color:[[1,'rgba(255,255,255,.08)']]}},
    pointer:{show:false}, axisTick:{show:false}, splitLine:{show:false},
    axisLabel:{color:T.sub, fontSize:10, distance:-22},
    title:{offsetCenter:[0,'68%'], color:T.sub, fontSize:11},
    detail:{offsetCenter:[0,'10%'], color:T.gold, fontSize:30, fontWeight:700, formatter:'{value}%'},
    data:[{value:74, name:'균형 적합도'}]
  }]
});
```

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

```js
() => reg('c-gauge', {
  backgroundColor:T.bg,
  series:[{type:'gauge', startAngle:200, endAngle:-20, min:0, max:100,
    progress:{show:true, width:14, itemStyle:{color:{type:'linear',x:0,y:0,x2:1,y2:0,colorStops:[{offset:0,color:'#6b8cff'},{offset:1,color:'#e8c069'}]}}},
    axisLine:{lineStyle:{width:14, color:[[1,'rgba(255,255,255,.08)']]}},
    pointer:{show:false}, axisTick:{show:false}, splitLine:{show:false},
    axisLabel:{color:T.sub, fontSize:10, distance:-22},
    title:{offsetCenter:[0,'68%'], color:T.sub, fontSize:11},
    detail:{offsetCenter:[0,'10%'], color:T.gold, fontSize:30, fontWeight:700, formatter:'{value}%'},
    data:[{value:74, name:'균형 적합도'}]
  }]
})
```