ECharts Tutorial

ECharts is an open-source visualization library implemented in JavaScript, covering charts for various industries to meet various needs.

ECharts provides a rich set of chart types and interaction capabilities, allowing users to generate a wide variety of charts through simple configuration, including but not limited to line charts, bar charts, scatter plots, pie charts, radar charts, maps, and more.

ECharts follows the Apache-2.0 open-source license and is free for commercial use.

ECharts is compatible with the vast majority of current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and various devices, allowing flexible display anytime, anywhere.

Knowledge you need before reading this tutorial:

To read this tutorial, you need to have the following foundation:

First ECharts Example

Example

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>First ECharts Example</title> <!--Include echarts.js--> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!--Prepare a DOM element with dimensions (width and height) for ECharts.--> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">// Based on the prepared DOM, initialize the ECharts instance var myChart = echarts.init(document.getElementById('main')); // Specify the configuration items and data for the chart var option = { title: { text: 'First ECharts Instance' }, tooltip: {}, legend: { data:['Sales'] }, xAxis: { data: ["Shirt", "Wool Sweater", "Chiffon Blouse", "Pants", "High Heels", "Socks"] }, yAxis: {}, series: [{ name: 'Sales', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // Use the configuration items and data just specified to display the chart. myChart.setOption(option);</script> </body> </html>

Try it Yourself »

Click the "Try it" button to view online examples

ECharts Features

ECharts includes the following features:

  • Rich visualization types: Provides conventional line charts, bar charts, scatter plots, pie charts, K-line charts, box plots for statistics, maps, heatmaps, and lines for geographic data visualization, relation graphs, treemaps, and sunburst charts for relational data visualization, parallel coordinates for multi-dimensional data visualization, as well as funnel charts and gauges for BI, and supports mixing and matching between charts.

  • Multiple data formats can be used directly without conversion: The built-in dataset attribute (4.0+) supports directly passing data sources in various formats, including two-dimensional tables, key-value, and more; in addition, it supports inputting data in TypedArray format.

  • Front-end display of tens of millions of data points: Through incremental rendering technology (4.0+), combined with various meticulous optimizations, ECharts can display data volumes at the ten-million level.

  • Mobile Optimization: Detailed optimizations have been made for mobile interaction, such as using fingers to zoom and pan in the coordinate system on small mobile screens. On the PC, you can also use the mouse to zoom (with the mouse wheel) and pan in the chart.

  • Multiple rendering solutions, cross-platform useSupports rendering charts in the form of Canvas, SVG (4.0+), and VML.

  • Deep interactive data exploration: Provides out-of-the-box interactive components such as legend, visual mapping, data area zoom, tooltip, data brushing, etc., enabling interactive operations like multi-dimensional data filtering, view zooming, and detail display.

  • Support for multi-dimensional data and rich visual encoding methods.: For traditional scatter plots and the like, the incoming data can also be multi-dimensional.

  • Dynamic data: Changes in data drive changes in chart presentation.

  • Gorgeous special effects: Provides eye-catching effects for the visualization of geographic data such as line data and point data.

  • Achieve more powerful and dazzling three-dimensional visualization through GL.: Achieves three-dimensional visualization effects in VR and large-screen scenarios.

  • Accessibility (4.0+)Supports automatically generating intelligent descriptions based on chart configuration, allowing blind users to understand chart content with the help of screen readers, making charts accessible to a wider audience!

other extensions