Echarts图表如何进行数据缩放

ECharts 提供了数据缩放的功能，可以通过配置 dataZoom 组件来实现。dataZoom 组件可以在图表下方或右侧添加一个滑动条，用户可以通过拖动滑动条来缩放显示的数据范围。

以下是一个简单的示例，展示了如何在 ECharts 图表中添加 dataZoom 组件：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var 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', // 添加一个滑动条类型的 dataZoom 组件
            start: 10, // 初始时，滑动条的起始位置，数值范围 0-100
            end: 60 // 初始时，滑动条的结束位置，数值范围 0-100
        },
        {
            type: 'inside', // 添加一个内置型的 dataZoom 组件，可以通过鼠标滚轮或者触摸板来缩放
            start: 10,
            end: 60
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中，我们添加了两个 dataZoom 组件：

1. 第一个 dataZoom 组件是滑动条类型（slider），用户可以通过拖动滑动条来缩放数据范围。
2. 第二个 dataZoom 组件是内置型（inside），用户可以通过鼠标滚轮或者触摸板来缩放数据范围。

start 和 end 属性分别表示滑动条的起始位置和结束位置，数值范围为 0-100。例如，start: 10 和 end: 60 表示显示数据范围的 10% 到 60%。

你可以根据自己的需求调整 dataZoom 组件的配置，以实现不同的数据缩放效果。更多关于 dataZoom 组件的配置选项，可以参考 ECharts 官方文档：https://echarts.apache.org/zh/option.html#dataZoom