ECharts 및 EChartsGL 아키텍처 분석

Oct 1, 2025 updated Oct 1, 2025 3d architecture aws legacy visualization

라이브러리 구조 분석

ECharts Core 구성 요소

ECharts는 강력한 데이터 시각화 라이브러리로, 다음과 같은 핵심 구성 요소로 이루어져 있습니다:

graph TD
    A[ECharts Core] --> B[Renderer]
    A --> C[Data Processing]
    A --> D[Component Model]
    A --> E[Series Model]
    A --> F[Coordinate System]
    A --> G[Animation]
    A --> H[Event System]
    B --> B1[ZRender]
    B1 --> B2[Canvas Renderer]
    B1 --> B3[SVG Renderer]
    B1 --> B4[VML Renderer]

주요 구성 요소 설명:

Renderer (렌더러): ZRender를 통해 Canvas, SVG, VML 등 다양한 렌더링 방식 지원
Data Processing (데이터 처리): 원시 데이터를 시각화에 적합한 형태로 변환
Component Model (컴포넌트 모델): 축, 범례, 툴팁 등 차트 구성 요소 관리
Series Model (시리즈 모델): 실제 데이터 시리즈와 시각화 방식 정의
Coordinate System (좌표계): 데이터를 시각적 공간에 매핑하는 좌표 시스템
Animation (애니메이션): 부드러운 전환 효과와 상호작용 애니메이션 처리
Event System (이벤트 시스템): 사용자 상호작용 처리 및 내부 이벤트 관리

라이브러리 구조 및 주요 모듈

ECharts와 EChartsGL의 전체 구조는 다음과 같이 구성됩니다:

graph TD
    A[ECharts] --> B[ECharts Core]
    A --> C[Extensions]
    C --> D[EChartsGL]
    C --> E[Other Extensions]

    D --> F[Core GL]
    D --> G[Chart Types]
    D --> H[Coordinate Systems]

    F --> F1[LayerGL]
    F --> F2[ViewGL]
    F --> F3[ClayGL Integration]

    G --> G1[Bar3D]
    G --> G2[Line3D]
    G --> G3[Surface]
    G --> G4[Scatter3D]
    G --> G5[Cone3D]

    H --> H1[Grid3D]
    H --> H2[Globe]
    H --> H3[Geo3D]
    H --> H4[Cartesian3D]

EChartsGL 주요 모듈:

Core GL: WebGL 렌더링을 위한 핵심 모듈
- LayerGL: WebGL 레이어 관리
- ViewGL: 3D 뷰 관리 및 카메라 제어
- ClayGL Integration: 저수준 WebGL 라이브러리 통합
Chart Types: 다양한 3D 차트 유형 구현
- Bar3D: 3D 막대 차트
- Line3D: 3D 선 차트
- Surface: 3D 표면 차트
- Scatter3D: 3D 산점도
- Cone3D: 3D 원뿔 차트
Coordinate Systems: 3D 좌표계 시스템
- Grid3D: 3D 직교 좌표계
- Globe: 구형 좌표계
- Geo3D: 3D 지리 좌표계
- Cartesian3D: 3D 데카르트 좌표계

핵심 클래스 및 인터페이스 관계도

EChartsGL의 핵심 클래스와 인터페이스 간의 관계는 다음과 같습니다:

classDiagram
    class EChartsGL {
        -_layers: Object
        -_zr: ZRender
        +update(ecModel, api)
    }

    class LayerGL {
        -renderer: WebGLRenderer
        -scene: Scene
        -camera: Camera
        +addView(view)
        +removeView(view)
        +render()
    }

    class ViewGL {
        -scene: Scene
        -camera: Camera
        -viewport: Object
        +setPerspective()
        +setOrthographic()
        +setViewport()
    }

    class SeriesModel {
        +type: String
        +coordinateSystem: CoordinateSystem
        +getData(): List
        +getFormattedLabel()
    }

    class ChartView {
        +render(seriesModel, ecModel, api)
        +updateLayout(seriesModel, ecModel, api)
        +highlight(seriesModel, ecModel, api, payload)
    }

    class CoordinateSystem {
        +dimensions: Array
        +dataToPoint(data): Array
        +pointToData(point): Array
    }

    class Geometry {
        +attributes: Object
        +indices: Array
        +dirty()
        +updateBoundingBox()
    }

    EChartsGL --> LayerGL : manages
    LayerGL --> ViewGL : contains
    SeriesModel <|-- Bar3DSeries : extends
    SeriesModel <|-- Cone3DSeries : extends
    ChartView <|-- Bar3DView : extends
    ChartView <|-- Cone3DView : extends
    CoordinateSystem <|-- Grid3D : implements
    CoordinateSystem <|-- Globe : implements
    Geometry <|-- Bars3DGeometry : extends
    Geometry <|-- ConesGeometry : extends

렌더링 파이프라인 분석

EChartsGL의 렌더링 파이프라인에 대한 자세한 내용은 ECharts-GL 3D 렌더링 파이프라인 문서를 참조하세요.

렌더링 흐름 요약

EChartsGL의 렌더링 흐름은 다음과 같은 단계로 이루어집니다:

초기화: ECharts 인스턴스 생성 및 EChartsGL 확장 로드
옵션 설정: 차트 구성 옵션 설정 및 처리
모델 생성: 시리즈 모델 및 컴포넌트 모델 생성
좌표계 초기화: 3D 좌표계 생성 및 설정
레이아웃 계산: 데이터 항목의 위치, 크기, 방향 계산
화면 초기화: WebGL 컨텍스트 생성 및 초기화
렌더링: ClayGL을 통한 WebGL 렌더링 수행

WebGL과의 통합 포인트

EChartsGL은 다음과 같은 방식으로 WebGL과 통합됩니다:

ZRender와의 통합

graph TD
    A[ECharts] --> B[ZRender]
    B --> C[Canvas Layer]
    B --> D[SVG Layer]
    B --> E[VML Layer]
    B --> F[GL Layer]
    F --> G[LayerGL]
    G --> H[ClayGL]
    H --> I[WebGL Context]

ZRender는 ECharts의 렌더링 엔진으로, LayerGL을 통해 WebGL 렌더링을 지원합니다. LayerGL은 ZRender의 레이어 시스템에 통합되어 기존 2D 렌더링과 함께 작동합니다.

GL Layer 활용 방식

LayerGL은 다음과 같은 방식으로 WebGL 렌더링을 관리합니다:

레이어 관리: 각 zlevel에 대한 WebGL 레이어 생성 및 관리
뷰 관리: 여러 ViewGL 인스턴스를 하나의 LayerGL에 추가 가능
렌더링 통합: ZRender의 렌더링 파이프라인에 WebGL 렌더링 통합
텍스처 관리: 이미지 및 캔버스를 WebGL 텍스처로 변환 및 관리

Texture 활용 방식

EChartsGL은 다음과 같은 방식으로 텍스처를 활용합니다:

라벨 렌더링: 텍스트 라벨을 캔버스에 렌더링한 후 텍스처로 변환
이미지 매핑: 이미지를 텍스처로 변환하여 3D 객체에 매핑
환경 매핑: 환경 맵을 텍스처로 사용하여 반사 효과 구현
그림자 매핑: 그림자 맵을 텍스처로 사용하여 그림자 효과 구현

목차