9.8. ECharts interaction component

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

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.