9.1. ECharts tutorial

9.1.1. What you need to know before reading this tutorial: ¶

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

• HTML tutorial

• JavaScript tutorial

9.1.2. First ECharts instance ¶

Example

9.1.3. ECharts characteristics ¶

ECharts includes the following features:

• Rich visualization types: provide conventional line chart, column chart, scatter chart, pie chart, K chart, box chart for statistics, map, thermal map, line chart for geographic data visualization, relational data visualization diagram, treemap, rising sun chart, parallel coordinates for multi-dimensional data visualization, funnel chart for BI, dashboard, and support the mash-up between charts and charts.

• Multiple data formats can be used directly without conversion: built-in dataset properties (4.0+) support direct input, including two-dimensional tables， key-value and other data sources in multiple formats, in addition to supporting input TypedArray Data in the format. Front-end display of tens of millions of data: through incremental rendering technology (4.0 +), with a variety of detailed optimization ECharts can show tens of millions of levels of data.

• Mobile optimization: detailed optimization is made for the interaction of the mobile terminal, for example, the small screen of the mobile terminal issuitable for zooming and translating with fingers in the coordinate system.The PC side can also use the mouse to zoom (scroll wheel with the mouse), pan, and so on.

• Multi-rendering scheme, cross-platform use: support rendering charts in the form of Canvas, SVG (4.0 +) and VML.

• In-depth interactive data exploration: provide out-of-the-box interactive components such as legend, visual mapping, data area scaling, tooltip, data brushing, etc., which can perform multi-dimensional data filtering, view zooming, showing details and other interactive operations.

• Support for multi-dimensional data and rich visual coding methods: for traditional scatter maps, the incoming data can also be multi-dimensional.

• Dynamic data: changes in data drive changes in the presentation of the chart.

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

• Through GL to achieve more powerful and gorgeous 3D visualization: in VR, large screen scene to achieve 3D visualization.

• Barrier-free access (4.0 +): support automatic intelligent generation of descriptions according to chart configuration items, so that the blind can understand the contents of the chart with the help of reading devices, so that the chart can be accessed by more people!