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

最近在使用百度的echarts写股票的K线图，刚开始用遇到大堆的问题，光是为了解决这些问题都花了我一成天时间。两个论坛都发帖了，没人理。仍是靠本身吧。

如下代码只写了关键片断，

//什么在option外面的变量
    var clickIndex;
option = { //配置信息
    tooltip: { //提示框
        //提示触发类型：不触发
        trigger: 'none',
    },
    //formatter回调函数，
    formatter: val => {
        //获取当前阴影部分点击的索引值并
        clickIndex = val[0].dataIndex
    },
}
//生成图框内容
myChart.setOption(option);
//加上getZr()即为阴影点击事件 
myChart.getZr().on('click', function(params) {
    //获得准确索引值，不会随着位置的变化而变化！
    console.log(clickIndex);
}

 

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

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);
});

最后仍是要吐槽一下，不知道是本身笨仍是echarts官方文档写的不够简明。

努力总会解决bug的。加油吧