echarts 如何可以拖动markline

Echarts 中的 markline 组件默认是不能拖动的，但是我们可以通过监听鼠标事件和 markline 的位置属性，手动实现 markline 的拖动。

具体实现步骤如下：

1. 在 option 中定义 markline 组件，设置其相关属性，例如起点、终点、样式等。

2. 监听鼠标事件，当鼠标按下时，记录鼠标在图表中的位置和 markline 的起始位置。

3. 监听鼠标事件，当鼠标移动时，计算鼠标在图表中的位置与起始位置的差值，并将其加到 markline 的起始位置上。

4. 在 markline 上添加 draggable 属性，使其能够被拖动。同时，设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。

下面是一个示例代码：

option = {
    // 其他配置项
    series: [{
        type: 'line',
        data: [10, 20, 30, 40, 50],
        markLine: {
            silent: true, // 取消鼠标点击事件
            symbol: 'none',
            label: {
                position: 'middle',
                formatter: 'Markline'
            },
            lineStyle: {
                color: '#333'
            },
            data: [{
                yAxis: 30
            }]
        }
    }]
};

var chart = echarts.init(document.getElementById('main'));

var markline = chart.getModel().getComponent('series', 0).getMarkLineModel(0);

var start = null;

chart.getZr().on('mousedown', function(params) {
    start = chart.convertFromPixel({
        gridIndex: 0
    }, [params.offsetX, params.offsetY]);
});

chart.getZr().on('mousemove', function(params) {
    if (!start) {
        return;
    }
    var end = chart.convertFromPixel({
        gridIndex: 0
    }, [params.offsetX, params.offsetY]);
    var diff = end[1] - start[1];
    markline.option.data[0].yAxis += diff;
    start = end;
    chart.setOption({
        series: [{
            markLine: markline.option
        }]
    });
});

chart.getZr().on('mouseup', function(params) {
    start = null;
});

markline.option.label.show = true;
markline.option.draggable = true;

在上述代码中，我们首先定义了一个 markline，设置其样式和位置。然后监听了鼠标事件，当鼠标按下时，记录 markline 的起始位置。当鼠标移动时，计算鼠标位置与起始位置的差值，并将其加到 markline 的起始位置上，从而实现 markline 的拖动。在 markline 上添加了 draggable 属性，使其能够被拖动，同时设置 label 的 position 为 'middle'，以保证 label 文字显示在 markline 上方。最后，我们将 markline 的 option 通过 setOption 方法设置到图表中。