Echarts实现单条折线可拖拽效果

Echarts是一个适用于各类数据的可视化工具，官方提供了丰富的API和示例，其中包括了单条折线可拖拽效果的实现方法。以下是实现该效果的完整攻略。

实现步骤

1.在Echarts中使用直线图来渲染折线，并设置符合需求的option。需要注意的是，启用拖拽功能的折线需要设置draggable为true，cursor为"move"，并绑定onDrag事件。在onDrag中，应该通过setOption方法实时更新折线的数据，以实现拖动效果。

2.实现onDrag事件，该事件应该触发每一次拖动行为，并返回该拖动行为的坐标点。可以通过以下方法实现：

onDrag: function(params) {
  let { target, dx, dy } = params;
  let xAxis = myChart.getModel().getComponent('xAxis').axis.scale;
  let yAxis = myChart.getModel().getComponent('yAxis').axis.scale;
  let series = myChart.getModel().getSeries()[0];
  let data = series.get('data');
  let dataIndex = target._echartsDataIndex;
  let itemData = data[dataIndex];
  let newItemData = [xAxis.p2c(xAxis.c2p(itemData[0]) + dx), yAxis.p2c(yAxis.c2p(itemData[1]) + dy)];
  data[dataIndex] = newItemData;
  myChart.setOption({
    series: [
      {
        data: data,
      },
    ],
  });
}

其中，params参数为拖拽事件信息，包括target、dx、dy三个属性。target指代当前被拖拽元素，dx和dy分别表示水平和竖直方向上的拖拽距离。通过该函数，将折线上对应的点坐标进行更新。

3.在html中引入相关js文件，使用如下代码初始化Echarts：

<div id="chart"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script>
  let myChart = echarts.init(document.getElementById('chart'));
</script>

示例

以下是两个实现单条折线可拖拽效果的完整示例，供参考。

示例一

let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let seriesData = [820, 932, 901, 934, 1290, 1330, 1320];

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

let option = {
  tooltip: {
    trigger: 'axis',
    position: function(pt) {
      return [pt[0], '10%'];
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xAxisData,
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '10%'],
  },
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'none',
      sampling: 'average',
      itemStyle: {
        color: '#1890ff',
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(24, 144, 255, 1)',
          },
          {
            offset: 1,
            color: 'rgba(24, 144, 255, 0.1)',
          },
        ]),
      },
      data: seriesData.map(function(d, i) {
        return [xAxisData[i], d];
      }),
      cursor: 'move',
      draggable: true,
      onDrag: function(params) {
        let { target, dx, dy } = params;
        let xAxis = myChart.getModel().getComponent('xAxis').axis.scale;
        let yAxis = myChart.getModel().getComponent('yAxis').axis.scale;
        let series = myChart.getModel().getSeries()[0];
        let data = series.get('data');
        let dataIndex = target._echartsDataIndex;
        let itemData = data[dataIndex];
        let newItemData = [xAxis.p2c(xAxis.c2p(itemData[0]) + dx), yAxis.p2c(yAxis.c2p(itemData[1]) + dy)];
        data[dataIndex] = newItemData;
        myChart.setOption({
          series: [
            {
              data: data,
            },
          ],
        });
      },
    },
  ],
};
myChart.setOption(option);

示例二

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

let base = -10;
let seriesData = [];

for (let i = 0; i <= 100; i++) {
  let theta = i / 100 * 360;
  let r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
  seriesData.push([r * Math.cos(theta) + base, r * Math.sin(theta) + base]);
}

let option = {
  title: {
    text: 'Polar Graph',
  },
  legend: {
    show: true,
    data: ['line'],
  },
  polar: {
    center: ['50%', '54%'],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  angleAxis: {
    type: 'value',
    startAngle: 0,
  },
  radiusAxis: {},
  series: [
    {
      coordinateSystem: 'polar',
      name: 'line',
      type: 'line',
      showSymbol: false,
      data: seriesData,
      cursor: 'move',
      draggable: true,
      symbolSize: 0,
      animation: false,
      lineStyle: {
        color: '#1890ff',
        width: 2,
        type: 'solid',
      },
      areaStyle: {
        opacity: 0.3,
        color: '#1890ff',
      },
      onDrag: function(params) {
        let { target, dx, dy } = params;
        let polar = myChart.getModel().getComponent('polar').axis;
        let series = myChart.getModel().getSeries()[0];
        let data = series.get('data');
        let dataIndex = target._echartsDataIndex;
        let itemData = data[dataIndex];

        let newTheta = polar.c2p(polar.p2c(itemData[0]) + dx);
        let newR = polar.c2p(polar.p2c(itemData[1]) + dy);
        let theta = newTheta % 360;
        let r = Math.max(Math.min(newR, 150), 0);

        data[dataIndex] = [polar.p2c(theta), polar.p2c(r)];
        myChart.setOption({
          series: [
            {
              data: data,
            },
          ],
        });
      },
    },
  ],
};

myChart.setOption(option);

以上两个示例分别演示了直线图和极坐标图的折线拖拽效果，可以通过这两个示例的代码来了解实现方法。