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的。加油吧