縮放功能
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