apache / echarts

GitHub

Code

Understand apache/echarts's source layout and find a starting point for your task using the saved repository evidence.

Detailed import-graph metrics were not captured for this report.

How the code fits together

Chart Type ImplementationsConcrete chart types (bar, line, pie, heatmap, etc.) with series data models and view renderers.
Chart Helpers & UtilitiesShared rendering, layout, and data processing utilities used across all chart types.
Animation & TransitionKeyframe animations, morphing transitions, and universal state change interpolation.
Layout & PositioningAlgorithms for positioning chart elements in coordinate space.
Data Transformation & ValidationPreprocessing, validation, and transformation of input data into chart-specific formats.

Files at 34f4d927eafe · descriptions are AI-written.

The descriptions and the file list come from different revisions. Check responsibilities against source.

Where to start reading

Repository root
Repository root
Suggested starting pointAI
Suggested starting pointAI
Suggested starting pointAI
Suggested starting pointAI

Find files for a task

Add data transformation/preprocessing

Suggested by the saved analysis. Some step paths were not captured or refer to generated or vendor files; only observed source files are linked.

Use `src/chart/helper/createSeriesData.ts` utilities to build internal data indexing if needed.

Add animation/transition effect

Suggested by the saved analysis. Some step paths were not captured or refer to generated or vendor files; only observed source files are linked.

Reference base animation classes from `src/animation/basicTransition.ts` for easing and timing primitives.
Integrate animation into chart view's `render()` or `update()` method; see `src/chart/line/LineView.ts` for reference.
For cross-chart transitions, extend logic from `src/animation/universalTransition.ts`.

Add visual encoding (color/size mapping)

Suggested by the saved analysis. Some step paths were not captured or refer to generated or vendor files; only observed source files are linked.

Reference existing visual patterns like `src/chart/candlestick/candlestickVisual.ts` or `src/chart/graph/categoryVisual.ts`.

Add or update tests

Use a nearby test as a pattern. Read the root manifest or contribution guide for the correct test command. These suggestions use file names, not verified execution paths.

File-name match for this task.
File-name match for this task.
File-name match for this task.

Change build or automation

Inspect the relevant configuration and the commands it runs before changing the workflow. These suggestions use file names, not verified execution paths.

File-name match for this task.
File-name match for this task.
File-name match for this task.

File paths come from a snapshot of up to 500 captured paths; an omitted file may still exist.

No public or runtime entry point can be identified from the captured paths.
Some manifest entry targets are generated output or are absent from the captured source paths. Their source implementation has not been established.
1 suggested change pattern has no captured source file and is omitted.
The file list was refreshed after the written analysis. Subsystem descriptions and suggested changes may describe an older revision.

Architecture and request flow

Start here — files every contributor must understand

AI · unverified

src/chart/bar.ts

Entry point for bar chart registration; establishes the pattern for all chart type integrations.

src/chart/helper/createSeriesData.ts

Core utility for converting raw series data into renderable format; used by nearly all chart types.

src/chart/helper/baseDraw.ts

Base rendering class for chart graphics; inherited by most chart view implementations.

src/animation/universalTransition.ts

Unified animation and transition logic across all chart types; critical for interactive state changes.

src/chart/graph/GraphSeries.ts

Graph/network chart series implementation demonstrating complex node-edge data modeling.

src/chart/helper/createRenderPlanner.ts

Render scheduling and optimization logic that determines what chart elements redraw on each frame.

src/chart/custom/CustomSeries.ts

Custom chart extension API; shows how users can define arbitrary chart types within ECharts.

Request flow

Technology choices

TypeScript

Enables compile-time type safety for complex chart rendering logic and data transformations across 30+ chart types.

ZRender canvas library (dependency)

Lightweight, optimized 2D canvas abstraction providing efficient graphic element lifecycle and rendering pipeline.

Series-View architecture

Separates data model (series) from rendering (view), allowing multiple visual representations of same data and easy chart type extension.

Layout algorithms (force, circular, funnel-specific)

