❮ Echarts Mediaqueries Echarts Sunburst ❯

ECharts Tutorial

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

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

ECharts is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and multiple devices, allowing for flexible display anytime, anywhere.

Prerequisites for Reading This Tutorial:

To understand this tutorial, you should have the following basics:

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 with size (width and height) for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // Initialize echarts instance based on the prepared dom
        var myChart = echarts.init(document.getElementById('main'));

        // Specify the configuration items and data for the chart
        var option = {
            title: {
                text: 'First ECharts Example'
            },
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["Shirt","Sweater","Chiffon Shirt","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>

Click the "Try It" button to view the online example.

Features of ECharts

ECharts includes the following features:

Rich Visualization Types: Offers conventional charts such as line graphs, bar charts, scatter plots, pie charts, candlestick charts, box plots for statistics, maps, heatmaps, line graphs for geographic data visualization, relational graphs, treemaps, sunburst charts for relational data visualization, parallel coordinates for multidimensional data visualization, and funnel charts, dashboards for BI, with support for mixed chart types.
Direct Use of Multiple Data Formats: The built-in dataset attribute (4.0+) supports direct input of various data sources including 2D tables, key-value pairs, and also supports TypedArray data formats.
Front-end Display of Millions of Data Points: Utilizes incremental rendering technology (4.0+) combined with detailed optimizations, allowing ECharts to display large volumes of data.
Mobile Optimization: Includes meticulous optimizations for mobile interactions, such as zooming and panning in coordinate systems using fingers on small screens. PC users can also zoom (using the mouse scroll wheel) and pan in charts.
Multiple Rendering Options, Cross-platform Use: Supports 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 zooming, tooltips, data filtering, enabling multi-dimensional data screening, view zooming, and detail display.
Support for Multidimensional Data and Rich Visual Encoding: For traditional scatter plots, the data can be multi-dimensional.
Dynamic Data: Changes in data drive changes in chart display.
Stunning Effects: Offers eye-catching effects for visualizing line data, point data, and geographic data. Achieve more powerful and stunning 3D visualization through GL: Implement 3D visualization effects in VR and large-screen scenarios.

-Barrier-free access (4.0+): Supports automatically generating descriptions based on chart configuration items, allowing blind individuals to understand chart content with the help of reading devices, making charts accessible to a wider audience!

❮ Echarts Mediaqueries Echarts Sunburst ❯