---
code: "TIM-03"
id: "c-area"
tab: "timeline"
kind: "core"
title: "Smooth Area · 강화 곡선"
library: "ECharts"
deps: ["echarts@5"]
load: "low"
pasteKind: "echarts-option"
family: "time-series"
dataShape: "time-indexed series, events or schedules"
tasks: ["show trend", "show seasonality", "show sequence"]
tags: ["time-series", "trend", "timeline", "smooth", "area", "강화", "곡선"]
gallery: "https://graph.heal7.com/#TIM-03"
js: "/sku/TIM-03.js"
---

# [TIM-03] Smooth Area · 강화 곡선

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

## 언제 가져가나
90일 가이드를 1년으로 확장한 누적 영역.

**응용** 학습 누적, 코호트별 잔존 곡선 비교.

## 데이터 모양
- family: `time-series`
- dataShape: time-indexed series, events or schedules
- tasks: show trend, show seasonality, show sequence
- tags: time-series, trend, timeline, smooth, area, 강화, 곡선


## 의존
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:'axis'},
  legend:{textStyle:{color:T.sub}, top:0, right:14},
  grid:{top:36,right:24,bottom:30,left:42},
  xAxis:{type:'category', boundaryGap:false, data:Array.from({length:12},(_,i)=>(i+1)+'월'), axisLabel:{color:T.sub}, axisLine:{lineStyle:{color:T.grid}}},
  yAxis:{type:'value', axisLabel:{color:T.sub}, splitLine:{lineStyle:{color:T.grid}}},
  series:[
    {name:'본인', type:'line', smooth:true, data:[20,28,38,46,56,68,72,76,82,86,84,88], lineStyle:{width:3,color:T.gold}, itemStyle:{color:T.gold},
      areaStyle:{color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgba(232,192,105,.28)'},{offset:1,color:'rgba(232,192,105,0)'}]}}},
    {name:'평균', type:'line', smooth:true, data:[18,22,28,32,40,48,52,56,60,62,64,66], lineStyle:{width:2,color:T.royal,type:'dashed'}, itemStyle:{color:T.royal}, areaStyle:{color:'rgba(107,140,255,.08)'}}
  ]
});
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 633-644
- gallery: https://graph.heal7.com/#TIM-03
- raw js: https://graph.heal7.com/sku/TIM-03.js

```js
() => reg('c-area', {
  backgroundColor:T.bg, tooltip:{trigger:'axis'},
  legend:{textStyle:{color:T.sub}, top:0, right:14},
  grid:{top:36,right:24,bottom:30,left:42},
  xAxis:{type:'category', boundaryGap:false, data:Array.from({length:12},(_,i)=>(i+1)+'월'), axisLabel:{color:T.sub}, axisLine:{lineStyle:{color:T.grid}}},
  yAxis:{type:'value', axisLabel:{color:T.sub}, splitLine:{lineStyle:{color:T.grid}}},
  series:[
    {name:'본인', type:'line', smooth:true, data:[20,28,38,46,56,68,72,76,82,86,84,88], lineStyle:{width:3,color:T.gold}, itemStyle:{color:T.gold},
      areaStyle:{color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgba(232,192,105,.28)'},{offset:1,color:'rgba(232,192,105,0)'}]}}},
    {name:'평균', type:'line', smooth:true, data:[18,22,28,32,40,48,52,56,60,62,64,66], lineStyle:{width:2,color:T.royal,type:'dashed'}, itemStyle:{color:T.royal}, areaStyle:{color:'rgba(107,140,255,.08)'}}
  ]
})
```