echarts折線圖新增區域點選事件,而不用去點小圓點(擴大點選範圍)
阿新 • • 發佈:2019-02-09
不要寫onClick事件,用以下方法代替
myChart.getZr().on('click',function (params) { var pointInPixel= [params.offsetX, params.offsetY]; if (myChart.containPixel('grid',pointInPixel)) { /*此處新增具體執行程式碼*/ var pointInGrid=myChart.convertFromPixel({seriesIndex:0},pointInPixel); //X軸序號 var xIndex=pointInGrid[0]; //獲取當前圖表的option var op=myChart.getOption(); //獲得圖表中我們想要的資料 var month=op.xAxis[0].data[xIndex]; } }); //將可以響應點選事件的範圍內,滑鼠樣式設為pointer-------------------- myChart.getZr().on('mousemove',function (params) { var pointInPixel= [params.offsetX, params.offsetY]; if (myChart.containPixel('grid',pointInPixel)) { myChart.getZr().setCursorStyle('pointer'); }; }); myChart.on('mouseout', function (params) { var pointInPixel= [params.offsetX, params.offsetY]; if (!myChart.containPixel('grid',pointInPixel)) { myChart.getZr().setCursorStyle('default'); }; }); //--------------------------------------------------------------
如果對convertFromPixel方法有好的理解,應該可以獲得更多有效的資料,操作起來應該會更簡單一點。
之前的程式碼IE不能識別,修改過後應該比較標準來,我測試在IE下可以正常使用。
這裡暫時沒有搞明白,理解膚淺,歡迎指教。
———————————更新————————————————————
最近才明白convertFromPixel這個破函式的作用,其實功能很弱,只是將畫素座標轉換成邏輯座標。
比如pointInPixel是[480,120]轉換後得到pointInGrid[4,9],4就是X軸座標,5就是Y軸座標。
finder {seriesIndex:0}其實可以換成其他很多寫法,只要finder正確,結果很可能是一樣的,沒有具體實驗過。