Apache ECharts

Apache ECharts는 Apache Software Foundation 산하의 오픈소스 JavaScript 데이터 시각화 라이브러리다. 원래 Baidu에서 개발했고, 2021년 Apache 최상위 프로젝트(Top-Level Project)로 졸업했다. GitHub Stars 62,000+, 라이선스는 Apache 2.0 (상업적 사용 무료).

최신 버전: v6.0.0 (2025년 7월)

왜 ECharts인가

JSON-like 옵션 객체를 넘기면 차트가 그려지는 선언적(declarative) 방식이다. D3.js처럼 DOM을 직접 조작할 필요가 없어서 진입 장벽이 낮고, 내장 차트 타입이 20가지 이상이라 대부분의 시각화를 커버한다.

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

chart.setOption(option);

v6.0 주요 변경사항

ECharts 6.0은 12가지 주요 업그레이드를 포함한다. v5에서 v6로의 마이그레이션은 대부분 호환되지만 일부 breaking change가 있다.

지원 차트 타입

기본: Line, Bar, Pie, Scatter 통계: Boxplot, Candlestick, Heatmap, Funnel, Gauge 지리: Map(GeoJSON), Lines on Map 관계/계층: Tree, Treemap, Sunburst, Sankey, Graph/Network 기타: Radar, Parallel, ThemeRiver, Calendar Heatmap, Custom Series v6 추가: Chord, Beeswarm 3D (echarts-gl): 3D Bar, 3D Scatter, 3D Surface, Globe

렌더링: Canvas vs SVG

ECharts는 Canvas(기본)와 SVG 렌더러를 모두 지원한다.

대량 데이터는 Canvas, 소량 + 인터랙션/접근성은 SVG. large: true 옵션으로 수십만 포인트 최적화 모드를 활성화할 수 있고, dataZoom으로 줌/스크롤 범위 제한도 가능하다.

Framework 통합

React: echarts-for-react

최신 버전: v3.0.6

React 컴포넌트로 감싸서 props로 옵션을 넘기는 방식이다. 컴포넌트 생명주기에 맞춰 인스턴스 생성/해제/리사이즈를 자동 처리한다.

import ReactECharts from 'echarts-for-react';

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

function Chart() {
  return <ReactECharts option={option} />;
}

• onEvents prop으로 이벤트 핸들링
• getEchartsInstance() ref로 인스턴스 직접 접근
• tree-shaking 지원

Vue: vue-echarts

Apache ECharts 팀이 직접 관리하는 공식 래퍼. Vue 2/3 모두 지원, Composition API 기반.

Svelte: svelte-echarts

공식 래퍼는 없지만, 커뮤니티 라이브러리 svelte-echarts가 있다. ECharts 자체가 바닐라 JS이므로 직접 연동도 간단하다:

<script>
  import * as echarts from 'echarts';
  import { onMount, onDestroy } from 'svelte';

  let chartDom;
  let chart;

  onMount(() => {
    chart = echarts.init(chartDom);
    chart.setOption({ /* ... */ });
  });

  onDestroy(() => chart?.dispose());
</script>

<div bind:this={chartDom} style="width:600px;height:400px;"></div>

Grafana 연동: Business Charts Plugin

Business Charts (구 volkovlabs-echarts-panel)는 Grafana 대시보드에서 ECharts를 사용할 수 있게 해주는 서드파티 플러그인이다.

동작 방식:

• Grafana 데이터소스(Prometheus, InfluxDB, PostgreSQL 등)에서 가져온 데이터를 ECharts 옵션으로 변환
• 패널 설정에서 JavaScript 코드를 직접 작성하여 옵션을 동적 생성
• Grafana의 변수(Variables), 시간 범위(Time Range)와 연동
• Grafana 기본 패널로 표현 불가능한 Sankey, Gauge, Treemap, 지도 등을 대시보드에 추가 가능

주의: VolkovLabs는 2025년 9월 인수 후 운영을 종료했다. GitHub 레포가 아카이브되었고, 2026년 2월부터 Grafana 플러그인 페이지에서의 설치도 제거될 예정이다. 대안을 찾거나 포크를 관리해야 할 수 있다.

경쟁 라이브러리 비교

ECharts는 "풍부한 내장 기능 + 좋은 성능 + 무료"의 조합이 강점이다. Highcharts와 기능은 비슷하지만 라이선스 비용이 없고, D3.js보다 진입 장벽이 낮다.

참고

• Apache ECharts 공식 사이트
• ECharts 6.0 Features
• v5 → v6 Migration Guide
• echarts-for-react (npm)
• svelte-echarts (GitHub)
• Business Charts for Grafana