如何使用ECharts实现时间轴（X轴）及Y轴的鼠标框选缩放功能？

嘿，我来帮你搞定ECharts里的框选缩放需求！要实现鼠标左键框选X轴区域同时缩放X、Y轴，核心是配置ECharts的dataZoom组件，下面给你详细说明和完整可运行的代码示例：

• 必须添加dataZoom组件，设置type: 'inside'——这个类型支持鼠标拖拽框选区域触发缩放操作
• 配置xAxisIndex: 0和yAxisIndex: 0，让这个dataZoom同时关联X轴和Y轴（如果你的图表有多轴，可以调整对应索引值）
• 开启brushSelect: true，明确允许鼠标左键框选来触发缩放
• 保持zoomLock: false（默认值就是false），这样缩放时会同时调整X、Y轴的显示范围，而不是只锁定单一轴

我把你的基础代码补全并添加了必要配置，直接运行就能看到效果：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <!-- 引入ECharts官方CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript">
        // 初始化图表实例
        var myChart = echarts.init(document.getElementById('container'));

        // 生成模拟时间序列测试数据
        var testData = [];
        for (let i = 0; i < 100; i++) {
            testData.push([
                new Date(2024, 0, i + 1).toLocaleDateString(),
                Math.floor(Math.random() * 80 + 20)
            ]);
        }

        var option = {
            xAxis: {
                type: 'category',
                data: testData.map(item => item[0])
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'line',
                smooth: true,
                data: testData.map(item => item[1])
            }],
            // 关键：添加dataZoom组件实现框选缩放
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    brushSelect: true,
                    zoomLock: false,
                    filterMode: 'filter' // 可选：过滤掉区域外的数据，只显示选中范围内的内容
                }
            ]
        };

        // 渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

• 测试代码里我添加了模拟的时间序列数据，你可以替换成自己的业务数据
• 如果需要快速恢复缩放状态，右键点击图表就能触发重置
• 要是需要更直观的缩放控件，可以额外添加一个type: 'slider'的dataZoom组件，放在图表底部或顶部，方便手动拖拽调整范围

内容的提问来源于stack exchange，提问作者user9270170