11P by GN⁺ 11일전 | ★ favorite | 댓글 2개
  • ECharts는 오픈소스 JavaScript 시각화 라이브러리로 PC와 모바일 모두에 최적화됨
  • Internet Explorer 9/10/11, Chrome, Firefox, Safari 등 대부분의 최신 브라우저와 호환됨
  • 자체 그래픽 렌더링 엔진인 ZRender를 사용하여 직관적이고 상호작용 가능한 고품질 차트를 제공함

다양한 차트 유형 제공

  • 라인 차트, 바 차트, 산점도, 파이 차트, 캔들스틱 차트, 박스플롯, 지도, 히트맵, 방향 정보용 라인 차트, 관계 그래프, 트리맵, 선버스트, 병렬 좌표, 퍼널 차트, 게이지 차트 등 제공
  • 다양한 시각화 유형을 조합하여 복합 차트 생성 가능
  • 사용자 정의 차트 시리즈 지원으로 renderItem 콜백 함수만 전달하면 원하는 그래픽 요소를 자유롭게 구현 가능
  • 상호작용 기능이 내장되어 추가 설정 없이 바로 사용 가능

경량화 및 구성요소 선택 다운로드 기능

  • 기본 패키지는 고도로 최적화되어 있지만 필요에 따라 차트 유형과 구성요소만 선택해 경량 패키지를 생성할 수 있음
  • 온라인 빌더를 통해 필요한 기능만 포함된 커스텀 번들 다운로드 가능

다양한 데이터 형식 지원

  • v4.0부터 dataset 속성을 통해 2차원 배열, key-value 객체 등 다양한 데이터 구조 지원
  • encode 속성으로 데이터 구조를 직관적으로 매핑 가능
  • 데이터 변환 알고리즘 작성 시간 절약 및 메모리 사용 최소화
  • 하나의 dataset을 여러 컴포넌트에서 공유 가능
  • TypedArray 지원으로 메모리 절약 및 성능 개선 가능

대용량 데이터 시각화 최적화

  • 수백만 개 데이터 포인트 시각화를 위한 인크리멘털 렌더링 기술 제공
  • 확대/축소, 이동 등 상호작용 기능도 대용량 데이터에서 원활하게 작동
  • WebSocket을 활용한 스트리밍 데이터 렌더링 지원
  • 전체 데이터를 모두 로딩하지 않고도 시각화 가능

모바일 최적화

  • 모바일 환경에서의 확대/축소 및 이동 기능에 최적화됨
  • PC에서는 마우스 휠을 통한 동일한 조작 가능
  • 모바일을 위한 소형 패키지 제공
  • SVG 렌더링 엔진 선택 시 메모리 사용량 추가 감소

다양한 렌더링 방식과 플랫폼 호환

  • Canvas, SVG (v4.0 이상), VML 등 다양한 렌더링 방식 지원
  • VML은 구형 IE 브라우저 호환, SVG는 모바일에서 메모리 효율적, Canvas는 대용량 처리에 강함
  • Node.js 환경에서는 node-canvas를 통해 서버사이드 렌더링(SSR) 가능
  • WeChat MiniProgram에서도 사용 가능
  • 커뮤니티에서 Python(pyecharts), R(echarty), Julia(ECharts.jl) 등의 언어 확장도 개발됨
  • 다양한 플랫폼과 언어 지원으로 개발자는 시각화 자체에만 집중 가능

상호작용 기반 데이터 탐색 기능

  • 줌, 팬, 필터링을 통해 전체 데이터에서 세부 데이터로 탐색 가능
  • legend, visualMap, dataZoom, tooltip, brush 등 다양한 상호작용 컴포넌트 제공
  • 사용자 인터페이스에서 다양한 방식으로 데이터 탐색 가능

다차원 데이터 시각화 기능 강화

  • ECharts 3부터 다차원 데이터 시각화 지원 강화
  • 병렬좌표계 등 전통적인 다차원 시각화 외에도 다양한 방식으로 데이터 표현 가능
  • visualMap 컴포넌트를 활용해 색상, 크기, 투명도, 음영 등 시각적 속성에 차원 데이터를 매핑 가능

실시간 데이터 반영

  • 데이터셋 변경 시 실시간으로 차트에 반영됨
  • 데이터 변경 사항을 자동으로 감지해 애니메이션을 통해 차트에 표현
  • timeline 컴포넌트를 통해 시간 흐름에 따른 데이터 표현도 가능

