A clever method I suggest is to utilize a helper xAxis that includes the properties type: 'category', show: false, and represent your time data in the data property. This enables you to implement a dataZoom on this axis, triggering the dataZoom event to retrieve new data.
Check out this example:
function generateDateRandomPairs() {
const dateRandomPairs = [];
const date = new Date();
var j = 1;
for (let i = 0; i < 10000; i++) {
const number = j;
if (i % 10 == 0) {
j++;
}
dateRandomPairs.push([date.toISOString(), number]);
date.setSeconds(date.getSeconds() + 60);
}
return dateRandomPairs;
}
// All data but with lower resolution
// Should be used in dataZoom
var allData = generateDateRandomPairs();
// Data with high resolution
// Would be loaded through Ajax in real world
var mainPlotData = allData.slice(50, 200);
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'time',
name: 'Date'
},
{
type: 'category',
data: allData.map((point) => point[0]),
show: false
}
],
yAxis: [
{
gridIndex: 0,
type: 'value',
name: 'Value',
}
],
series: [
{
name: 'High-Res Data',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: mainPlotData
}
],
dataZoom: [
{
type: 'slider',
xAxisIndex: 1,
endValue: 200,
realtime: false
}
]
};
myChart.on('dataZoom', function(params) {
const startIndex = Math.round((params.start / 100) * allData.length);
const endIndex = Math.round((params.end / 100) * allData.length);
let resolution = Math.ceil((endIndex - startIndex) / 200);
resolution = resolution === 0 ? 1 : resolution;
const data = allData.slice(startIndex, endIndex).filter((x, i) => i % resolution === 0);
myChart.setOption({series: [{data: data}]})
});