Echarts 阴影点击事件获得当前柱状图的索引值方法

Echarts 阴影点击事件获得当前柱状图的索引值方法

var clickIndex;

const _this = this

this.charts.getZr().on('click', function (params) {

    // console.log(clickIndex) //索引

 

})

 

   let option = {

                tooltip: {

                    trigger: 'axis',

                    confine: true,

                    axisPointer: {

                        type: 'shadow'

                    },

                    formatter: function (prams) {

                        clickIndex = prams[0].dataIndex       //----------------索引

                        return `${prams[0].name}:${prams[0].value}${unit}`

                    }

                },

//配置..................

}

 

this.charts.setOption(option, true)

网上还有另外一种方法，但是得到的索引值会随着位置的变化而变化！！！！有点坑，适合用在静态图

myChart.getZr().on('click', function(params) {
               
                // 获取到鼠标点击位置：
                 var pointInPixel = [params.offsetX, params.offsetY];
                // 使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，比如X、Y轴lable、空白位置等的点击事件。
                 if (myChart.containPixel('grid', pointInPixel)) {
                 使用API convertFromPixel获取点击位置对应的x轴数据的索引值，我的实现是借助于索引值的，当然可以获取到其它的信息，详细请查看文档。
                 var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                 let op = myChart.getOption()
                  // 获取当前点击位置要的数据
                 var xData = op.series[0].data[xIndex]
                 console.log(xData);
});