Author: Cindy Liang

ECharts is open-sourced under Apache License 2.0. It is a powerful and interactive visualisation tool for browsers. This post will introduce the basic features and types of charts it covers.

Find the type you need

After landing on the page Apache ECharts (https://echarts.apache.org/en/index.html), please firstly go to [Examples] to check out the different types of charts and templates it provides (as shown in Screenshot 1).

(Screenshot 1)

Here I would like to provide a checklist for your reference:

  • Line, Bar, Pie, Scatter, GEO/Map, Candlestick, Radar, Boxplot
  • Heatmap, Graph, Lines, Tree, Treemap, Sunburst, Parallel
  • Sankey, Funnel, Gauge, PictorialBar, ThemeRiver, Calendar
  • Custom, Dataset, DataZoom, Drag, Rich Text
  • 3D Globe, 3D Bar, 3D Scatter, 3D Surface, 3D Map, 3D Lines, 3D Line
  • Scatter GL, Lines GL, Flow GL, Graph GL

Edit the chart

Let’s try one example. Go to [Line], click on the first template [Basic Line Chart], and we can see Screenshot 2. There are two sets of data that we can easily replace with our own data. As shown in Screenshot 3, I replaced the second line of data with [100, 100, 100, 50, 100, 100, 100], the chart on the right-hand side will be changed automatically when the data is updated.

(Screenshot 2)
(Screenshot 3)

Download the chart

We can download and save the chart in the HTML format by clicking on [Download] (Screenshot 4), or save it in a PNG format by clicking on [Screenshot] (Screenshot 5).

(Screenshot 4)
(Screenshot 5)

More information

ECharts also provides materials that help users to get started:

  1. Handbook: https://echarts.apache.org/handbook/en/get-started/

If you already have basic knowledge of data visualisation, you can browse more to help sharpen your skills:

  1. Spread Sheet Tool: https://echarts.apache.org/en/spreadsheet.html
  2. Theme Builder: https://echarts.apache.org/en/theme-builder.html
  3. Cheat Sheet: https://echarts.apache.org/en/cheat-sheet.html
  4. More Resources: https://echarts.apache.org/en/resources.html
  5. Source Code (Github): https://github.com/apache/echarts
  6. FAQ: https://echarts.apache.org/en/faq.html

Or you can also check out this video created by Kirell Benzi to help you get started:


Last modified: Wednesday, 26 October 2022, 3:37 PM