Pluggable layout pipeline enables diverse chart type positioning without monolithic core; users can substitute custom layouts.

Build time and runtime

Build-time

▸
TypeScript compilation — Converts .ts files to JavaScript; type checking catches errors before runtime.
▸
Bundling & tree-shaking — Combines chart types, helpers, and animations; unused chart types can be excluded to reduce bundle size.
▸
Chart type registration — Each chart's `install.ts` registers series/view classes with ECharts factory; happens at module load time.

Runtime

▸
Data processing & validation — Raw user data flows through series preprocessors and layout algorithms on every `setOption()` call.
▸
Rendering pipeline — View renderer converts series+layout into ZRender graphic elements; updates on each frame during animation.
▸
Animation frame scheduling — Animation engine interpolates between keyframes at browser requestAnimationFrame rate; coordinates with ZRender canvas paint.
▸
Event dispatch & interaction — ZRender canvas layer captures mouse/touch events; ECharts routes to series for tooltip, selection, and drill-down.

Design trade-offs

Unified animation/transition system in `universalTransition.ts`

Simplifies user experience across chart type changes and state updates.

Animation state machine adds complexity; not all chart morphs are physically realistic.

Data transformation at series level rather than input validation layer

Chart type-specific validation (e.g., boxplot quartiles, OHLC tuples) requires domain knowledge per type.

Preprocessor logic scattered across chart folders; harder to reuse validation rules across types.

Helper classes (Symbol, LineDraw, etc.) instead of functional transforms

Encapsulates rendering state (color, size, position) and animation memory across frames.

Stateful helper instances require careful lifecycle management; can introduce memory leaks if not disposed.

Browser canvas as only rendering target (via ZRender)

Direct browser graphics API access; no abstraction layer to other backends (SVG, WebGL, etc.).

No native server-side rendering or non-browser deployment support; users must implement custom exporters.

Non-goals

✗Real-time data streaming (batches updates; does not subscribe to live data feeds)
✗3D visualization (2D canvas-based only)
✗Server-side rendering without headless browser
✗Time-series database integration (expects pre-aggregated data as input)

Code quality and hotspots

Quality Score: 90/100

Low Risk

This repo is in good health with CI, tests, and active maintenance.

High complexity -10

Maintainability grade

Static analysis

How maintainable the code looks — from complexity, code issues, test presence, file size, and hotspot load. It grades the shape of the code, not defect risk, and doesn't replace review.

26/100

A ≥ 85, B ≥ 70, C ≥ 55, D ≥ 40, F < 40

Cyclomatic complexityavg 165

0/35

Code issues0 errors, 143 warnings

0/20

Testspresent · ~100% of files

20/20

Largest file3,435 lines

0/15

Hotspot load2 high-risk files

6/10

Configuration status

CI/CD Pipeline — configured

Provider: GitHub Actions

6 GitHub Actions workflows

Test Suite — detected

1,374 test files detected

Where: test · test/asset

Test Coverage — ~100%heuristic

1,374 test files / 747 source files. This is a file-count ratio, not real line coverage — set up Codecov for authoritative numbers.

Dependency Scanning — no config detected

No Dependabot / Renovate / Snyk / Trivy / CodeQL config found. Enable Dependabot or Renovate.

Top hotspots

Files edited often AND hard to reason about. Churn = recent commit frequency, Complexity = branches and nesting, Risk = both combined. These are the highest-leverage targets for refactoring or testing.

core/echarts.ts

Churn: 32 (8 commits/180d)Complexity: 100Risk: 32

cartesian/Grid.ts

Churn: 32 (8 commits/180d)Complexity: 100Risk: 32

All hotspots

Files that change often and are complex tend to accumulate more bugs

Code metrics

Static analysis on sampled source files (up to 15 files).

Avg Cyclomatic Complexity165

Counts if/for/while/switch/catch/ternary branches

Errors / Warnings0 / 143

Secrets, empty catches, console.log, var usage, long lines

Largest File Analyzed3435 lines

src/core/echarts.ts