The version evolution and differences of ECharts

ECharts, as an open-source data visualization library developed by Baidu, has undergone several major version iterations since its inception in 2013, with significant differences in functionality, performance, and API design across versions. From the early 2.x to the current 5.x, ECharts has progressively enhanced capabilities such as dynamic interaction, multi-platform adaptation, and 3D rendering while maintaining strong backward compatibility. Below is an analysis of the core features and differences between versions.

ECharts 2.x: Foundation Establishment

The 2.x version laid the core architecture of ECharts, with main features including:

• Basic Chart Support: Conventional chart types like line, bar, and pie charts
• SVG+Canvas Dual Rendering Engines: Developers could freely choose the rendering mode
• Responsive Design: Container adaptation via the resize() method

// Typical initialization code in 2.x
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10]
    }]
});

Limitations:

• Simple animation effects
• Manual handling required for mobile adaptation
• Lacked complex interactive features like data zoom linkage

ECharts 3.x: Performance and Experience Leap

The 3.x version released in 2016 underwent a comprehensive overhaul:

• Performance Optimization: Rendering speed improved by 5-8x (official data)
• New Chart Types: Added radar charts, heatmaps, tree diagrams, etc.
• Visual Mapping System: Automatic data-to-color mapping via the visualMap component

// New visualMap configuration in 3.x
option = {
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        }
    }
}

Major Changes:

• Deprecated shorthand form of itemStyle.normal
• Event system refactored to use the on method for binding events
• Introduced the dataset concept (required explicit enabling)

ECharts 4.x: Multidimensional Data Analysis

The 4.x version focused on complex data scenarios:

• Enhanced Dataset: Supported dimensions definition and multidimensional data filtering
• Custom Series: Personalized charts via renderItem
• TypeScript Support: Provided complete type definition files

// TypeScript example in 4.x
interface EChartsOption {
    dataset?: DatasetOption | DatasetOption[];
    series: SeriesOption[];
}

const option: EChartsOption = {
    dataset: {
        source: [[1,2],[3,4]]
    },
    series: {
        type: 'scatter'
    }
};

Breakthrough Features:

• Geographic coordinate system supported GeoJSON data
• Added transform data converter
• Animation system supported keyframe definitions

ECharts 5.x: Intelligence and 3D Visualization

Core improvements in the current stable version 5.x:

• 3D Charts: Introduced GL rendering engine for 3D bar charts and surface plots
• Dynamic Data: appendData enabled incremental rendering for million-level data
• Accessibility: Supported ARIA labels and keyboard navigation

// 3D chart configuration in 5.x
option = {
    grid3D: {},
    xAxis3D: { type: 'category' },
    yAxis3D: {},
    zAxis3D: {},
    series: [{
        type: 'bar3D',
        data: [[0,0,1], [1,1,2]]
    }]
}

Architectural Changes:

• Separated zrender underlying dependency as an independent package
• Built-in SVG export tool (required extension import)
• Theme system supported dynamic switching

Cross-Version Compatibility Strategy

ECharts adopts semantic versioning, but note:

1. CSS Class Name Changes: Chart container class name changed to echarts-instance after 4.x
2. API Deprecation Policy: For example, 3.x's markPoint configuration in 5.x requires using markLine instead
3. Plugin Mechanism Differences: 5.x requires explicit registration of extension components

// Plugin registration in 5.x (e.g., liquid fill chart)
import 'echarts-liquidfill';
echarts.registerTransform('filter', myFilterTransform);

Version Selection Recommendations

Version recommendations for different scenarios:

• Legacy System Maintenance: 2.2.7 (last version supporting IE8)
• Mobile H5: 4.9+ (optimized touch event handling)
• Big Data Dashboards: 5.3+ (supports WebWorker data preprocessing)
• Scientific Visualization: 5.2+ (full GL rendering support)

// Detecting current version features
if (typeof echarts.registerMap === 'function') {
    // 3.x+ features
}
if (echarts.graphic && echarts.graphic.Mesh) {
    // 5.x 3D support
}

Upgrade and Migration Practices

Typical issues when migrating from 2.x to 5.x:

1. Theme Adaptation: Change theme configuration from string to object
2. Animation Configuration: animationDuration requires animationEasing
3. Event Listening: click event parameters changed to objects containing dataIndex

// Event handling changes example
// 2.x
myChart.on('click', function(param) {
    console.log(param.name);
});

// 5.x
myChart.on('click', { seriesIndex: 0 }, function(event) {
    console.log(event.data.name);
});

Future Version Roadmap

According to the official roadmap:

• WebGPU rendering support (experimental features already emerging)
• Enhanced VR/AR scenario adaptation
• Automated chart recommendation engine
• Finer-grained tree-shaking optimization