ECharts

Rich interactive charts with a declarative config.

ECharts is taught here in 12 lessons, running from Option configuration through to Accessibility, export and printing. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Option configurationInitialise a chart, read the option tree, and drive series from a dataset instead of hand-built arrays.
2. Common chart typesLine, bar and pie as the baseline, the wider family of series types, and the per-series options that change how data reads.
3. Interaction, resize and data updatesEvent handling and dispatches, keeping the chart correct when the container changes size, and the merge rules behind setOption.
4. Getting started: install, init and lifecycleChoose between the CDN build and tree-shaken ESM imports, pick canvas or SVG rendering, size the container correctly, and dispose charts so memory does not grow.
5. Datasets, dimensions and transformsDrive series from dataset.source, name your dimensions, use encode to map them, and filter or aggregate data with transforms instead of in JavaScript.
6. Coordinate systems, axes and scalesConfigure grid and Cartesian axes properly, choose between category, value, time and log axes, and lay out multiple grids without guessing at numbers.
7. Styling, themes and dark modeRegister a theme object, switch it at runtime, follow the operating system preference, and override design tokens without rebuilding the whole option.
8. Tooltips, legends, labels and visual mapsWrite formatter callbacks that produce useful tooltips, manage label overlap, and drive colour from data with visualMap, markLine and markArea.
9. DataZoom, toolbox and large-data performanceAdd inside and slider zoom, expose toolbox actions, and keep the frame rate acceptable when a series has hundreds of thousands of points.
10. Custom series and the matrix coordinate systemDraw arbitrary marks with renderItem, package them as a reusable custom series, and place charts on the matrix and calendar coordinate systems.
11. ECharts in React, Vue and AngularWrap the imperative chart in a component lifecycle, keep reactive proxies out of the option, resize correctly, and handle StrictMode double-mounting.
12. Accessibility, export and printingGenerate a text description with the aria option, add decal patterns so colour is not the only channel, export images and print at the right resolution.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery Chart.js SVG Font Awesome

FAQ