ECharts interaction component

ECharts provides many interactive components: example components legend, title component title , visual mapping component visualMap , data area scaling component dataZoom , timeline components timeline .

In the following content, we will show you how to use the data region scaling component. dataZoom .

DataZoom

The dataZoom component can realize the function of scrolling through themouse wheel to zoom in and out of the chart.

By default dataZoom control the x-axis, that is, zoom and pan the data window 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 10% position.
            end: 60         // The right side is at 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 can only be dragged dataZoom component to zoom out orenlarge the chart. If you want to drag in the coordinate system and zoom with the mouse wheel (or move two fingers on the touch screen), you need to add another inside type a dataZoom module.

On the basis of the above examples, we will add type: 'inside' configuration information for:

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 10% position.
            end: 60         // The right side is at 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 10% position.
            end: 60         // The right side is at 60% position.
        }
    ],
    ...
}

Of course we can pass. dataZoom.xAxisIndex or dataZoom.yAxisIndex to specify dataZoom controls which axis or axes.

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

DataZoom