echart圖表縮放功能以及縮放事件處理

縮放功能

const defaultOption=          
{                           
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
     },          
	///用於添加框選縮放功能
	toolbox: {                   
		 show: true,                  
		feature: 
		{                     
			dataZoom:
			 {                        
				realtime: false,                         
				yAxisIndex: 'none',                      
			},                    
			restore: {},                   
		}            
	},               
	dataZoom: 
	[
		{type: 'inside'},        //用於添加滾輪縮放
		{type:'slider' },  //用於添加滑動條縮放,
	 ],            
	   series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

爲echart設置這個option後,我們就能看到如下曲線了,點擊右上角的方塊後,可以鼠標左鍵框選縮放指定區域,滾輪滑動條也可進行縮放,
更多詳情可以查看官方文檔:
dataZoom
toolBox

在這裏插入圖片描述

設置toolBox的縮放框默認激活

默認情況下,echart在初始化後想進行框選縮放的話,必須鼠標點擊一下右上角的那個縮放框,但是有些場景下,希望能省去這個步驟,那麼可以使用下面的代碼

//chartInstance是echart初始化後的實例
chartInstance.dispatchAction({                
	type: 'takeGlobalCursor',                
	key: 'dataZoomSelect',               
	 dataZoomSelectActive: true // activate or inactivate          
});

這樣初始化後,默認右上角的縮放按鈕就是亮的了
參考自echart的 github isues:toolbox的dataZoom開關設置默認打開
在這裏插入圖片描述

縮放事件

有了縮放功能,接下來監聽縮放事件,來處理一些事情,

initDataZoomCallback:function()       
{           
	let self = this;           
	self.chartInstance.off('dataZoom');           
	self.chartInstance.on('dataZoom', function (param)           
	{                
		let zoomData = param.batch[0];                
		let startValue = 0;                
		let endValue = 0;               
		if(typeof zoomData.start !='undefined')                
		{                   
			//滾輪, 滑動條                   
			 //這裏的縮放百分比是 沒有  除以100的,所以需要乘以 0.01             
			let startIndex = parseInt(self.chartData.length*zoomData.start*0.01);  
			let endIndex = parseInt(self.chartData.length*zoomData.end*0.01);
			//這裏需要注意,縮放過程中會出現計算出來的索引大於數據長度的問題,所以這裏判斷一下
			endIndex = endIndex>self.chartData.length-1?self.chartData.length-1:endIndex;		
			//這算出來的索引就可以直接用於圖表數據的數組中進行取值了
		}              
		else                
		{                   
			//拖放                   
			startValue =moment(parseInt(zoomData.startValue)).format('YYYY-MM-DD HH:mm:ss');                    
			endValue = moment(parseInt(zoomData.endValue)).format('YYYY-MM-DD HH:mm:ss');               
		}
	})        
},

以上就是echart的縮放事件的基本處理過程,參考自官方文檔:events.dataZoom

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章