ECharts

Apache ECharts is a free, open-source charting and visualization library written in pure JavaScript and built on the lightweight zrender rendering engine. It lets developers add intuitive, richly interactive, and highly customizable charts to web applications through a single declarative options object.

With more than 20 built-in chart types, dual canvas and SVG rendering, coordinate systems for cartesian, polar, geographic, and graph layouts, and first-class support for large datasets and server-side rendering, ECharts scales from a simple line chart to complex analytical dashboards without leaving the same API.

What You Get

• 20+ built-in chart types including line, bar, pie, scatter, candlestick, boxplot, heatmap, tree, graph, sunburst, sankey, gauge, and map
• Dual rendering backends (canvas and SVG) selectable per instance to trade off performance and DOM inspectability
• Coordinate systems for cartesian, polar, geographic, parallel, and graph layouts
• Rich built-in interaction components: tooltip, legend, dataZoom, brush, toolbox, and visualMap
• Performance features for large datasets, progressive rendering, and server-side rendering (SSR)

Common Use Cases

• Building analytical dashboards with linked, interactive charts
• Rendering geographic and map-based data visualizations
• Displaying financial and time-series data such as candlestick and line charts
• Producing server-side-rendered chart images for reports and emails

Under The Hood

Architecture - ECharts follows a model-view pipeline coordinated by src/core/echarts.ts, which wraps the zrender rendering engine and drives a task-based Scheduler (src/core/Scheduler.ts, task.ts) that stages data processing, visual encoding, and layout before painting. Charts (src/chart/), components (src/component/), coordinate systems (src/coord/*), and data models (src/data, src/model) are registered as pluggable extensions through ExtensionAPI and a lifecycle module, so a single declarative option object is reconciled into series and component views that zrender paints to either a canvas or SVG backend.

Tech Stack - The source is roughly 88% TypeScript with a thin JavaScript surface, depending on just two runtime packages: zrender (the 2D rendering engine that abstracts canvas/SVG) and tslib. It builds through custom Node scripts in build/ that emit CommonJS, ESM, extension, and SSR bundles, with type checking via tsc and linting via ESLint.

Code Quality - Every source file carries Apache license headers and the codebase is strictly typed. Testing combines a Jest unit-test suite (test/ut, ~29 spec files) with an extensive catalog of visual regression HTML cases under test/, reflecting the difficulty of asserting on rendered graphics; the split of logic-level unit tests and visual tests is a deliberate quality strategy for a rendering library.

API Design - The public surface is intentionally small and declarative: echarts.init(dom) returns an instance and chart.setOption({…}) declares axes, series, and components in one object that the library diffs on update. Naming is consistent across chart types and components, official documentation (handbook, API reference, and an option manual) is thorough, and getting a first chart on screen requires only a container element and an option, keeping boilerplate minimal despite a large configuration schema.