---
code: "DIS-04"
id: "c-bar"
tab: "distribution"
kind: "core"
title: "Bar · 수직 막대"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "comparison"
dataShape: "ranked categories or before-after pairs"
tasks: ["show composition", "show frequency", "compare magnitudes", "compare profiles", "compare categories"]
tags: ["distribution", "비율", "빈도", "multivariate", "comparison", "ranking", "bar", "수직", "막대"]
gallery: "https://graph.heal7.com/#DIS-04"
js: "/sku/DIS-04.js"
---

# [DIS-04] Bar · 수직 막대

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

## 언제 가져가나
레이더의 정량 보조 — 십성, 클러스터 점수.

**응용** 본인 막대만 강조색, 임계선(평균) overlay.

## 데이터 모양
- family: `comparison`
- dataShape: ranked categories or before-after pairs
- tasks: show composition, show frequency, compare magnitudes, compare profiles, compare categories
- tags: distribution, 비율, 빈도, multivariate, comparison, ranking, bar, 수직, 막대


## 의존
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, grid:{top:18,right:14,bottom:26,left:36},
  xAxis:{type:'category', data:['비견','식신','정관','정인','정재'], axisLabel:{color:T.sub,fontSize:11}, axisLine:{lineStyle:{color:T.grid}}},
  yAxis:{type:'value', axisLabel:{color:T.sub,fontSize:10}, splitLine:{lineStyle:{color:T.grid}}},
  series:[{type:'bar', data:[68,72,55,82,40], barWidth:'52%',
    itemStyle:{borderRadius:[6,6,0,0], color:p => p.dataIndex===3 ? T.gold : 'rgba(107,140,255,.6)'}}]
});
```

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

```js
() => reg('c-bar', {
  backgroundColor:T.bg, grid:{top:18,right:14,bottom:26,left:36},
  xAxis:{type:'category', data:['비견','식신','정관','정인','정재'], axisLabel:{color:T.sub,fontSize:11}, axisLine:{lineStyle:{color:T.grid}}},
  yAxis:{type:'value', axisLabel:{color:T.sub,fontSize:10}, splitLine:{lineStyle:{color:T.grid}}},
  series:[{type:'bar', data:[68,72,55,82,40], barWidth:'52%',
    itemStyle:{borderRadius:[6,6,0,0], color:p => p.dataIndex===3 ? T.gold : 'rgba(107,140,255,.6)'}}]
})
```