---
code: "INT-08"
id: "c-pict"
tab: "dynamic-1"
kind: "interactive"
title: "Pictorial Bar · 아이콘 막대"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-mount"
family: "comparison"
dataShape: "ranked categories or before-after pairs"
tasks: ["explore data", "monitor change", "drill into structure", "compare categories"]
tags: ["interactive", "live", "exploration", "comparison", "ranking", "pictorial", "bar", "아이콘", "막대"]
gallery: "https://graph.heal7.com/#INT-08"
js: "/sku/INT-08.js"
---

# [INT-08] Pictorial Bar · 아이콘 막대

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

## 언제 가져가나
사람 아이콘으로 채운 막대 — 정량을 직관적 픽토그램으로.

**응용** 인구·인원수 비교, 사용자 비율 인포그래픽.

## 데이터 모양
- family: `comparison`
- dataShape: ranked categories or before-after pairs
- tasks: explore data, monitor change, drill into structure, compare categories
- tags: interactive, live, exploration, comparison, ranking, pictorial, bar, 아이콘, 막대


## 의존
echarts@5 · load `low` · library `ECharts`

## 붙여넣는 법
1. echarts 5.x 로드 (GL이면 echarts-gl도)
2. 컨테이너 id를 원본 id와 맞추거나 `document.getElementById` 한 줄만 바꾼다
3. `T`, `reg`, `cssv` 가 필요하면 갤러리 테마 스텁을 함께 가져간다

```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 cssv = (n, fb) => (getComputedStyle(document.documentElement).getPropertyValue(n).trim() || fb);
const isDark = () => document.documentElement.getAttribute('data-theme') !== 'light';
const charts = [];
const reg = (id, opt) => {
  const dom = document.getElementById(id); if (!dom) return;
  const c = echarts.init(dom, null, {renderer:'canvas'});
  c.setOption(opt);
  charts.push(c);
  return c;
};
const factory = function(){
  const dom = document.getElementById('c-pict'); if(!dom) return;
  const c = echarts.init(dom);
  const PERSON = 'path://M50 20 C42 20 36 26 36 34 C36 42 42 48 50 48 C58 48 64 42 64 34 C64 26 58 20 50 20 M30 56 L70 56 L72 92 L60 92 L60 78 L40 78 L40 92 L28 92 Z';
  c.setOption({
    backgroundColor:T.bg, grid:{top:14,right:14,bottom:30,left:40},
    xAxis:{type:'category', data:['10대','20대','30대','40대','50대'], axisLabel:{color:T.sub,fontSize:11}, axisLine:{show:false}, axisTick:{show:false}},
    yAxis:{type:'value', max:100, splitLine:{show:false}, axisLabel:{show:false}},
    series:[
      {type:'pictorialBar', symbol:PERSON, symbolRepeat:true, symbolSize:[20,22], symbolMargin:'10%', symbolClip:true,
        itemStyle:{color:T.gold}, data:[34, 78, 92, 64, 42], z:10,
        label:{show:true, position:'top', color:T.gold, fontSize:11, fontWeight:700, formatter:'{c}%'}},
      {type:'pictorialBar', symbol:PERSON, symbolRepeat:true, symbolSize:[20,22], symbolMargin:'10%',
        itemStyle:{color:'rgba(255,255,255,.08)'}, data:[100,100,100,100,100], animation:false}
    ]
  });
  charts.push(c);
};
factory();
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 1332-1349
- gallery: https://graph.heal7.com/#INT-08
- raw js: https://graph.heal7.com/sku/INT-08.js

```js
function(){
  const dom = document.getElementById('c-pict'); if(!dom) return;
  const c = echarts.init(dom);
  const PERSON = 'path://M50 20 C42 20 36 26 36 34 C36 42 42 48 50 48 C58 48 64 42 64 34 C64 26 58 20 50 20 M30 56 L70 56 L72 92 L60 92 L60 78 L40 78 L40 92 L28 92 Z';
  c.setOption({
    backgroundColor:T.bg, grid:{top:14,right:14,bottom:30,left:40},
    xAxis:{type:'category', data:['10대','20대','30대','40대','50대'], axisLabel:{color:T.sub,fontSize:11}, axisLine:{show:false}, axisTick:{show:false}},
    yAxis:{type:'value', max:100, splitLine:{show:false}, axisLabel:{show:false}},
    series:[
      {type:'pictorialBar', symbol:PERSON, symbolRepeat:true, symbolSize:[20,22], symbolMargin:'10%', symbolClip:true,
        itemStyle:{color:T.gold}, data:[34, 78, 92, 64, 42], z:10,
        label:{show:true, position:'top', color:T.gold, fontSize:11, fontWeight:700, formatter:'{c}%'}},
      {type:'pictorialBar', symbol:PERSON, symbolRepeat:true, symbolSize:[20,22], symbolMargin:'10%',
        itemStyle:{color:'rgba(255,255,255,.08)'}, data:[100,100,100,100,100], animation:false}
    ]
  });
  charts.push(c);
}
```