echarts折线图鼠标框选放大

要实现echarts折线图鼠标框选放大，可以使用dataZoom组件。具体步骤如下：

1.在option中添加dataZoom组件，设置type为inside，xAxisIndex为0（如果有多个x轴的话），startValue和endValue为0和100，表示默认情况下x轴的范围是全部数据。

2.在xAxis中添加axisPointer属性，设置type为shadow，表示鼠标移动到x轴上时会出现一个阴影。

3.在series中添加markArea属性，设置silent为true，表示不响应鼠标事件，然后设置data为一个空数组，表示默认情况下没有框选。

4.在series中添加markPoint属性，设置symbol为circle，表示标记点的形状为圆形，然后设置data为一个空数组，表示默认情况下没有标记点。

5.在series中添加markLine属性，设置silent为true，表示不响应鼠标事件，然后设置data为一个空数组，表示默认情况下没有标记线。

6.在图表上方添加一个按钮，点击按钮后调用echarts的dispatchAction方法，触发dataZoom组件的start和end事件，从而实现框选放大的效果。

下面是一个示例代码，可以参考一下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
            type: 'shadow'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        symbol: 'circle',
        itemStyle: {
            emphasis: {
                color: '#EB547C',
                borderColor: '#EB547C',
                borderWidth: 20
            }
        },
        markArea: {
            silent: true,
            data: []
        },
        markPoint: {
            symbol: 'circle',
            data: []
        },
        markLine: {
            silent: true,
            data: []
        }
    }],
    dataZoom: [{
        type: 'inside',
        xAxisIndex: 0,
        startValue: 0,
        endValue: 100
    }]
};

// 添加一个按钮，点击后框选放大
var button = document.createElement('button');
button.innerHTML = '框选放大';
button.onclick = function() {
    var chart = echarts.getInstanceByDom(document.getElementById('chart'));
    chart.dispatchAction({
        type: 'dataZoom',
        start: 0,
        end: 50
    });
};
document.body.appendChild(button);