Introduction and Development History of ECharts

Author：Chuan Chen 阅读数：22343人阅读分类： ECharts

ECharts is an open-source visualization library developed by Baidu's front-end team, widely used in the field of data visualization. Based on JavaScript, it offers a rich variety of chart types and interactive features, supports multiple data formats, and enables dynamic data updates. From its initial simple charts to its current powerful visualization capabilities, ECharts has undergone several major version iterations, gradually becoming one of the preferred chart libraries for developers.

The Birth of ECharts

In 2013, Baidu's front-end team encountered data visualization needs in internal projects. At the time, mature chart libraries on the market were mostly foreign products, such as Highcharts and D3.js. These libraries either came with high commercial licensing fees or had steep learning curves. To address these issues, Baidu decided to develop an open-source, easy-to-use, and feature-rich visualization library. Initially named "Enterprise Charts," it was later simplified to ECharts.

Early versions of ECharts primarily provided basic chart functionalities, such as line charts, bar charts, and pie charts. Its core design principles were:

Configuration-driven: Generate charts via JSON configuration
Responsive design: Automatically adapt to different screen sizes
Rich interactivity: Supports operations like zooming and dragging

// Simple example from ECharts 1.x
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

Key Version Evolution

ECharts 2.x: Establishing the Foundation

The 2.0 release in 2015 was a significant milestone in ECharts' history. This version revamped the underlying architecture and introduced a more flexible component system. Major improvements included:

Added map visualization capabilities
Enhanced animation system
Support for SVG rendering
Introduction of a theme system

The addition of map functionality allowed ECharts to handle geospatial data, a rare feature among domestic products at the time. Developers could easily create visualizations for provincial, municipal, or even custom regions.

// ECharts 2.x map example
myChart.setOption({
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: 'Beijing', value: 100},
            {name: 'Shanghai', value: 200}
        ]
    }]
});

ECharts 3.x: Comprehensive Upgrade

The 3.0 release in 2016 underwent a complete overhaul, with major changes including:

Adoption of WebGL for high-performance rendering
Addition of 20+ new chart types
Improved coordinate system
Introduction of the dataset concept

This version significantly enhanced performance for large-scale data scenarios, enabling smooth rendering of hundreds of thousands of data points using WebGL technology. New chart types like Sankey diagrams and Sunburst charts met more specialized visualization needs.

// ECharts 3.x dataset example
myChart.setOption({
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1]
        ]
    },
    series: [{
        type: 'bar',
        encode: {
            x: 'product',
            y: '2016'
        }
    }]
});

ECharts 4.x: Enhanced Interactivity and Animation

The 4.0 release in 2018 focused on improving user experience, with key features including:

A new animation system
Improved touch interactions
Enhanced visual mapping
Multi-language support

This version particularly optimized mobile experience, ensuring smooth operation on various touch devices. The revamped animation system made transitions more natural and fluid.

// ECharts 4.x animation configuration example
myChart.setOption({
    animationDuration: 2000,
    animationEasing: 'elasticOut',
    series: [{
        type: 'pie',
        data: [
            {value: 335, name: 'Direct Access'},
            {value: 310, name: 'Email Marketing'}
        ]
    }]
});

ECharts 5.x: Advancing Professional Visualization

The 5.0 release in 2020 marked ECharts' entry into professional visualization, with major new features including:

A new SVG renderer
Improved tree diagram layouts
Enhanced timeline functionality
Support for Lottie animations
New visualization types: Pictorial charts

This version strengthened dynamic data display capabilities, with timeline features better showcasing data trends over time. The addition of an SVG renderer made vector graphic exports possible.

// ECharts 5.x timeline example
myChart.setOption({
    baseOption: {
        timeline: {
            data: ['2013', '2014', '2015']
        },
        series: [{
            type: 'line',
            data: []
        }]
    },
    options: [
        {series: [{data: [10, 20, 30]}]},
        {series: [{data: [15, 25, 35]}]},
        {series: [{data: [20, 30, 40]}]}
    ]
});

Core Technical Features

Declarative Configuration System

ECharts adopts a declarative configuration approach, where developers describe "what" rather than "how." This design significantly lowers the barrier to entry, with a complete chart often requiring just a few dozen lines of configuration code.

// Typical ECharts configuration structure
{
    title: {...},       // Title component
    legend: {...},      // Legend component
    xAxis: {...},       // X-axis
    yAxis: {...},       // Y-axis
    series: [{...}]     // Series list
}

Multi-Renderer Support

ECharts supports multiple rendering methods:

Canvas: Default renderer, best performance
SVG: Vector output, suitable for high-resolution displays
WebGL: Handles ultra-large datasets

Developers can choose the most suitable rendering method for their needs, or even mix different renderers on the same page.

Rich Extension Mechanisms

ECharts offers various extension points:

Custom series
Custom components
Custom shapes
Plugin system

These mechanisms enable developers to create highly customized visualizations. For example, custom series can implement unique chart types.

// Custom series example
myChart.setOption({
    series: [{
        type: 'custom',
        renderItem: function(params, api) {
            // Custom drawing logic
            return {
                type: 'group',
                children: [...]
            };
        },
        data: [...]
    }]
});

Ecosystem and Community

ECharts boasts a vibrant open-source community, with a rich ecosystem built around the core library:

ECharts GL: 3D visualization extension
ECharts-X: Enhanced version with more professional charts
Apache ECharts: Donated to the Apache Foundation
Multi-language wrappers: Libraries for Python, R, etc.

The community has contributed numerous extensions and themes, making it easy for developers to find resources for their projects. Comprehensive documentation in both Chinese and English lowers the learning curve.

Real-World Applications

ECharts has been widely adopted in various scenarios:

Business intelligence: Alibaba's data platform uses ECharts for interactive reports
Media visualization: News organizations like CCTV use it for data journalism
Geographic information systems: Handles large-scale geospatial data visualization
Scientific research: Displays complex research data

A typical commercial application is e-commerce dashboards, which can display real-time sales data, user behavior, and other multidimensional information.

// E-commerce dashboard example
myChart.setOption({
    tooltip: {...},
    toolbox: {...},
    dataset: {...},
    xAxis: {type: 'category'},
    yAxis: {type: 'value'},
    series: [
        {type: 'bar', name: 'Sales'},
        {type: 'line', name: 'Conversion Rate'}
    ],
    visualMap: {
        type: 'piecewise',
        pieces: [...],
        inRange: {...}
    }
});

Performance Optimization Strategies

For large-scale data scenarios, ECharts provides multiple optimization techniques:

Data sampling: Displays summaries of large datasets
Progressive rendering: Renders in batches to avoid UI freezes
WebWorker support: Background processing for computational tasks
Visual mapping: Encodes data via color and size

// Large dataset optimization example
myChart.setOption({
    series: [{
        type: 'scatter',
        progressive: 2000,  // Progressive rendering
        data: largeData,
        dimensions: [...],
        encode: {...}
    }]
});