echarts 如何绘制多条垂直于x轴的游标线且可以拖动

要实现多条垂直于x轴的游标线且可以拖动，可以使用 ECharts 的 markLine 组件和 dataZoom 组件。具体实现步骤如下：

1. 在 ECharts 的 option 中配置 markLine 组件。

option = {
  ...
  xAxis: {
    ...
    axisLabel: {
      show: true,
      formatter: function (value, index) {
        // 配置 x 轴标签
        return value;
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {...},
  series: {...},
  // markLine 组件
  markLine: {
    symbol: 'none',
    precision: 2,
    label: {
      position: 'middle'
    },
    lineStyle: {
      color: 'red',
      type: 'solid',
      opacity: 0.5
    },
    data: [
      // 配置多个 markLine 数据
      {
        name: 'line1',
        yAxis: 0
      },
      {
        name: 'line2',
        yAxis: 0
      },
      ...
    ]
  },
  dataZoom: {
    show: true,
    realtime: true,
    start: 0,
    end: 100,
    // 配置 dataZoom 中的 handle，即拖动游标线的图标
    handleIcon: 'path://M512 256L256 512V0z m-96 512h512V0H160z',
    handleSize: '100%',
    handleStyle: {
      color: '#fff',
      borderWidth: 0,
      borderColor: '#ddd'
    },
    // 配置 dataZoom 的组件位置
    bottom: 0
  }
  ...
}

2. 在 markLine 中配置多个数据项，每个数据项代表一条游标线，其中 yAxis 属性表示游标线在 y 轴上的位置。

3. 配置 dataZoom 组件，用于拖动游标线。其中 handleIcon 属性用于配置拖动游标线的图标，bottom 属性用于配置 dataZoom 的位置。

这样就可以实现多条垂直于 x 轴的游标线且可以拖动。