想求一些思路 echarts 问题

有一组 echarts （ v-for ）遍历出来，一整个有一个竖线，竖线可以左右，但是不能上下移动，鼠标按下移动会跟随鼠标，鼠标松开会自动吸附最近的数据点，得到 x,y 两个折线的数据

https://tutu.to/image/image.aOySP

ondrag: function (event) {
                // 限制只允许左右拖动
                var newX = event.x;
                var line = event.target;
                line.attr('shape', {
                    x1: newX,
                    y1: 0,
                    x2: newX,
                    y2: 400
                });
            },

 graphic: [
          {
            type: "line",
            id: "drag-line",
            shape: {
              x1: 100, // 起始位置
              y1: 0,
              x2: 100, // 结束位置
              y2: 400,
            },
            style: {
              stroke: "#ff0000",
              lineWidth: 2,
            },
            draggable: true, // 开启拖拽

用这个拖拽的时候可以限制上下，但是不知道为什么左右移动的时候线会消失，停止移动过一会才会显示