vue+echarts 鼠标按下手动重绘曲线，抬起停止绘制

本文章根据react+echarts的文章博主修改而来，原博客地址：

【echarts+react鼠标绘制折线图】实现鼠标在图表上按住移动，折线实时重绘_实现用鼠标折线图-CSDN博客

效果与其相同

直接把下面定义的函数复制就可以用，记得要初始化echarts并设置宽高，否则会init失败

 核心点就在于echarts自带的getZr()，它用于监控鼠标在滑过图表范围内所处的位置，再根据convertFromPixel方法转换一下，就可以拿到数据，具体自己可以打印一下看看，就能明白了。

setCharts() {
      this.myCharts.clear()
      let seriesData = [
        ['00:15', 134],
        ['00:30', 43],
        ['00:45', 254],
        ['01:00', 565],
        ['01:15', 35],
        ['01:30', 786],
        ['01:45', 89],
        ['02:00', 177],
        ['02:15', 52],
        ['02:30', 25],
        ['02:45', 10],
        ['03:00', 145],
        ['03:15', 366],
        ['03:30', 70],
        ['03:45', 20],
        ['04:00', 80],
      ]
      let xData = [
        '00:15',
        '00:30',
        '00:45',
        '01:00',
        '01:15',
        '01:30',
        '01:45',
        '02:00',
        '02:15',
        '02:30',
        '02:45',
        '03:00',
        '03:15',
        '03:30',
        '03:45',
        '04:00',
      ]
      let symbolSize = 8

      // 配置折线图
      let option = {
        title: {
          text: '时间范围:2023-01-30 00:15 至 2023-01-30 04:00',
          x: 'left',
          textStyle: {
            color: '#000',
            fontWeight: 'lighter',
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          /* 数据网格属性 */
          left: '2%',
          right: '4%',
          bottom: '6%',
          containLabel: true,
        },
        legend: {
          itemWidth: 6, // 宽度
          itemHeight: 6, // 高度
          itemGap: 30, // 间距
          textStyle: {
            color: '#333',
            fontSize: 16,
            lineHight: 16,
          },
        },
        xAxis: [
          {
            // name: '日期',
            type: 'category',
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#333',
              },
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              color: '#333',
              fontSize: 14,
              formatter: function (params) {
                let newParamsName = '' // 最终拼接成的字符串
                let paramsNameNumber = params.length // 实际标签的个数
                let provideNumber = 8 // 每行能显示的字的个数
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = '' // 表示每一次截取的字符串
                    let start = p * provideNumber // 开始截取的位置
                    let end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              },
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            name: '单位：kW',
            type: 'value',
            // y轴文字颜色
            axisLabel: {
              color: '#333',
              fontSize: 14,
            },
            axisLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            id: 'a',
            name: '曲线修正',
            type: 'line',
            smooth: false,
            symbol: 'circle',
            symbolSize: symbolSize,
            data: seriesData,
          },
        ],
      }
      let charts = this.myCharts
      let click = false
      this.myCharts.setOption(option)
      this.myCharts.getZr().on('mousedown', handleMouseDown)
      this.myCharts.getZr().on('mousemove', mousemoveChart)
      this.myCharts.getZr().on('mouseup', handleMouseUp)
      this.myCharts.getZr().on('globalout', handleMouseUp) // 鼠标移出整个图表时触发

      function mousemoveChart(e) {
        if (click) {
          const [xAxisValue, yAxisValue] = charts.convertFromPixel('grid', [e.event.offsetX, e.event.offsetY])
          // console.log('data1', xAxisValue, yAxisValue)
          seriesData[xAxisValue][1] = yAxisValue
          charts.setOption({
            series: [
              {
                id: 'a',
                data: seriesData,
              },
            ],
          })
        }
      }
      function handleMouseDown() {
        click = true
      }
      function handleMouseUp() {
        click = false
      }
    },