echarts 如何绘制多条游标线且可以拖动

要绘制多条游标线且可以拖动，可以使用 ECharts 中的标记和事件处理功能。具体实现步骤如下：

1. 在 option 中定义多条游标线，可以使用 markLine 组件实现，例如：

markLine: {
  data: [
    {type: 'average', name: '平均值'},
    {yAxis: 50, name: '标线1'},
    {yAxis: 80, name: '标线2'}
  ]
}

2. 开启 ECharts 的事件处理功能，并监听标记线的事件，例如：

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'line',
    snap: true
  },
  position: function (pt) {
    return [pt[0], '10%'];
  }
},
axisPointer: {
  link: {xAxisIndex: 'all'},
  label: {
    backgroundColor: '#777'
  },
  lineStyle: {
    color: '#777'
  },
  // 监听标记线事件
  handle: {
    show: true,
    color: '#777'
  }
}

3. 在 handle 事件的回调函数中，实现标记线的拖动功能，例如：

axisPointer: {
  handle: {
    show: true,
    color: '#777',
    // 标记线拖动事件
    onDrag: function (params) {
      var markLineData = params.batch[0].series[0].markLine.data;
      var yAxisIndex = params.batch[0].dataIndex;
      var yAxisValue = params.batch[0].value;
      for (var i = 0; i < markLineData.length; i++) {
        if (markLineData[i].name === '标线1') {
          markLineData[i].yAxis = yAxisValue;
        }
        if (markLineData[i].name === '标线2') {
          markLineData[i].yAxis = yAxisValue + 30;
        }
      }
      chart.setOption({
        series: [{
          markLine: {
            data: markLineData
          }
        }]
      });
    }
  }
}

通过上述步骤，就可以在 ECharts 中绘制多条游标线，并且可以拖动实现动态变化。