echarts 折线图拖动当前点位会有拖动不触发drag事件

开发两年半

于 2024-06-18 13:27:59 发布

阅读量86

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_73854491/article/details/139770674

版权

    drawLine(index) {
      console.log(2, "给K线赋值")
      this.drawLineChart.setOption({
        series: [{
          data: this.drawLineData[index]
        }]
      })
      console.log("*************", this.drawLineData[index])
      this.drawLineChart.setOption({
        graphic: echarts.util.map(this.drawLineData[index], (dataItem, dataIndex) => {
          const that = this // 因为ondrag函数必须在回调内使用this.position获取实时坐标，此处必须用that替换this
          return {
            type: 'circle',
            shape: {
              // 圆点的半径。
              r: this.symbolSize * 2
            },
            position: this.drawLineChart.convertToPixel('grid', dataItem),
            invisible: true,
            draggable: true,
            z: 100,
            ondrag: echarts.util.curry(function (dataIndex, dx) { // 此处必须用匿名函数，不能用箭头函数，否则拿不到拖动的坐标

              let origin = that.drawLineChart.convertToPixel('grid', that.drawLineData[index][dataIndex]) // 得到每个圆点原始位置
              // console.log(dataIndex, this.position[1], )
              this.position[0] = origin[0] // 控制每个点位只能在y轴方向移动
              // this.position[1] = origin[1] // 控制每个点位只能在x轴方向移动
              // 实时获取拖动的点位信息并根据此信息重新画图
              that.drawLineData[index][dataIndex] = that.drawLineChart.convertFromPixel('grid', this.position)
              that.drawLineChart.setOption({
                series: [{
                  data: that.drawLineData[index]
                }]
              })
              // that.storeDatas.push(this.drawLineData);
              // that.storeDatas
              that.storeDatas = that.drawLineData
              // console.log("存储最后写入数据库的数据", that.storeDatas)
              
              that.drawLineChart.setOption({
                graphic: that.drawLineData[index].map(function (item, dataIndex) {
                  return {
                    position: that.drawLineChart.convertToPixel('grid', item)
                  };
                })
              });
            }, dataIndex),
            onmousemove: function () {
              that.showTooltip(dataIndex);
            },
            onmouseout: function () {
              that.hideTooltip(dataIndex);
            },
          }
        })
      })
    },

原理：1 将拖拽点半径扩大 2 拖拽过后点位还存在在原始点位导致拖拽失效（需要消耗一些性能，在获取到新的值的时候再重新绘制一次