1. 程式人生 > >echarts折線圖新增區域點選事件,而不用去點小圓點(擴大點選範圍)

echarts折線圖新增區域點選事件,而不用去點小圓點(擴大點選範圍)

不要寫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正確,結果很可能是一樣的,沒有具體實驗過。