jQuery+echarts实现line图中每个节点可上下拖动

实现这个功能需要涉及到两部分内容：jQuery 拖拽和 echarts 图表更新。可以按照以下步骤来实现：

1. 引入jQuery库和echarts库，并创建一个放置echarts图表的DOM元素。

<div id="chart" style="width: 100%; height: 500px;"></div>

2. 初始化echarts图表，并设置数据和配置项。注意，需要将每个节点的数据包含在一个数组中，并按照时间顺序排列。

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

var data = [
  [0, 10],
  [1, 20],
  [2, 30],
  [3, 40],
  [4, 50],
  [5, 60]
];

var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: data
  }]
};

myChart.setOption(option);

3. 给每个节点添加拖拽事件。这里使用jQuery UI库中的draggable方法实现拖拽。

$.each(data, function(i, item) {
  var node = myChart.convertToPixel('grid', item);
  var el = $('<div class="node" data-index="' + i + '"></div>')
    .css({
      position: 'absolute',
      left: node[0] + 'px',
      top: node[1] + 'px'
    })
    .draggable({
      axis: 'x',
      containment: 'parent',
      drag: function(event, ui) {
        var index = $(this).data('index');
        var node = myChart.convertFromPixel('grid', [ui.position.left, ui.position.top]);
        data[index][0] = node[0];
        data[index][1] = node[1];
        myChart.setOption({
          series: [{
            data: data
          }]
        });
      }
    });
  $('#chart').append(el);
});

4. 最后，通过拖拽事件更新echarts图表的数据，并更新配置项。

完整代码如下：

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

var data = [
  [0, 10],
  [1, 20],
  [2, 30],
  [3, 40],
  [4, 50],
  [5, 60]
];

var option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: data
  }]
};

myChart.setOption(option);

$.each(data, function(i, item) {
  var node = myChart.convertToPixel('grid', item);
  var el = $('<div class="node" data-index="' + i + '"></div>')
    .css({
      position: 'absolute',
      left: node[0] + 'px',
      top: node[1] + 'px'
    })
    .draggable({
      axis: 'x',
      containment: 'parent',
      drag: function(event, ui) {
        var index = $(this).data('index');
        var node = myChart.convertFromPixel('grid', [ui.position.left, ui.position.top]);
        data[index][0] = node[0];
        data[index][1] = node[1];
        myChart.setOption({
          series: [{
            data: data
          }]
        });
      }
    });
  $('#chart').append(el);
});

同时需要在HTML中引入jQuery库和jQuery UI库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>