ECharts Interactive Components

ECharts provides many interactive components: legend component, title component, visualMap component, dataZoom component, timeline component.

In the following content, we will introduce how to use the dataZoom component.

dataZoom

The dataZoom component can implement the function of zooming in and out of the chart by scrolling the mouse wheel.

By default, dataZoom controls the x-axis, i.e., it performs on the x-axis.Data window zoomandData window panoperation.

Example

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // This dataZoom component controls the x-axis by default.
            type: 'slider', // This dataZoom component is a slider-type dataZoom component.
            start: 10,      // Left at 10% position.
            end: 60         // Right at 60% position.
        }
    ],
    series: [
        {
            type: 'scatter', // This is a scatter chart
            itemStyle: {
                opacity: 0.8
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

Try it Yourself »

The above example can only zoom in or out of the chart by dragging the dataZoom component. If you want to drag within the coordinate system, and zoom using the mouse wheel (or a two-finger swipe on mobile touch screens), you need to additionally add an inside-type dataZoom component.

Based on the above example, we addtype: 'inside'the configuration information of:

Example

option = {
    ...,
    dataZoom: [
        {   // This dataZoom component controls the x-axis by default.
            type: 'slider', // This dataZoom component is a slider-type dataZoom component.
            start: 10,      // Left at 10% position.
            end: 60         // Right at 60% position.
        },
        {   // This dataZoom component also controls the x-axis.
            type: 'inside', // This dataZoom component is an inside-type dataZoom component.
            start: 10,      // Left at 10% position.
            end: 60         // Right at 60% position.
        }
    ],
    ...
}

Try it Yourself »

Of course, we can use dataZoom.xAxisIndex or dataZoom.yAxisIndex to specify which axis or axes the dataZoom controls.

Example

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
    data1.push([random(15), random(10), random(1)]);
    data2.push([random(10), random(10), random(1)]);
    data3.push([random(15), random(10), random(1)]);
}

option = {
    animation: false,
    legend: {
        data: ['scatter', 'scatter2', 'scatter3']
    },
    tooltip: {
    },
    xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ],
    series: [
        {
            name: 'scatter',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data1
        },
        {
            name: 'scatter2',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data2
        },
        {
            name: 'scatter3',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8,
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data3
        }
    ]
}

Try it Yourself »
other extensions