Apache ECharts

How ECharts is used

Apache ECharts is a charting library for the browser, and its defining characteristic is how a chart is expressed.

You do not build a chart step by step. You describe it: one object stating what the data is, which series should be drawn, what the axes look like, whether there is a legend and how the chart responds to interaction. The library takes that object and renders it.

Why a declarative object is useful

Describing a chart as data rather than as a sequence of instructions has consequences beyond style.

The definition can be generated. A server can decide what chart to return and send the configuration, and the page simply renders whatever arrives. Charts become something a system produces rather than something a developer writes for each case.

It can also be stored. A saved chart is a saved object, so a user configuring a view and keeping it is a matter of storing that structure.

And it can be changed predictably, because updating a chart means updating parts of the object rather than working out which drawing calls to reissue.

The chart catalogue

The library covers the familiar types, and it also covers several that usually mean adding another dependency:

• Relationship charts showing connections between items.
• Hierarchy charts such as trees and nested rectangles.
• Geographic charts placing values on a map.
• Distribution charts including heatmaps.

Having these in the same library matters when an application shows more than one kind of visualisation, because it avoids mixing libraries that style and behave differently.

Canvas or vector

ECharts can draw to canvas or produce vector output, and the choice is a real one.

Vector output stays sharp at any size and keeps each element addressable, which suits charts that will be scaled, printed or styled.

Canvas generally handles a very large number of points more comfortably, because it draws pixels rather than maintaining an element per mark.

Large series

Charts with many thousands of points are a common failure case for browser libraries.

ECharts provides options for it: drawing progressively so the page stays responsive while a large series renders, and letting a reader zoom into a range so the full series does not need drawing at full detail at once.

Who uses it

ECharts is used by web developers embedding charts in products and internal tools, and by teams that want one library covering both ordinary charts and the less common types.

Points to consider

The configuration object is large. Options are numerous and nested, and a first chart usually involves reading the reference rather than guessing. That verbosity is the cost of the flexibility.

As with any browser charting library, data volume needs thought. The options for large series help, and they do not remove the need to aggregate before plotting when the underlying data is very large.

Getting started

The official site provides a getting started guide, a full option reference and a gallery of examples with editable source. Copying an example and replacing its data is the quickest route to a first working chart, with the option reference for anything to be adjusted afterwards.