小程序/移动端在echarts范围内点击或拖动时获取x轴下标(echart监听点击拖动)

const chart=echarts.init(canvas, null, {...略});

//在echarts初始化时调用chartOn函数
this.chartOn(chart)

//处理点击或拖动函数
chartOn(chart:any){
      const _this=this
      //监听点击‘click’并处理
      chart.getZr().on('click', function (param:any){
        // 所点击的像素坐标点
        const pointInPixel = [param.offsetX, param.offsetY]

        // 使用 convertFromPixel方法 将像素坐标值转换成逻辑坐标系上的点
        let pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);

        // 所点击点的X轴坐标点所在X轴data的下标
        let xIndex = pointInGrid[0];

        //点击范围是否在grid逻辑坐标系内
        if(chart.containPixel('grid', pointInPixel)){
          //在逻辑坐标系内则保存数据,或进行其它逻辑处理
          _this.setData({
            index:xIndex
          })
        }

      })
      
      //监听拖动‘mouseup’并处理
      chart.getZr().on('mouseup', function (param:any){
        //同上述
      })
 },

你可能感兴趣的:(微信小程序,学习记录,小程序,echarts,前端)