Echart click event

let option = {}
let myChart = echarts.init(document.querySelector('#chart1'));
myChart.getZr().on('click', params => {
    let pointInPixel = [params.offsetX, params.offsetY]
    if (myChart.containPixel('grid', pointInPixel)) {
        let pointInGrid = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel)
        const xIndex2 = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0]

        console.log("=======================================================")
        console.log("点击的柱子索引 ===> " + pointInGrid)
        console.log("点击位置的坐标 ===> " + [params.offsetX, params.offsetY])
        console.log("?判断鼠标点击的位置是否是图表展示区里面的位置 ===> " + myChart.containPixel('grid', [params.offsetX, params.offsetY]))
        console.log("?判断是否是点击的图表里面的内容 ===> " + (name[pointInGrid[0]] !== undefined))
        console.log("x轴数据的索引 ===> " + pointInGrid[0])
        console.log("?y轴数据的索引 ===> " + pointInGrid[1])
        console.log("x轴数据 ===> " + option.xAxis[0].data[xIndex2])
    }
})
myChart.setOption(option);

reference

Echarts histogram-click event implementation

Echarts click on the x-axis to get the x-axis data

Guess you like

Origin blog.csdn.net/qq_42700109/article/details/131275352