echarts 点击空白处获取空白处的坐标

413 阅读1分钟
myChart.getZr().on('click', function (param: any) {
        const pointInPixel = [param.offsetX, param.offsetY]
        console.log('pointInPixel', pointInPixel)
        // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值,借助于索引值的获取到其它的信息
        // 转换X轴坐标
        let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        // 转换Y轴坐标
        let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
        // x轴数据的索引值
        console.log('pointInGrid', pointInGrid2)
        // 所点击点的X轴坐标点所在X轴data的下标
        let xIndex = pointInGrid[0];
        // 所点击点的Y轴坐标点数值
        let yIndex = pointInGrid2[1];
        // 使用getOption() 获取图表的option
        let op = myChart.getOption();
        //获取到x轴的索引值和option之后,我们就可以获取我们需要的任意数据。
        // 点击点的X轴对应坐标的名称
        var time = op.xAxis[0].data[xIndex];
        // 点击点的series -- data对应的值
        var value = op.series[0].data[xIndex];
        console.log('val', time)
    });