ECharts Interactive Components

ECharts provides various interactive components such as legend, title, visualMap, dataZoom, and timeline.

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

dataZoom

The dataZoom component allows you to zoom in and out of the chart by scrolling the mouse wheel.

By default, dataZoom controls the x-axis, performing data window zooming and data window panning operations on the x-axis.

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,      // The left side is at the 10% position.
            end: 60          // The right side is at the 60% position.
        }
    ],
    series: [
        {
            type: 'scatter', // This is a scatter plot
            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"]]
        }
    ]
}

The above example allows you to drag the dataZoom component to zoom in or out of the chart. If you want to drag within the coordinate system and use the mouse wheel (or two-finger swipe on a touch screen) for zooming, you need to add an inside-type dataZoom component.

Based on the previous example, we add the configuration type: 'inside':

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,      // The left side is at the 10% position.
            end: 60          // The right side is at the 60% position.
        },
        {   // This dataZoom component also controls the x-axis.
            type: 'inside', // This dataZoom component is an inside-type dataZoom component
            start: 10,      // The left side is at the 10% position.
            end: 60          // The right side is at the 60% position.
        }
    ],
    ...
}

You can also specify which axis or axes the dataZoom component controls using dataZoom.xAxisIndex or dataZoom.yAxisIndex.

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
        }
    ]
}