echarts折线图 上下拖动数据怎么做

Echarts支持通过dataZoom组件来实现上下拖动数据的功能。在使用折线图时，你可以按照以下步骤来实现：

1.在option中添加dataZoom组件：

dataZoom: [
    {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 100,
        bottom: 10,
        height: 20,
        handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z M5,0 v9.7h5 v-9.7h-5 Z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            borderColor: '#5476c2',
            borderWidth: 1,
            shadowBlur: 2,
            background: '#5476c2',
            shadowColor: '#5476c2',
        },
    },
],

这里使用了type为slider的dataZoom组件，xAxisIndex指定了要控制的x轴，start和end控制了滑块的初始位置和结束位置，bottom和height控制了滑块的位置和高度，handleIcon和handleStyle控制了滑块的样式。

2.在x轴中开启boundaryGap选项：

xAxis: [
    {
        type: 'category',
        boundaryGap: true, // 开启边界间隙
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
],

这里使用了boundaryGap选项，用于控制折线图的边界间隙，这样才能在图表上下拖动数据。

3.在series中添加dataZoom属性：

series: [
    {
        name: '邮件营销',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210],
        dataZoom: true, // 添加dataZoom属性
    },
    // ...
],

这里在series中添加了dataZoom属性，用于与dataZoom组件进行关联。

通过以上步骤，你就可以实现上下拖动数据的功能了。当然，你可以根据自己的需求进行调整和优化。