ECharts Tutorial

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

ECharts provides a rich variety of chart types and interaction capabilities, enabling users to generate all kinds 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 supports multiple devices, allowing flexible display anytime, anywhere.

Before reading this tutorial, you need to know:

To read this tutorial, you need the following prerequisites:

Your 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, line maps for geographic data visualization, relationship graphs, treemap, sunburst charts for relational data visualization, parallel coordinates for multidimensional 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 property (4.0+) supports directly passing data sources in various formats including two-dimensional tables, key-value, and also supports input of TypedArray format data.

  • Front-end display of tens of millions of data: Through incremental rendering technology (4.0+) combined with various meticulous optimizations, ECharts is capable of displaying tens of millions of data points.

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

  • Multiple rendering schemes, cross-platform useSupports rendering charts in Canvas, SVG (4.0+), and VML formats.

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

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

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

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

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

  • Accessibility (4.0+): Supports automatically generating descriptions based on chart configuration items, allowing blind people to understand chart content with the help of screen reader devices, making charts accessible to more people!

other extensions