Data area scaling (DataZoom)

Basic Concepts of Data Region Scaling (DataZoom)

Data region scaling (DataZoom) is the core component in ECharts for dynamically adjusting the data range of charts. It allows users to selectively display a portion of the data through interactive operations, making it particularly suitable for visualizing large-scale datasets. The DataZoom component typically appears in charts as a slider or built-in zoom panel, enabling users to change the displayed data window by dragging, scrolling, or touch gestures.

DataZoom mainly comes in two types:

1. Slider type (dataZoom-slider): Displayed below the Cartesian coordinate system, resembling a scrollbar.
2. Built-in type (dataZoom-inside): Directly zooms within the coordinate system via mouse drag or wheel scrolling.

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }],
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 50
    }]
};

Detailed Explanation of DataZoom Configuration Parameters

The DataZoom component offers a rich set of configuration options to precisely control zoom behavior and display styles. Here are some key parameters:

Basic Configuration:

• type: Specifies the DataZoom type, either 'slider' or 'inside'.
• xAxisIndex/yAxisIndex: Controls which axes are affected.
• filterMode: Filter mode, either 'filter' (filters data) or 'weakFilter' (preserves original data).
• start/end: Initial display range percentage (0-100).

Interaction Configuration:

• zoomLock: Whether to lock the zoom functionality.
• moveOnMouseMove: Whether to update in real-time during mouse movement.
• preventDefaultMouseMove: Whether to prevent default mouse movement behavior.

Style Configuration:

• backgroundColor: Background color.
• dataBackground: Data background style.
• fillerColor: Selected area fill color.
• handleStyle: Handle style.

dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'filter',
    start: 20,
    end: 80,
    height: 20,
    bottom: 10,
    backgroundColor: '#eee',
    fillerColor: 'rgba(144,197,237,0.2)',
    borderColor: '#999',
    handleStyle: {
        color: '#666',
        borderColor: '#aaa'
    }
}]

Multi-Axis Linkage and Synchronized Control

When multiple axes exist in a chart, DataZoom can achieve linkage effects between axes. By configuring the xAxisIndex and yAxisIndex arrays, a single DataZoom component can control multiple axes simultaneously.

option = {
    xAxis: [
        {type: 'category', data: ['A', 'B', 'C', 'D', 'E']},
        {type: 'category', data: ['一', '二', '三', '四', '五']}
    ],
    yAxis: [
        {type: 'value'},
        {type: 'value'}
    ],
    series: [
        {xAxisIndex: 0, yAxisIndex: 0, data: [10, 22, 28, 43, 49], type: 'line'},
        {xAxisIndex: 1, yAxisIndex: 1, data: [5, 12, 18, 23, 29], type: 'bar'}
    ],
    dataZoom: [{
        type: 'slider',
        xAxisIndex: [0, 1],  // Controls both x-axes
        start: 30,
        end: 70
    }]
};

Dynamic Data Updates and DataZoom

When chart data is updated dynamically, DataZoom behavior can be controlled via the zoomOnDataUpdate parameter. This parameter determines whether to maintain the current zoom state during data updates.

// Initial configuration
option = {
    dataZoom: [{
        type: 'slider',
        zoomOnDataUpdate: false  // Does not reset zoom on data update
    }],
    series: [{
        type: 'line',
        data: initialData
    }]
};

// Updating data
function updateData() {
    chart.setOption({
        series: [{
            data: newData
        }]
    });
}

Mobile Adaptation and Gesture Support

DataZoom includes specialized optimizations for gesture support on mobile devices. Parameters like zoomOnMouseWheel, moveOnMouseMove, and preventDefaultMouseMove can be configured to enhance touch experience.

dataZoom: [{
    type: 'inside',
    zoomOnMouseWheel: false,  // Disables wheel zoom
    moveOnMouseMove: true,   // Real-time updates during touch movement
    preventDefaultMouseMove: true  // Prevents default touch behavior
}]

Advanced Applications: Custom DataZoom Controllers

For special requirements, DataZoom control logic can be fully customized. By listening to the dataZoom event, external controls can interact with DataZoom.

// External button controls DataZoom
document.getElementById('zoom-in').addEventListener('click', function() {
    chart.dispatchAction({
        type: 'dataZoom',
        start: 10,
        end: 50
    });
});

// Listens to DataZoom changes
chart.on('dataZoom', function(params) {
    console.log('Current zoom range:', params.start, params.end);
});

Performance Optimization Tips

When handling large datasets, DataZoom performance optimization is crucial:

1. Use throttle to limit frequent triggers.
2. Set an appropriate filterMode.
3. Consider using dataSampling strategies.
4. For static charts, disable animations.

dataZoom: [{
    type: 'slider',
    throttle: 100,  // 100ms throttling
    filterMode: 'weakFilter',  // Preserves original data
    animation: false  // Disables animations
}]

Practical Example: Stock K-Line Chart Application

DataZoom is widely used in financial charts, especially in K-line chart scenarios. Below is a complete K-line chart configuration example:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['Daily K', 'MA5', 'MA10', 'MA20']
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: klineData.categoryData,
        boundaryGap: false,
        axisLine: { onZero: false }
    },
    yAxis: {
        scale: true,
        splitArea: { show: true }
    },
    dataZoom: [
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 50,
            end: 100
        },
        {
            type: 'slider',
            xAxisIndex: [0],
            start: 50,
            end: 100,
            height: 20,
            bottom: 5
        }
    ],
    series: [
        {
            name: 'Daily K',
            type: 'candlestick',
            data: klineData.values,
            itemStyle: {
                color: '#ef232a',
                color0: '#14b143',
                borderColor: '#ef232a',
                borderColor0: '#14b143'
            }
        },
        {
            name: 'MA5',
            type: 'line',
            data: calculateMA(5),
            smooth: true,
            lineStyle: { opacity: 0.5 }
        }
    ]
};

Combining DataZoom with Maps

DataZoom is not only suitable for Cartesian coordinates but can also be combined with maps to achieve selective display of map regions.

option = {
    geo: {
        map: 'china',
        roam: true
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: geoData
    }],
    dataZoom: [{
        type: 'inside',
        geoIndex: 0,  // Controls the geo component
        zoomOnMouseWheel: true,
        moveOnMouseMove: true
    }]
};

Common Issues and Solutions

1. DataZoom Not Working

   • Check if the axis indices are correct.
   • Confirm if the dataset is large enough (small datasets may automatically disable zooming).

2. Abnormal Zoom Range

   • Verify if start/end values are within the 0-100 range.
   • Check if minValueSpan/maxValueSpan settings are reasonable.

3. Performance Issues

   • For large datasets, consider using large mode.
   • Enable dataSampling to reduce rendered data volume.

// Performance optimization example
series: [{
    type: 'line',
    large: true,  // Enables large data mode
    data: largeDataSet
}],
dataZoom: [{
    type: 'slider',
    dataSampling: 'lttb'  // Uses LTTB sampling algorithm
}]