echarts的折线图如何添加鼠标框选局部功能？

要为 Echarts 折线图添加鼠标框选局部功能，可以使用 Echarts 提供的 dataZoom 组件。下面是一个示例代码，展示如何在 Echarts 折线图中添加 dataZoom 组件：

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', // 支持鼠标滚轮缩放
            start: 0, // 默认数据窗口范围的起始位置为 0%
            end: 100 // 默认数据窗口范围的结束位置为 100%
        },
        {
            type: 'inside', // 支持鼠标滚轮缩放
            start: 0, // 默认数据窗口范围的起始位置为 0%
            end: 100 // 默认数据窗口范围的结束位置为 100%
        }
    ]
};

在上面的示例中，我们使用了 Echarts 的 dataZoom 组件，并添加了两个子组件：slider 和 inside。这两个子组件都支持鼠标滚轮缩放，可以通过拖动滑块来选择数据窗口范围。

如果需要在鼠标框选局部时触发事件，可以通过监听 dataZoom 组件的 brushSelected 事件来实现。例如：

myChart.on('dataZoom', function(params) {
    // 获取当前数据窗口范围
    var start = params.batch[0].start;
    var end = params.batch[0].end;
    console.log('start:', start, 'end:', end);
});

在上面的代码中，我们使用了 Echarts 的 on 方法来监听 dataZoom 组件的 brushSelected 事件。当用户拖动滑块选择数据窗口范围时，会触发该事件，并可以通过 params.batch[0].start 和 params.batch[0].end 获取当前的数据窗口范围。