시각적 특수 효과 제공

  • 포인트, 라인, 지리 데이터 등 모든 유형의 데이터에 시각적 효과 적용 가능
  • 사용자의 주목을 끌고, 데이터 전달력 향상

WebGL 기반의 3D 시각화

  • ECharts GL은 WebGL 기반으로 3D 지구본, 빌딩, 인구 히스토그램 등 다양한 3D 시각화를 지원
  • 간단한 설정만으로 시각 효과를 추가 가능
  • VR 및 대형 스크린에서도 활용 가능

접근성 지원

  • W3C의 WAI-ARIA 접근성 표준 준수
  • 차트 설정 정보를 바탕으로 시각장애인용 자동 설명 생성
  • 화면 낭독기를 통한 시각화 콘텐츠 접근 가능

echart 예쁘고 괜찮아요. 개인적으로는 highcharts 보다 쓰기 쉬웠어요.

Hacker News 의견
  • Briefer를 개발하면서 거의 모든 시각화 라이브러리를 테스트했으며, Apache ECharts가 최고임

    • 다른 라이브러리의 주요 문제는 (a) 디자인이 별로임 (b) 사용이 어려움 (c) 유연성이 부족함
    • Apache ECharts는 이러한 문제를 해결함
    • 기본적으로 예쁘고, 백엔드에서 선언적 스펙을 계산하여 프론트엔드에 전송할 수 있으며, 전통적인 BI 도구가 할 수 있는 모든 것을 지원할 만큼 유연함
    • 새로운 기능을 추가할 필요 없이 필요한 모든 것이 이미 포함되어 있음
    • HN에서 이 훌륭한 작업을 보게 되어 기쁨
  • go-echarts도 추천함

    • Golang 타입으로 차트를 선언할 수 있으며, Golang의 JSON 마샬러가 자동으로 JSON에 바인딩함
    • 여러 프로젝트에서 사용했으며, 이슈나 PR이 있을 때 유지보수자가 빠르게 응답함
    • JavaScript 함수와 SQL 쿼리를 Go에 임베드하는 것이 재미있음
    • DuckDB에서 데이터를 가져와 JavaScript 툴팁이 포함된 캔들스틱 차트 파일을 생성하는 Golang 예시가 있음
  • 다른 라이브러리를 많이 시도한 후, 작년에 Apache ECharts로 결정했으며 후회하지 않음

    • 훌륭한 문서화, 성능, 높은 구성 가능성, 사용의 용이성, 필요한 모든 차트 유형 지원
  • ECharts는 최고의 라이브러리라고 생각함

    • 차트 라이브러리 목록이나 검색에서 많이 나오지 않음
    • chart.js, google charts, amCharts, Highcharts, ApexCharts를 모두 시도했음
    • 우리 도구/라이브러리에서 사용 중임
  • 2020년부터 제품에 Apache ECharts를 사용 중임

    • 강력히 추천함, 훌륭한 라이브러리, 훌륭한 문서화, 5년 동안 문제 없음
    • 키보드 접근성 티켓에 대한 개선을 바람
  • 라인 레이스가 매우 멋있음

    • 스위치를 전환하여 레이스를 시작할 수 있음
    • 노르웨이 잘했음
  • 웹 클라이언트를 위한 차트 라이브러리를 찾고 있다면 charts.css도 추천함

    • 개념이 대부분의 차트 라이브러리보다 훨씬 간단하며 동일한 기능을 달성할 수 있음
    • 서버 사이드 렌더링, htmx 등과 함께 사용하기 매우 간단함
  • ECharts라는 JS 차트 패키지 발표를 보면 1년 내에 유지보수가 중단될 것이라고 생각함

    • Apache ECharts라는 JS 차트 패키지 발표를 보면 내년에 유지보수될 것이라고 생각함
  • React/React Native를 위한 차트 라이브러리를 찾고 있었으며, Apache ECharts가 크로스 플랫폼 데이터 시각화에 훌륭한 후보임

    • react-echarts와 react-native-echarts 모두 활발히 개발 중임
    • Apache 하에 있다는 점이 프로젝트의 미래 개발 전망과 유지보수에 큰 장점임
  • AI를 위한 차트 라이브러리로 ECharts를 추가했으며, 기본 GUI 차트를 ECharts로 전환 중임

    • 선택하기 전에 광범위한 검토를 했으며, ECharts가 뛰어나고 매우 예뻐서 선택함