echarts 折线图拖动轨点（vue）

 先上示例图，这是静图

这是拖动轨点后的图（拖得Thu 、Fri 两个轨点）

 

1. 结构部分如下

<template>
    <div style="width: 100%; height: 50%; overflow-y: auto">
      <div id="main" style="width: 90%; min-height: 400px"></div>
    </div>
</template>

2.js部分

data() {
    return {
      chart: null,
      option: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          orient: "horizontal",
          x: "center",
          top: "3%",
          data: ["房量基准", "预定量"],
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: [0, "100%"],
          },
        ],
        series: [
          {
            name: "房量基准",
            type: "line",
            // stack: "Total",
            color: "#68bbc4",
            smooth: true,
            smoothMonotone: "x",
            areaStyle: {
              color: "#e5ecfb",
            },
            emphasis: {
              focus: "series",
            },
            label: {
              show: false,
              position: "top",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "预定量",
            type: "line",
            // stack: "Total",
            color: "#c23531",
            smooth: true,
            smoothMonotone: "x",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              color: "rgba(255, 0, 0, 0.3)", // 填充颜色与透明度
              shadowColor: "rgba(0, 0, 0, 0.1)", // 阴影颜色
              shadowBlur: 10, // 阴影模糊程度
            },
            emphasis: {
              focus: "series",
            },
            data: [400, 200, 321, 546, 784, 124, 542],
          },
        ],
      },
      seriesIndex: null,
      pointIndex: null,
    };
  }, 
mounted() {
    this.chart = echarts.init(document.getElementById("main")); //初始化折线图
    this.getZzLine();
    // 鼠标按下事件
    this.chart.on("mousedown", (params) => {
      this.seriesIndex = params.seriesIndex;
      this.pointIndex = params.dataIndex;
      document.addEventListener("mousemove", this.onMouseMove);
     // 鼠标抬起时移除鼠标移动事件
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", this.onMouseMove);
      });
    });
  },
 methods: {
    //鼠标move移动时修改折线图y轴
    onMouseMove(event) {
      var pointInPixel = [event.offsetX, event.offsetY];
      //把offsetXY像素坐标转换为grid坐标，[0是x轴下标，1是y轴的值]
      var pointInGrid = this.chart.convertFromPixel("grid", pointInPixel);
      var data = this.option.series[this.seriesIndex].data;
      //y轴保留整数
      data[this.pointIndex] = parseInt(pointInGrid[1]);
      this.chart.setOption(this.option);
    },
    // 著作折线图
    getZzLine() {
      this.chart.setOption(this.option);
    },
}