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 first go to [Examples] to check out the different types of charts and templates it provides (as shown in Screenshot 1).

ECharts 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.

ECharts screenshot 2
(Screenshot 2)
ECharts screenshot 3
(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).

ECharts screenshot 4
(Screenshot 4)
ECharts screenshot 5
(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:


最終更新日時: 2023年 11月 2日(木曜日) 12:38