Angular에서 Echarts

Source: Dev.to

ECharts와 Angular 통합 가이드

Hey 👋 – 멋진 하루 보내고 계시길 바랍니다!

이번에는 Angular에서 ECharts를 사용하는 방법과 import를 통해 올바르게 트리‑쉐이킹을 수행하는 방법을 살펴보겠습니다. ECharts 라이브러리를 직접 사용할 수도 있고, ngx-echarts 래퍼를 사용할 수도 있습니다.

언제 ECharts를 직접 사용하고 언제 ngx-echarts 래퍼를 사용할까

직접 ECharts 사용 (래퍼 없음)

장점

• 초기화와 라이프사이클을 완전히 제어 가능
• 추상화 레이어 오버헤드 없음
• 모든 ECharts API에 직접 접근

단점

• 수동으로 리사이즈 처리 필요
• 보일러플레이트 코드가 많아짐
• 메모리 정리를 직접 관리해야 함

ngx-echarts 래퍼

장점

• Angular 라이프사이클을 자동으로 처리
• 내장 리사이즈 옵저버 제공
• 보일러플레이트 감소
• Angular 패턴과의 통합이 용이

단점

• 추가 추상화 레이어 존재
• 특정 상황에 대한 제어가 제한적
• 래퍼 업데이트에 의존

추천: 세밀한 제어가 필요한 커스텀 대시보드에는 직접 ECharts를, 일반적인 애플리케이션에는 ngx-echarts를 사용하세요.

올바른 Import와 트리‑쉐이킹

❌ 잘못된 방법 (전체 포함)

import * as echarts from 'echarts';  // Bundle: ~700‑900 KB

이 방식은 사용 여부와 관계없이 ECharts 전체 라이브러리를 가져와 번들 크기가 크게 증가합니다.

✅ 올바른 방법 (트리‑쉐이킹 가능)

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 사용하는 것만 등록
echarts.use([
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  CanvasRenderer
]);

번들 크기 비교

• 이전 (잘못된 방법): ~900 KB
• 현재 (올바른 방법): ~80‑100 KB

절감 효과: 91 % 감소 🚀

echarts.use()가 중요한 이유

echarts.use() 함수는 필요한 컴포넌트만 등록합니다. 이를 사용하지 않으면:

• 번들 크기 증가: 모든 것이 포함됨
• 로드 시간 지연: 사용자가 불필요한 코드를 다운로드
• 최적화 저하: 트리‑쉐이킹이 제대로 작동하지 않음

마치 한 권만 필요할 때 전체 도서관을 주문하는 것과 같습니다.

TypeScript 타입 지원

차트 옵션에 대한 IDE 자동 완성을 제공하면서 트리‑쉐이킹을 유지하려면:

import type { EChartsOption } from 'echarts/types';

const option: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};

중요: import type을 사용해야(단순 import가 아니라) 컴파일 시 타입이 제거되어 번들에 포함되지 않습니다.

행복한 코딩 되세요! 🎉